How to Define a Specialized CSS3 Menu
Split button menus offer one way to give your CSS3 site a special look. The split button tells viewers that the default menu selection is what they see at the moment, but that other selections are available. Simply clicking the split button takes the viewer to the default site.
However, clicking the down arrow next to the button shows the other options and the viewer can easily select any of them as an alternative to a default.
This type of menu isn’t limited to just directing people to other locations. It can also act as a kind of input field for a form. The button shows the default selection for that field. However, you can also choose one of the alternatives if they work better. The point is that split button menus provide a specialized approach to menu development.
The example in this article relies on the Split Menu Buttons v1.2 example shown at Dynamic Drive. The following steps get you started using this specialized menu and offer suggestions on modifications you might want to make to it.
Download the splitmenubuttons.js file found in the Step 1 section of the Dynamic Drive page, and then place it in the folder you want to use for your test page.
Download the splitmenubuttons.css file found in the Step 1 section of the Dynamic Drive page, and then place it in the folder you want to use for your test page.
Create a new HTML 5 page using your favorite text editor or IDE, and then save it as SplitButton.HTML.
Change the <title> tag as shown here:
<title>An Example of Using a Split Button Menu</title>
Click Select All in the Step 2 portion of the Dynamic Drive page.
You see the header code for the example highlighted.
Copy the highlighted text to the clipboard, and then paste it within the <head> section of the example page.
The editor adds the code to the <head> section. If you look carefully at this code, you find a link to splitmenubuttons.css and a script reference to splitmenubuttons.js. This example also relies on jQuery, so you find a script reference to jquery.min.js.
The code also includes a script for creating the split buttons that uses jQuery syntax. You won’t need to modify this script as long as you follow a few simple rules in creating your menu. The steps that follow discuss these rules.
Create links for each of the top menu entries in the <body> section of the page as follows:
<a href="SplitButton.HTML" class="splitmenubutton" data-showmenu="Home" data-splitmenu="false" data-menucolors="Brick,Brick">Home</a> <a href="Products.HTML" class="splitmenubutton" data-showmenu="Products" data-splitmenu="false" data-menucolors="Indigo,Red">Products</a> <a href="About.HTML" class="splitmenubutton" data-showmenu="About" data-menucolors="Indigo,Red">About</a>
Each of these entries is a top-level menu button for the page. When the user displays the page, it shows Home, Products, and About as three buttons. Each of the buttons will go to a specific location when clicked. However, you can substitute # for the href attribute if you don’t want a button to do anything when clicked.
The class must appear as splitmenubutton in every case. You can find the CSS for this class in the splitmenubuttons.css file.
The data-showmenu attribute defines which submenu to use. You must define a name, even if you don’t intend to use a submenu with a particular button. In this example, the Home button won’t include any submenus.
The data-splitmenu attribute specifies whether a button should show the down arrow as part of the button or as a separate button. This example shows both cases. The default setting is true, which means the arrow appears as a separate button.
You use the data-menucolors attribute to specify the colors used for the default background color and the selected color. The default color is DarkRed, but most developers will want to override the defaults to obtain a specific look.
Create a submenu for the Products menu, using the following code:
<ul id="Products" class="splitdropdown"> <li><a href="Products.HTML">Product 1</a></li> <li><a href="Products.HTML">Product 2</a></li> <li><a href="Products.HTML">Product 3</a></li> <li><a href="Products.HTML">Product 4</a></li> <li><a href="Products.HTML">Product 5</a></li> </ul>
A submenu is simply an unordered list. Each of the list items contains an anchor that points to the location you want the viewer to go. The unordered list must have an id attribute value that matches the data-showmenu attribute value. In addition, the first level of unordered lists in a submenu must use the splitdropdown class.
Create a submenu for the About menu, using the following code:
<ul id="About" class="splitdropdown"> <li><a href="About.HTML">Our History</a></li> <li class="separator"> <a href="About.HTML">Privacy Statement</a> </li> <li><a href="#">Contact Us</a> <ul> <li><a href="About.HTML">By Telephone</a></li> <li><a href="About.HTML">By Mail</a></li> <li><a href="#">By E-mail</a> <ul> <li><a href="About.HTML">webmaster</a></li> <li><a href="About.HTML">Support</a></li> </ul> </li> </ul> </li> </ul>
This menu is a little more complex. If you want to create submenus of your submenus, simply place the corresponding unordered list within the list item as shown. The Contact us submenu actually contains three levels of menu options.
Add the class="separator" attribute when you want to add a little extra space between menu items. Using this attribute makes it possible for users to see relations between menu items with greater ease.
Save the modified SplitButton.HTML and load it in your browser.
You see the simple output.
Notice, that the Home button appears like any other button, but it lacks a down arrow because it doesn’t have an associated menu. Clicking this button will take you to the home page.
As with any CSS-based menu, you can make a number of changes to the appearance of these menus. For example, it’s possible to change the arrows to something other than the simple triangle shown.