stunicholls.com

...exploring the possibilities

Professional pull up menu #1

6th November 2007

photographer

© 2007 stunicholls.com

Information

Similar in style to the professional dropdown menu #1, this one goes the other way.

Hovering over the top level links will cause the sub menu items to pull up instead of drop down. It also includes my newly found method of allowing the sub menus to find their own width based on the link lengths and has the flyout levels next to the list item from which they flyout. This way you do not have to travel along the width of the sub menu to get to each flyout.

This uses my stuHover.js script to write the IE5.x and IE6 stylesheet extras for us and the li.iehover class as necessary. I have hidden this script from IE7, as it works without it, using conditional comments around the javascript loader in the page head. It will function correctly using this script but it is a little slower to respond.

Tested in IE6, IE7, Firefox, Opera, Safari (PC) and Safari (iPod Touch). Mozilla and Netscape in Firefox mode have a small problem with this one, as does the latest alpha release of Opera.

As with previous menus the path through the sub lists will not be highlighted in IE5.x and IE6 as these browsers do not recognise the child selector '>'.

Download

All the files 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_pullup_1.zip