Pure CSS Slide-In Menu Tutorial
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!
Need help adding this or other code to your website? Post it here in the forum!