Split Drop Down Menu
Author: Dynamic Drive
<input type="checkbox"> element overlaid on top so it responds to the "
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.
Demo (best viewed in (IE9+, FF4+, Chrome/Safari, and Opera 10+):
To define a split menu, simply create a DIV tag with
class="css3splitmenu", and add the following 3 elements inside it:
- The code in blue should be a regular link that is the button itself.
- The code in green is the checkbox used to trigger the drop down menu, and should always be defined exactly as is.
- The code in brown should be a regular UL list that will act as the drop down menu.
To define a button that does *not* carry a split menu yet still inherits the same style as a button that does, simply define the following instead:
<div class="css3splitmenu nocss3splitmenu"> <a href="http://www.cssdrive.com">CSS Drive</a> </div>
As you can see, it's the same basic code as a split menu button, but stripped of the later two components; notice also the "nocss3splitmenu" class added to the outer DIV itself.