User

Recommend this pageIf this page was useful to you, please recommend it to fellow websurfers:

Home > Scripts > Site Navigation, UI, Forms > Menus

Rating
0 vote You may rate this script by simply clicking on the appropriate star (5 stars is the best rating).
Language
	JavaScript
	CSS
License

Website Download

Split Drop Down Menu

Using a combination of CSS2 selectors, pseudo classes, CSS3 transitions, plus a tough of JavaScript, we arrive at a CSS based split menu button, even sans images! The menu toggler to the right of the button is dynamically generated using CSS2 generated content, with an invisible element overlaid on top so it responds to the “:checked” state (which thanks to sibling selectors can in turn affect elements next to the checkbox). JavaScript here is used simply to dynamically toggle the HTML checkbox’s state in a more comprehensive manner, with that state triggering either the display or hiding of the corresponding drop down menu. The result is a extremely lean, primarily CSS powered drop down menu!

The menu works in IE9+ and all modern versions of FF, Chrome, Safari, and Opera. In IE8 the split menu portion is completely hidden, using IE conditional comments.

Comments

Webmaster’s Rating

Tested & Working

This label indicates that I could install the script without major problems and I could run the script without the need for major modifications to the original code (except for the usual configuration, of course). The label does, on the other hand, not indicate that scripts without this label would not work properly. The missing of the „tested & working“-label just indicates that I did not yet test these scripts.

Webmaster’s Choice

This label indicates that the owner of this website uses this script / application for his own projects with success and satisfaction. This does, however, not indicate that these projects could not have been realized using other scripts / applications as well or that other scripts would not fit the demands of other projects as well or even better.