CSS Codes
CSS Layouts

<!DOCTYPE HTML>

<head>

<link rel="stylesheet" type="text/css" href="iconmenu.css" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="iconmenu.js">

/***********************************************
* DD Icon Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script>

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


</script>
</head>

<body>

<!-- Main Icon Menu -->

<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" title="Web Tools"></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>





















<!- CSS Library sub menu -->

<div id="csslibrary" class="iconsubmenu dropdownmenu">
<ul class="ulmenu">
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/" rel="webtools">Web Tools</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C17/">CSS3 demos</a></li>
</ul>
</div>



<!- General Content sub menu -->

<div id="ddcontentarea" class="iconsubmenu mixedcontent">

<p style="margin:5px 0 10px 0"><b>Visit the following main content areas of Dynamic Drive:</b></p>

<div class="column">
<ul>
<li><a href="http://www.dynamicdrive.com">DHTML Scripts</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">What's New</a></li>
<li><a href="http://www.dynamicdrive.com/revised.htm">Revised</a></li>
</ul>
</div>
<div class="column">
<ul>
<li><a href="http://www.dynamicdrive.com/style/" rel="csslibrary">CSS Library</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">DHTML Forums</a></li>
<li><a href="http://tools.dynamicdrive.com" rel="webtools">Web Tools</a></li>
</ul>
</div>

</div>




<!- Web Tools sub menu -->

<div id="webtools" 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>
<li><a href="http://tools.dynamicdrive.com/password/">.htaccess Password Generator</a></li>
<li><a href="http://tools.dynamicdrive.com/gradient/">Gradient Image Maker</a></li>
<li><a href="http://tools.dynamicdrive.com/userban/">.htaccess Banning Generator</a></li>
<li><a href="http://tools.dynamicdrive.com/button/">Button Maker</a></li>
<li><a href="http://tools.dynamicdrive.com/ribbon/">Ribbon Rules Generator</a></li>
</ul>
</div>

</body>
</html>