Adding Drop-down Menus to the Navigation Bar

Using the Advanced configuration for the Navigation Bar, you can add drop-down menus below your banner to link to a list of Pages or Categories.

Editing the sample code

Below is the sample code you'll need to add to the Advanced configuration field for the Navigation Bar. There are two sections of the code which need to be included. The first section of the code is the style which starts with the <style type="text/css"> tag and ends with the </style> tag. The second section of the code is where you will enter the tiles and URLs for the menus and starts with the <div id="centernav"> tag.

First, you'll need to start with the sample code below and edit it to meet your needs. Detailed information is available on editing the style and editing the menu links is available below.

<style type="text/css"> /* Derived from http://www.devinrolsen.com/pure-css-horizontal-menu/ */ #pagebody { position: inherit !important; width: 100%; } /* DO NOT EDIT */ #pagebody-inner { position: inherit !important; width: 100%; } /* DO NOT EDIT */ #alpha, #beta, #gamma, #delta { display: inline; /* DO NOT EDIT */ position: inherit !important; /* DO NOT EDIT */ float: left; /* DO NOT EDIT */ min-height: 1px; /* DO NOT EDIT */ } #centernav { width: 900px; /* if you want your nav centered, set this to the width of your container, if you don't want it centered, change this number to 100% */ margin-left: auto ; margin-right: auto ; } #dropnav {height:25px; background:#999;} /* Changes the height and bg color of the main menu */ #dropnav ul {margin:0px; padding:0px;} #dropnav ul li {display:inline; float:left; list-style:none; margin-left:15px; position:relative; height:25px; width: 150px;} /* only edit the last 2 items - sets the width of the main menu */ #dropnav li a {color:#FFF; text-decoration:none;} /* Changes the link color of items on the main menu */ #dropnav li a:hover {color:#900; text-decoration:none;}/* Changes the hover color of items on the main menu */ #dropnav li ul {margin:0px; padding:0px; display:none; position:absolute; left:0px; z-index: 99; top:25px; background-color:#CCC;} /* Only edit the last 2 items - set the top margin and background color of the submenus */ #dropnav li:hover ul {display:block; width:150px;} /* sets the width of the submenus */ #dropnav li li {list-style:none; display:list-item;} /* DO NOT EDIT */ #dropnav li li a {color:#000; text-decoration:none;} /* Changes the link color of items in the submenu */ #dropnav li li a:hover {color:#900; text-decoration:none;} /* Changes the hover color of items in the submenu */ li#main {padding-top: 2px;} /* Sets the padding of items in the main menu */ </style> <div id="centernav"> <div id="dropnav"> <ul> <li id="main"> <a href="#">Menu Item 1</a> </li> <li id="main"> <a href="#">Menu Item 2</a> <ul id="subnav"> <li><a href="#">sub menu item 1</a></li> <li><a href="#">sub menu item 2</a></li> <li><a href="#">sub menu item 3</a></li> <li><a href="#">sub menu item 4</a></li> </ul> </li> <li id="main"> <a href="#">Menu Item 3</a> <ul id="subnav"> <li><a href="#">sub menu item 1</a></li> <li><a href="#">sub menu item 2</a></li> <li><a href="#">sub menu item 3</a></li> <li><a href="#">sub menu item 4</a></li> </ul> </li> <li id="main"> <a href="#">Menu Item 4</a> <ul id="subnav"> <li><a href="#">sub menu item 1</a></li> <li><a href="#">sub menu item 2</a></li> <li><a href="#">sub menu item 3</a></li> <li><a href="#">sub menu item 4</a></li> </ul> </li> </ul> </div> </div>

Editing the Style of the Navigation Bar

Editing the style code for the menus is not necessary, but you may need to make adjustments to match the theme of your blog. Not all classes with the style can be edited, and these classes are noted as "DO NOT EDIT" within the code.

For the classes which can be edited, there are notes included next to the class. For instance, you can include different color codes for the background when you hover over the links. We would recommend you start with the basic code provided on your blog, then make adjustments to the code as necessary to fit the style of your blog's theme.

Editing the Links included in the Navigation Bar

The sample code includes 4 tabs with 3 drop down menus. You can add more menus and links as needed. The # symbols need to be replaced with the URLs for the pages you are linking. For example, if you would like to place a link to your Categories in the second menu, you would start with sample code for "Menu Item 2":

<li id="main">
            <a href="#">Menu Item 2</a>
                <ul id="subnav">
                      <li><a href="#">sub menu item 1</a></li>
                      <li><a href="#">sub menu item 2</a></li>
                      <li><a href="#">sub menu item 3</a></li>
                      <li><a href="#">sub menu item 4</a></li>
                </ul>            
            </li>

Then, you can edit the code to link to your categories similar to:

<li id="main">
            <a href="http://everything.typepad.com/blog/archives.html">Categories</a>
                <ul id="subnav">
                      <li><a href="http://everything.typepad.com/blog/ads/">Ads</a></li>
                      <li><a href="http://everything.typepad.com/blog/announcements/">Announcements</a></li>
                      <li><a href="http://everything.typepad.com/blog/best-of-the-bloggers/">Best of the Bloggers</a></li>
                      <li><a href="http://everything.typepad.com/blog/contest/">Contests</a></li>
                      <li><a href="http://everything.typepad.com/blog/features/">Features</a></li>
                      <li><a href="http://everything.typepad.com/blog/podcast/">Podcasts</a></li>
                      <li><a href="http://everything.typepad.com/blog/tips_and_tricks/">Tips and Tricks</a></li>
                </ul>            
            </li>