jQuery Icon Menu
As designers and developers, we are continually challenged with ways to display large amounts information. In this age of content, the amount of information to display can easily lead to clutter if you aren’t careful.
In a previous post, I described how to make an accordion menu using jQuery UI and Wordpress without a plugin. Today we’ll look at another helpful design pattern in the form of an icon menu and produce the effect in about 20 lines of jQuery.
What is an Icon Menu
Welie.com defines an icon menu as a design pattern that allows “users to select a menu item by selecting an image and display the label in a fixed location.” This is another useful tool to display information in a compact space since the labels are usually not shown by default. The image below is probably my favorite use of an icon menu that I’ve seen in the wild.
We’ll use jQuery and the ScrollTo jQuery plugin to write code that does the following:
- Degrades gracefully when JavaScript is disabled.
- Open one icon item assigned at random.
- Only one icon can be opened at a time.
- Scroll to the open item and distinguish it from the others.
Structure the Markup
Since this project involves manipulating HTML based on user interaction, I craft my HTML before I even start to think about the JavaScript. The key is that we have each menu item is its own list item, and each list item contains a <div> for the icons and another one for the details.
Style with CSS
Once the HTML is in place, I begin working on the CSS. This needs to look nice with JavaScript turned off, and CSS is the crucial step to pulling that off.
Make the Icon Menu Interactive with jQuery
Now, we just need to bring it all together with jQuery so only one item is expanded at a time and the items scroll on-click thanks the the ScrollTo plugin.
Conclusion
With about 20 lines of JavaScript, we can put the icon menu to use. We’ve only scratched the surface with what the icon menu can do in a very simple, isolated instance.