August 09, 2011

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.

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>
Search


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Discover Typepad Services