Pure CSS Slide-In Menu Tutorial
Test it - turn JS off - see how it still works perfect? Your looking at the first menu of it's kind! The first Pure CSS Slide-In Menu (JS enhanced)! The JavaScript just slides it in and out smoothly. Note, how it's position fixed as well (IE6 too, with no jumping), staying with you where ever you go. Boo-Ya Baby! And I'd like to give a special thanks to Paul O'B, for helping me add the JS animation to it.
Some pretty nice Slide-In Menus have been done before. Dynamic Drive has a couple, and Andrew Sellick made a nice one using Mootools or jQuery. However, by their own admission, they all rely heavily on JavaScript in order to function. That pretty much makes them completely useless for use as a main navigation menu (for the prudent developer at least!). So I thought it would be cool to build one who's basic funtionality did NOT rely on JavaScript to function. After all - that's what JS "should" be used for - the icing on the cake!
Note: As is, the JS Enhanced versions below are using display:none/display:block for the hide/show hover effect (in the CSS and the JS). In order to use left:-999em/left:0 for the hide/show hover effect instead (like the pure CSS version below), you'll have to also add your specific values to the script as well. In the showMenu: function, you add them directly under this line like so: el.style.clip = 'rect(' + el.clippingRectangle.join('px ') + 'px)'; el.style.display = 'block'; el.style.left = '0'; el.style.top = '-1px'; That's it - just view the source code in the examples below for clarity. So, without further adeu, I present to you, The Pure CSS Slide-In Menu!
