New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:
FF4+ IE8+ Opera9+

Split Menu Buttons v1.2

Author: Dynamic Drive

Note: Updated Oct 3rd, 12' to v1.2: Added option to hide top level menu automatically onMouseout, hide menu when user clicks on a menu item within it.

Description: Split Menu Buttons combine the sleek aesthetics of menu buttons with the versatility of drop down menus to create a navigational interface that captures the best of both worlds. It renders attractive CSS based oval buttons with an optional "toggle" element dynamically added next to it that reveals a drop down menu when interacted with. The drop down menu is simply a regular UL list you define on the page, and can be multi levelled. Sweet!

Demos:

Dynamic Drive Web Design

Web Graphics

Directions Developer's View

Step 1: This script uses two external files. Download them below (right click, and select "Save As"):

Step 2: Insert the following code into the <head> section of your page:

Select All

Step 3:  Add the below sample HTML markup to your page, which shows 3 split menu buttons:

Select All

As you can see inside the code of Step 2, each split menu button consist simply of a regular A element with a CSS class of "splitmenubutton" and "data-showmenu" attribute in its most basic form:

<a href="#" class="splitmenubutton" data-showmenu="dropmenu1">Dynamic Drive</a>

The "data-showmenu" attribute should point to the ID of the UL element on the page that will become the drop down menu for this button:

<ul id="dropmenu1" class="splitdropdown">
<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>

For the UL element, it should carry the CSS class "splitdropdown" for styling purposes. And that's it as far as the basic structure of each split menu button. The UL element if it's nested will automatically turn the menu into a multiple level drop down.

Split Menu Button attributes

When defining a split menu button, you can utilize the following optional "data" attributes to tweak a particular button's look:
 

Attribute Description
data-showmenu

Defaults to undefined

 Associates the menu button with a UL on the page that will act as its drop down menu. Set it to the ID of the UL menu:

<a href="#" class="splitmenubutton" data-showmenu="dropmenu1">Dynamic Drive</a>

<ul id="dropmenu1" class="splitdropdown">
<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>

You can omit the data-showmenu attribute on a menu button if you wish for it to NOT have a drop down menu, yet still be styled identically to its peers, specifically, those with CSS class="splitmenubutton". This enables you to create a group of menu buttons, some with a drop down, and some without, while all looking the same style wise.
data-splitmenu

defaults to "true"

 Boolean string that dictates whether to render "toggler" for this split menu button as a separate element next to the menu button itself, or inside the button itself. In the former case, the script dynamically generates the new toggler element (ie: ). In the later case, the script merely injects a "downarrow" CSS class into the button.

<a href="#" class="splitmenubutton" data-showmenu="dropmenu1" data-splitmenu="false">Dynamic Drive</a>
data-menucolors

Defaults to undefined

 Lets you easily change the default and toggle state colors of a menu button from that of the default values found in splitmenubuttons.css. The syntax should be two color values, separated by a comma. For example:

<a href="#" class="splitmenubutton" data-showmenu="dropmenu1" data-menucolors="a6e60e, green">Dynamic Drive</a>

The first value sets the normal state color of the menu button (plus toggler), and the second, the color when its drop down menu is showing.

Global Menu options

There are also a few other settings you can tweak on a global basis (superseded by each menu's individual "data" attribute settings if defined). They are found in the following line inside splitmenubuttons.js:

var s = $.extend({}, {split:true, triggerevt:'click', hidetoplevelmouseout:true, hidedelay:200, fxduration:100}, options)

For "twiggerevt", set it to "click" if you wish the drop down menu and its sub menus to be revealed onclick instead of the default "mouseover". The "hidetoplevelmouseout" option sets whether the top most drop down menu should automatically hide when the user moves the mouse out of it. The two options that follow set the delay before a drop down menu disappears onmouseout, plus the animation time of the menu, respectively.

Center or right aligning a split menu button

Because of the way each split menu button is constructed, from the addition of an extra "toggle" element to its use of CSS's "inline-block" property, positioning the button beyond the default left aligned requires a little finessing. The key is just to wrap the menu button's markup (the A element) in another DIV first, then align that DIV to achieve the desired effect. Lets see some examples of this in action:

1) Default split menu (no alignment):

<a href="#" class="splitmenubutton" data-showmenu="dropmenu1">Dynamic Drive</a>

2) Center aligned split menu:

<div style="text-align:center"><a href="#" class="splitmenubutton" data-showmenu="dropmenu1">Dynamic Drive</a></div>

1) Right aligned split menu:

<div style="text-align:right"><a href="#" class="splitmenubutton" data-showmenu="dropmenu1">Dynamic Drive</a></div>

1) Right aligned split menu version #2 (by floating the wrapper):

<div style="float:right"><a href="#" class="splitmenubutton" data-showmenu="dropmenu1">Dynamic Drive</a></div>