Fix for 'menu under select' issue in IE


/ Published in: JavaScript

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.


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.