Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web 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+):

The CSS:

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:

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> 

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.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.