stu nicholls

exploring the possibilities

Recent Demonstrations

Galleries: 29th October 2013
jQuery Swipe Slideshow
Menus: 28th October 2013
Anywidth Flyout; 27th October 2013
Side menu for tablets etc.
Various: 18th November 2013
jQuery Imagemap :hover; 6th November 2013
jQuery HTML5 Player

Facebook

Professional dropdown #3

20th November 2007

Home
Products
- Cameras
- Cameras
  - Nikon
  - Minolta
  - Pentax
- Lenses
  - Wide Angle
  - Standard
  - Mirror
  - Telephoto
  - Zoom
  - 35mm to 125mm
  - 50mm to 250mm
  - 125mm to 500mm
  - Non standard
  - Bayonet mount
  - Screw mount
- Accessories
- Flash Guns
- Tripods
- Filters
Services
Contacts
- Support
- Sales
  - European
  - British
    - City
    - London
    - Liverpool
    - Glasgow
    - Bristol
      - District
      - Redland
      - Hanham
      - Eastville
    - Cardiff
    - Belfast
  - French
  - German
  - Spanish
  - Worldwide
  - USA
  - Canadian
  - South American
  - Australian
  - Asian
- Buying
- Photographers
- Stockist
- General
Shop
Privacy Policy

Next Demonstration

Previous Demonstration

Information

The third menu in this series using my javascript routine to write the IE5.5 and IE6 specific styles for us and monitor the mouse hover states.

This menu takes menu 2 a stage further and allows the use of non-linking titles and line breaks in the sub menu lists to separate the sub menus into distinct sections.

This menu also styles the path taken through the menu so that it works in IE5.x and IE6 as well as IE7 and all other browsers.

The javascript

/* Credits: Stu Nicholls */
/* URL: http://www.stunicholls.com/menu/pro_dropdown_3/stuHover.js */

stuHover = function() {
        var cssRule;
        var newSelector;
        for (var i = 0; i < document.styleSheets.length; i++)
                for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
                        {
                        cssRule = document.styleSheets[i].rules[x];
                        if (cssRule.selectorText.indexOf("LI:hover") >= 0)
                        {
                                 newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
                                document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
                        }
                }
        var getElm = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<getElm.length; i++) {
                getElm[i].onmouseover=function() {
                        this.className+=" iehover";
                }
                getElm[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" iehover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", stuHover);

Tested in IE6, IE7, Firefox, Opera, Netscape, Mozilla, Safari (PC) and Safari (iPod Touch).

Download

All the files, except the photograph which is copyrighted, can be downloaded using the link below. If you are going to use this in your website then please respect my copyright and keep the credits in the stylesheets and javascript.

Download pro_dropdown_3.zip