Split Menu Buttons v1.2
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 DesignWeb Graphics
Step 1: This script uses two external files. Download them below (right click, and select "Save As"):
- splitmenubuttons.js
- splitmenubuttons.css (you can change the down arrow style by changing the hex value "\25be" inside this file, such as with "\21D3" instead).
Step 2: Insert the following code into the <head> section of your page:
Step 3: Add the below sample HTML markup to your page, which shows 3 split menu buttons:
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"> You can omit the |
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>