DD Icon Menu
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)
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:
Step 3: Add the below sample icon menu code to the BODY section of your page:
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:
- First, define a UL list that will act as the main icon menu (with an
unique ID and
class="iconmenu"
). - Define a series of DIV containers on the page to act as sub menus for the main icon menu (and potentially nested sub menus).
- 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 :
- 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.
- 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, setrel="[title]
", plus define atitle
attribute as well. - title="description": If you have
rel="[title]"
defined above, you must also define atitle
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:
The difference in some of the easing options are subtle, though " |
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;
}