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.
- 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
<div> for the icons and another one for the details.
Style with CSS
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.