Dynamic Drive CSS Library- Split Drop Down Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: CSS3 demos: Here

Split Drop Down Menu

Author: Dynamic Drive

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 <input type="checkbox"> 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.

Demo (best viewed in (IE9+, FF4+, Chrome/Safari, and Opera 10+):

Dynamic Drive

JavaScript Kit

CSS Drive

The CSS:

<link rel="stylesheet" href="css3splitmenu.css" />

<!--[if lte IE 8]>

<style>

/* Hide split menu from IE8 and below */

div.css3splitmenu {
		margin-right: 5px;
		}

div.css3splitmenu > a:after {
		display: none;
		}

div.css3splitmenu > input {
		display: none;
		}

div.css3splitmenu > ul {
		display: none;
		}

</style>

<![endif]-->

The code above references a linked CSS file, which you should download below:

css3splitmenu.css (depending on where you save this file, change the path to it inside the code above accordingly).

The HTML:

<div class="css3splitmenu">
<a href="http://www.dynamicdrive.com">Dynamic Drive</a> <input type="checkbox" />

<ul id="t">
<li><a href="http://www.dynamicdrive.com/new.htm">What's New</a></li>
<li><a href="http://www.dynamicdrive.com/revised.htm">Revised</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">DD Forums</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/gradient/">Gradient Image Maker</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a></li>
</ul>
</div>  

<div class="css3splitmenu">
<a href="http://www.javascriptkit.com">JavaScript Kit</a> <input type="checkbox" />

<ul>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com/">JS Tutorials</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JS Reference</a></li>
<li><a href="http://www.javascriptkit.com/howto/">Web Design Tutorials</a></li>
</ul>
</div>  

<div class="css3splitmenu nocss3splitmenu">
<a href="http://www.cssdrive.com">CSS Drive</a>
</div>


<!-- Script below should follow all split menus -->

<script type="text/javascript">

( function(){ // local scope

	if (!document.querySelectorAll || !document.addEventListener)
		return
	var uls = document.querySelectorAll('div.css3splitmenu > ul'),
			docbody = document.documentElement || document.body,
			checkboxes = document.querySelectorAll('div.css3splitmenu > input[type="checkbox"]'),
			zindexvalue = 100

	for (var i=0; i<uls.length; i++){
		( function(x){ // closure to capture each i value
			checkboxes<i>.addEventListener('click', function(e){
				uls[x].style.zIndex = ++zindexvalue
				for (var y=0; y<uls.length; y++){ // loop through checkboxes other than current and uncheck them (since Chrome doesn't respond to onblur event on checkboxes)
					if (y != x)
						checkboxes[y].checked = false
				}
				e.cancelBubble = true
			})
			checkboxes<i>.addEventListener('blur', function(e){
				setTimeout(function(), 100) // delay before menu closes, for Opera's sake (otherwise links are un-navigatable)
				e.cancelBubble = true
			})
		}) (i)
	}

	docbody.addEventListener('click', function(e){
		for (var i=0; i<uls.length; i++){
			checkboxes<i>.checked = false
		}
	})

})();


</script>

To define a split menu, simply create a DIV tag with class="css3splitmenu", and add the following 3 elements inside it:

<div class="css3splitmenu">
<a href="http://www.javascriptkit.com">JavaScript Kit</a> <input type="checkbox" />

<ul>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com/">JS Tutorials</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JS Reference</a></li>
<li><a href="http://www.javascriptkit.com/howto/">Web Design Tutorials</a></li>
</ul>
</div>

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.

Code Info

Rate this code:

Date Posted: 03/05/2013

Revision History: None

Usage Terms: Click here

Your Comments (0)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Commenting is not available in this weblog entry.