Advanced Search

Fix for 'menu under select' issue in IE

/ Published in: JavaScript
Save to your folder(s)
In Internet Explorer, it's a well-known issue that tags are rendered above other layers and things like drop-down menus. This fix is specifically for the "Son of Suckerfish" drop-down menus (see URL), which are entirely CSS-based (JS is needed only for Internet Explorer). However, it could be adapted for use with similar drop-down menus. The lines I added to the original js are "var selects" and the two "for" loops with comments.

Be sure to read the note at the end of this script.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /* Son of Suckerfish Dropdowns. JS needed only for
  2.    Internet Explorer. Documented here:
  3.    http://www.htmldog.com/articles/suckerfish/dropdowns/*/
  4. sfHover = function() {
  5.     var sfEls = document.getElementById("nav").getElementsByTagName("LI");
  6.     /* Create an array of all <select> tags on the page (could be limited to 
  7.     those within an element with a specific id -- see line above. */
  8.     var selects = document.getElementsByTagName("select"); 
  9.     for (var i=0; i<sfEls.length; i++) {
  10.         sfEls[i].onmouseover=function() {
  11.             this.className+=" sfhover";
  12.             for (var n=0; n<selects.length; n++) {
  13.                 /* Hides <select> tags, which appear above menu in IE */
  14.                 selects[n].className+=" hide_select";
  15.             }
  16.         }
  17.         sfEls[i].onmouseout=function() {
  18.             this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
  19.             for (var n=0; n<selects.length; n++) {
  20.                 /* Makes <select> tags visible again */
  21.                 selects[n].className = selects[n].className.replace(new RegExp(" hide_select\\b"), "");
  22.             }
  23.         }
  24.     }
  25. }
  26.  
  27. /* 
  28.  * NOTE: In order for this snippet to work, you need to add the 
  29.  * following lines (or something similar) to your CSS:
  30.  *
  31.  * select.hide_select {
  32.  *     visibility: hidden;
  33.  * }
  34.  *
  35.  * Using "display: none" may cause other elements to shift as the is 
  36.  * completely removed from the flow of the document. By using
  37.  * "visibility: hidden", the just becomes "invisible."
  38.  */

URL: http://www.htmldog.com/articles/suckerfish/dropdowns/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.