Creating Accordion Menus
One way to choose a framework is to pick a common thing you want to add to a site, and then see how much that framework helps you to accomplish that task. Here, we want an accordion menu—a type of menu where, when one section is opened, any others automatically close. Similar to a tabbed interface, it’s a common design element.
To create accordion menus:
1. | <link type="text/css" rel="stylesheet" href="jquery/theme/flora/flora.accordion.css" /> <link type="text/css" rel="stylesheet" href="script02.css" /> Script 16.3 needs two CSS files: one provided by jQuery (using one of its built-in themes, Flora) and ours (script02.css, seen in Script 16.4) that adds on the little bit of CSS needed to make things look just the way we want. Script 16.3. The links in this outline will, via jQuery, be seen in a browser as an accordion menu.
| |
2. | <script type="text/javascript" src="jquery/ui.core.js"></script> <script type="text/javascript" src="jquery/ui.accordion.js"></script> <script type="text/javascript" src="script02.js"></script> Both Script 16.1 and this script need jquery.js, as it’s required. But while Script 16.1 needed effects.core.js and effects.highlight.js, this script needs ui.core.js and ui.accordion.js. Here’s where we bring them in, along with script02.js, as seen in Script 16.5, below. | |
3. | $(document).ready(function() {As before, if we want something to run when the page loads, it needs to be inside this function. | |
4. | $("#theMenu").accordion({In Script 16.3, our menu is structured as an outline, using unordered list items as the contents of each menu. Here’s an example of the simplicity of jQuery: all Script 16.5 needs to do is take the id from the top-level ul (in this case, theMenu) and then apply the built-in accordion() method to it. | |
5. | alwaysOpen: false, active: false, autoHeight: false, animated: false, header: ".menuLink" |
Script 16.4. While we’ve done similar menus previously, using jQuery means a lot less CSS.
#theMenu { width: 230px; }
ul li ul {
margin-left: 10px;
padding-right: 10px;
background-color: #A0DF82;
list-style-type: none;
} |
Script 16.5. And with jQuery, it needs even less JavaScript.
$(document).ready(function() { $("#theMenu").accordion({ alwaysOpen: false, active: false, autoHeight: false, animated: false, header: ".menuLink" }); }); |
We need to set a few options, and that’s done right inside accordion(). They are:
alwaysOpen: should the accordion always have an option open? If not, our initial state looks like Figure 16.4.
Figure 16.4. The accordion menu first loads, just the way we want it to: with all options closed.
active: if the accordion should always have an option open, set this to the class of the option that should be open when the page loads.
autoHeight: forces the accordion area to always have a fixed height (based on the largest area needed).
animated: if you want menu items to display with an animated effect, set this to the name of the desired effect (e.g., "slide", "easeslide").
header: how jQuery can identify the headers for each menu. Here, they all have the class "menuLink", and clicking on one of the headers gives a page that looks like Figure 16.5.
Figure 16.5. Clicking on a menu header opens the new sub-menu (and closes any other that might already be open).
✓ Tips
There are additional options for accordion() besides the ones above—those are only where we wanted to override the default. If we’d wanted the accordion to open when the user hovered the mouse over a menu label (versus only when the user clicks a menu label), all we’d do is add this to the last step:
event: "mouseover"
Don’t like the Flora theme, and don’t want to design your own? Check out the ThemeRoller at http://ui.jquery.com/themeroller, where there are several others available for download. Still not quite satisfied? Select the theme that’s closest to what you want, then click the “Roll Your Own” tab. From there, you can choose colors, fonts, textures, and more, and then download the resulting theme.