New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


FF1+ IE6+ Opera8+

DD Icon Menu

Author: Dynamic Drive

Description: Icons based menus, with their small initial footprint on the page, is becoming quite popular these days, thanks to the rise of small viewing devices such as smart phones and tablets. DD Icon Menu creates an icon based vertical menu that sits fixed on the left edge of the browser window and expands to show sub menus onMouseover.  Infinite levels of sub menus can be associated with each icon (though you probably want to curtail that number), with each sub menu simply defined as a hidden DIV on the page. Easy to implement, desktop and mobile browsers friendly to boot!

Demo (left edge of page)

Visit the following main content areas of Dynamic Drive:

Visit the following main content areas of Dynamic Drive:


Directions Developer's View

Step 1: This script accesses the following external files which you need to upload to your server. Download them below (right click, and select "Save As"):

** The icons used in the main menu are hosted icon fonts from Font Awesome. More on that below.

Step 2: Insert the following code into the <head> section of your page:

Select All

Step 3:  Add the below sample icon menu code to the BODY section of your page:

Select All

Well, that's it for installation. Read on for more details on setting up DD Icon Menu.

Set Up Information

Setting up DD Icon Menu is a straightforward three step process:

  1. First, define a UL list that will act as the main icon menu (with an unique ID and class="iconmenu").
  2. Define a series of DIV containers on the page to act as sub menus for the main icon menu (and potentially nested sub menus).
  3. Call ddiconmenu.docinit() to tie the two together

1) Define the main Icon Menu UL

The first thing to do is to define the main Icon Menu that contains a series of icons:

<ul id="myiconmenu" class="iconmenu">
<li><a class="icon-list-ul" href="#" rel="csslibrary"></a></li>
<li><a class="icon-search" href="#" rel="ddcontentarea"></a></li>
<li><a class="icon-gears" href="#" rel="webtools"></a></li>
<li><a class="icon-rss" href="#" rel="[title]" title="RSS"></a></li>
<li><a class="icon-twitter" href="#" rel="[title]" title="Twitter"></a></li>
</ul>

The main UL element should carry an arbitrary but unique ID (ie: myiconmenu), plus a CSS class of "iconmenu". Inside each A element of the menu, the following 3 attributes may be defined depending on the desired icon style and behaviour :

  1. class="icon-name": Define a CSS class to determine which icon font to show for this icon link. We're using the collection of hosted icon fonts from Font Awesome; to pick an icon to display, navigate to this page, and use the corresponding class name of the desired icon.
  2. rel="submenuid|[title]": If you wish this icon to display a sub menu, define a rel attribute and set its value to the ID of the sub menu DIV defined on the page (see (2) below). If you wish to simply display a tooltip, set rel="[title]", plus define a title attribute as well.
  3. title="description": If  you have rel="[title]" defined above, you must also define a title attribute to indicate the tooltip contents to show.

Take a look at the markup for the following two icons, one that displays the sub menu "webtools", and the other, just a tooltip based on its title attribute:

<li><a class="icon-gears" href="#" rel="webtools"></a></li>
<li><a class="icon-rss" href="http://url_to_rss_feed" rel="[title]" title="RSS"></a></li>

In the second icon that only shows a tooltip onMouseover versus a sub menu, you'll probably want to populate its href attribute to point to an active link.

2) Define each sub menu

The next step is to define each sub menu of the Icon Menu . This should just be a DIV with an ID attribute set to the same value as that referenced by the rel attribute of its corresponding icon above. It should carry a CSS class of "iconsubmenu" so the content is initially hidden and properly positioned (based on the rules defined inside iconmenu.css):

<div id="csslibrary" class="iconsubmenu someextraclass">
Sub menu contents here...
Sub menu contents here..
</div>

This sub menu will be shown when the user mouses over the icon in (1) above carrying the attribute rel="csslibrary". Note that I've also assigned CSS classes to the sub menu DIV- it should at least carry the "iconsubmenu" class, with any additional custom class added to further customize its look based on the type of sub menu desired. If you look inside iconmenu.css, you'll see the sub menu class names "dropdownmenu", "mixedcontent", and "icontooltip" which you can optionally assign to your sub menu DIV to style it in a certain manner.

Creating nested sub menus

Inside a sub menu, you can embed new anchor links that in turn display another sub menu onMouseover. The process is exactly the same as you've already seen, which is to first define a link inside the sub menu with a rel attribute pointing to the ID of the "sub sub" menu, then define the "sub sub" menu DIV itself. The following adds an anchor link inside the sub menu "csslibrary" above so another sub menu appears inside it when the mouse rolls over a link:

