Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
CSS Layouts
Web Graphics
Online Tools:
Sponsored

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