• How To Add a Multi Level CSS Dropdown Menu


    1. Installing the menu

    See Demo 

    1. Login to your Blogger account.
    2. Go to Design > Page Elements.
    3. Click Add A Gadget.
    4. In Add A Gadget window, select HTML/Javascript .
    5. Copy the code below and paste it inside the content box. 
    <!-- Dropdown menu Start -->
    <div id="menu">
    <ul class="level1">
    <li class="level1-li"><a class="level1-a" href="#url">Home</a></li>
    <li class="level1-li"><a class="level1-a fly" href="#url">Contact Us<!--[if gte IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="level2">
    <li><a href="#url">Email</a></li>
    <li><a href="#url">Telephone</a></li>
    <li><a href="#url">Online Form</a></li>
    <li><a href="#url">Snail Mail Address</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    <li class="level1-li"><a class="level1-a fly" href="#url">Resort<!--[if gte IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="level2">
    <li><a href="#url">Ski Hire Facilities</a></li>
    <li><a class="fly" href="#url">Main Ski Slopes<!--[if gte IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="level3">
    <li><a href="#url">Beginners Slopes</a></li>
    <li><a href="#url">Intermediate Slopes</a></li>
    <li><a class="fly" href="#url">Advanced Skill Levels<!--[if gte IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="level4">
    <li><a href="#url">Local</a></li>
    <li><a href="#url">Nearby</a></li>
    <li><a href="#url">With instructor</a></li>
    <li><a href="#url">Snow boarding</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    <li><a href="#url">Expert</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    <li><a href="#url">Night Life</a></li>
    <li><a class="fly" href="#url">Restaurants<!--[if gte IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="level3">
    <li><a href="#url">Snow Hotel</a></li>
    <li><a href="#url">The Snowman</a></li>
    <li><a href="#url">Ice Cavern</a></li>
    <li><a href="#url">Ski Inn</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    <li><a class="fly" href="#url">Car Hire<!--[if gte IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="level3">
    <li><a href="#url">From Airport</a></li>
    <li><a href="#url">In Resort</a></li>
    <li><a href="#url">Multiple Resorts</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    <li class="level1-li"><a class="level1-a fly" href="#url">Surrounding Area<!--[if gte IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="level2">
    <li><a href="#url">Where to go</a></li>
    <li><a href="#url">What to do</a></li>
    <li><a href="#url">Places of interest</a></li>
    <li><a href="#url">National parks &amp; Museums</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    <li class="level1-li left"><a class="level1-a fly" href="#url">Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="level2">
    <li><a href="#url">Money Exchange</a></li>
    <li><a class="fly" href="#url">Resort Essential Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="level3">
    <li><a href="#url">Lift Passes</a></li>
    <li><a href="#url">Insurance</a></li>
    <li><a class="fly" href="#url">Gear Rental<!--[if gte IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="level4">
    <li><a href="#url">Boots</a></li>
    <li><a href="#url">Skis</a></li>
    <li><a href="#url">Ski Wear</a></li>
    <li><a href="#url">Goggles</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    <li><a href="#url">Ski Schools</a></li>
    <li><a href="#url">Snow Report</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    <li><a class="fly" href="#url">Language<!--[if gte IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="level3">
    <li><a href="#url">Austrian</a></li>
    <li><a href="#url">German</a></li>
    <li><a href="#url">French</a></li>
    <li><a href="#url">English</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    <li><a href="#url">Short Breaks</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    <li class="level1-li"><a class="level1-a" href="#url">Privacy</a></li>
    </ul>
    </div>
    <!-- BloggerSentral.com -->
    <!-- Dropdown menu End -->
     
    Click Save. 
     

    2. Renaming the tabs and adding the links

    As you can see, the dropdown menu HTML is mainly consisted of unordered lists (ul) and list items (li).
    • Unordered lists form the top level menu bar and dropdown columns. It starts with <ul> and ends with </ul>.
    • List items form the top level tabs and tabs in each dropdown columns. It starts with <li> and ends with </li>.
    Below is a code snippet for one of the tabs.
    <li><a href="#url">Telephone</a></li>
    To rename the tab, simply replace Telephone with your own text. As for the link, just replace  #url with the tab’s intended URL.

    3. Styling the dropdown menu

    Copy the CSS code below and paste it  right before ]]></b:skin> line in your template.
    /* ================================================================ 
    This copyright notice must be kept untouched in the stylesheet at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/anywidth2.html
    Copyright (c) 2005-2009 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements.
    =================================================================== */
    #menu {width:740px; background: #3aa3d3; height:25px;; text-align:center; position:relative; z-index:20;}
    #menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}
    #menu ul {display:inline-block;}
    #menu li {margin:0; padding:0; list-style:none;}
    #menu li {clear:both;float:none;}
    #menu ul ul {position:absolute; left:-9999px;}
    #menu ul.level1 {margin:0 auto;}
    #menu ul.level1 li.level1-li {float:left; display:block; position:relative;clear:none;}
    #menu ul.level1 {background:#3aa3d3;}
    #menu ul.level2 {background:#ae4621;}
    #menu ul.level3 {background:#c98b14;}
    #menu ul.level4 {background:#9f690e;}
    #menu b {position:absolute;} /* -- for IE6 non-flyout dropdowns to stop flickering - who knows why --*/
    #menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#fff; line-height:25px; text-decoration:none;padding:0 15px 0 15px;outline:none;}
    #menu ul.level1 li.level1-li a.level1-a {float:left;}
    #menu ul li:hover > ul {visibility:visible; left:0; top:25px;}
    #menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-25px;}
    #menu li.left:hover > ul {visibility:visible; left:auto; right:0; top:25px;}
    #menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-25px;}
    #menu a:hover ul {left:0; top:23px;}
    #menu li.left a:hover ul {left:auto; right:-1px; top:23px;}
    #menu li.left ul a {text-align:right; padding:0 15px 0 15px;}
    #menu a:hover a:hover ul,
    #menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}
    #menu li.left a:hover a:hover ul,
    #menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;}
    #menu a:hover ul ul,
    #menu a:hover a:hover ul ul {left:-9999px;}
    #menu li.left a:hover ul ul,
    #menu li.left a:hover a:hover ul ul {left:-9999px;}
    #menu li a.fly {font-variant: small-caps;}
    #menu li.left ul a.fly {font-variant: small-caps;}
    #menu li a:hover,
    #menu li a.fly:hover {background-color:#555555;}
    #menu li:hover > a,
    #menu ul li:hover > a.fly {background-color:#555555;}
    #menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; margin-top:-4px;}
    #menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}
    #menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;}
    #menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}
    #menu ul, .tabs-outer {overflow:visible;}
    #menu li a {border: none;}
    .main-outer {z-index:10;}/*for IE*/
    .tabs-outer {z-index:11;}/*for IE*/ 
     
    1. Change the menu width in line 5 to match your header width.
    2. To change the background color of each level, simply replace the color hex code in lines 13 to 16.
    3. I use small caps font on tabs that have upper levels, to differentiate them from tabs that don’t. You can change that in line 35 and 36.
    It's Easy. Try It Back.
    See Demo
     

     

    0 comments:

    Post a Comment