<div id="csslibrary" class="iconsubmenu mixedcontent">
Sub menu contents here...
Sub menu contents here...
Sub menu contents here...
<a href="#" rel="cssbuttons">Mouse over me</a>
</div>

<div id="cssbuttons" class="iconsubmenu dropdownmenu">
<ul class="ulmenu">
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a></li>
<li><a href="http://tools.dynamicdrive.com/animatedgif/">Animated Gif Generator</a></li>
<li><a href="http://www.dynamicdrive.com/emailriddler/">Email Riddler</a></li>
</ul>
</div>

Here we have "csslibrary" containing an anchor link with a rel attribute, which tells the script that this link is an anchor link. Its rel attribute points to the sub sub menu "cssbuttons", completing the association.

One important thing to note is that just because "cssbuttons" is technically a sub sub menu shown only inside "csslibrary", its markup is still defined at the document root (BODY) level. All sub menus regardless of their association should be defined at the BODY level  of your page.

3) Call ddiconmenu.docinit() to tie the two together

With both the main icon menu and any corresponding sub menus set up, what's left to do is to call the script to tie the two together. The syntax for this function is:

ddiconmenu.docinit({
 //settings here
})

Where settings is a list of settings, each separated by a comma. This function should be called in the HEAD section of your page, for example:

<script>

ddiconmenu.docinit({ // initialize an Icon Menu
 menuid:'myiconmenu', //main menu ID
 easing:"easeInOutCirc",
 dur:500 //<--no comma after last setting
})

</script>

The only required setting is "menuid", or the ID of your main icon menu. The following describes each of the settings in more detail:

ddiconmenu.docinit() settings

setting/ option Description
menuid

Required

Specifies the ID of the outermost container of the icon menu.
easing

Defaults to "easeInOutSine"

The type of slide-in easing effect that should be applied to this instance of Icon Menu when revealing its sub menus. There are four string values to choose from:
  • "easeInOutSine"
  • "easeInOutCirc"
  • "easeInQuad"
  • "easeOutBack"

The difference in some of the easing options are subtle, though "easeOutBack" is dramatically different in that it produces a "bounce in" effect.

trigger How the Menu should be triggered. The default is "mouseover", or when the mouse rolls over an icon or anchor link. Supported values are: "mouseover" and "click".
dur

Defaults to 500 (milliseconds)

Sets the duration of the slide-in effect in milliseconds. Defaults to 500, or 0.5 seconds.
hidedelay

Defaults to 200 (milliseconds)

Sets the pause in milliseconds after a mouse has moved out of an icon or parent container before its corresponding sub menu  disappears. Defaults to 200.

Styling DD Icon Menu

Inside iconmenu.css is where you'll be editing to customize the look of DD Icon Menu. The class ul.iconmenu  targets the main icon menu:

ul.iconmenu{
font-size: 1em;
list-style: none;
position: fixed;
left: 0;
top: 100px; /* offset from top of page to display icon menu */
margin: 0;
padding: 0;
width: 2em;
background: #eee;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 3px 1px 3px rgba(0,0,0,0.4);
}

ul.iconmenu li{
"
"

For the sub menus, the shared class div.iconsubmenu applies some essential styles to them, such as setting their visibility to hidden and position to absolute:

div.iconsubmenu{
width:300px; /*default width of each icon sub menu*/
position:absolute;
visibility:hidden;
padding:0;
background: #F4F4F4;
-webkit-box-shadow: 5px 5px 5px #c8c8c8; /*css 3 shadows*/
-moz-box-shadow: 5px 5px 5px #c8c8c8;
box-shadow: 5px 5px 5px #c8c8c8;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Then, supplementary classes are defined to help you refine the look of a sub menu based on its type: div.mixedcontent for general content container, div.dropdownmenu for vertical UL menus, and div.icontooltip for tooltips. Take a look inside iconmenu.css for details.

Styling the selected link anchor

When an icon or link within a sub menu that also contains a sub menu is selected (while the mouse is over it), a CSS class of ".selected" gets added to that element while its sub menu is shown. This lets you easily style the currently selected anchor to differentiate it from its peers. By default inside iconmenu.css, the style for the selected icon is defined as such:

ul.iconmenu li a:hover, ul.iconmenu li a.selected{ /* style for selected icon */
background: #D2FFFF;
}

while for the selected menu item inside a drop down menu, it's:

div.dropdownmenu ul a:hover, div.dropdownmenu ul a.selected{ /* style for selected menu item */
background: lightyellow;
}