Disclaimer: This post may contain affiliate links. For more information on Cornerstone Confessions' affiliates, please see my full disclosure policy.

Creating a Horizontal Drop Down Navigation Menu in Blogger

One of the fun things of figuring out how to make this blog more accessible was to figure out the html for creating a drop down menu in blogger.  It’s pretty easy once you have the code.  So here it goes…



1.  Go to Template on your Design menu and select “Backup/Restore.”  Select “Download Full Template.”  This will ensure that in case you make a mistake you can always select this download to return to your current template.  Once the template is downloaded close the Backup/Restore window.


2.  Now select “Edit HTML.”  Click “Proceed.”

3.  Click somewhere within the window and then press ctrl+F to open the find window.  Type in “</b:skin>.”

4.  Once found, copy and add the below codes just before “</b:skin>.”

.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
}

.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #414141; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}

.ddsmoothmenu ul li a.selected{ /*CSS class that’s dynamically added to the currently active menu items’ LI A element*/
background: black;
color: white;
}

.ddsmoothmenu ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}

/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

/* ######### CSS for shadow added to sub menus ######### */

.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}

.toplevelshadow{ /*shadow opacity. Doesn’t work in IE*/
opacity: 0.8;
}

5.  Now return to your find window and type in “</head>”.

6.  Once found, copy and add the below codes just before “</head>”.

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’ type=’text/javascript’/>
<script src=’http://btemplatescripts.googlecode.com/files/ddsmoothmenu.txt’ type=’text/javascript’/>

7.  Return to your find window once more and type in “=’Header’/>”.  Just below “=’Header’/> is:
 </b:section>
</div>
Add the below codes below the above codes:
<div class=’ddsmoothmenu’ id=’smoothmenu1′>
<ul>
<li><a href=’http://cornerstoneconfessions.blogspot.com’>Item 1</a></li>
<li><a href=’#'>Folder 0</a>
<ul>
<li><a href=’#'>Sub Item 1.1</a></li>
<li><a href=’#'>Sub Item 1.2</a></li>
<li><a href=’#'>Sub Item 1.3</a></li>
<li><a href=’#'>Sub Item 1.4</a></li>
<li><a href=’#'>Sub Item 1.2</a></li>
<li><a href=’#'>Sub Item 1.3</a></li>
<li><a href=’#'>Sub Item 1.4</a></li>
</ul>
</li>
<li><a href=’#'>Folder 1</a>
<ul>
<li><a href=’#'>Sub Item 1.1</a></li>
<li><a href=’#'>Sub Item 1.2</a></li>
<li><a href=’#'>Sub Item 1.3</a></li>
<li><a href=’#'>Sub Item 1.4</a></li>
<li><a href=’#'>Sub Item 1.2</a></li>
<li><a href=’#'>Sub Item 1.3</a></li>
<li><a href=’#'>Sub Item 1.4</a></li>
</ul>
</li>
<li><a href=’#'>Item 3</a></li>
<li><a href=’#'>Folder 2</a>
<ul>
<li><a href=’#'>Sub Item 2.1</a></li>
<li><a href=’#'>Folder 2.1</a>
<ul>
<li><a href=’#'>Sub Item 2.1.1</a></li>
<li><a href=’#'>Sub Item 2.1.2</a></li>
<li><a href=’#'>Folder 3.1.1</a>
<ul>
<li><a href=’#'>Sub Item 3.1.1.1</a></li>
<li><a href=’#'>Sub Item 3.1.1.2</a></li>
<li><a href=’#'>Sub Item 3.1.1.3</a></li>
<li><a href=’#'>Sub Item 3.1.1.4</a></li>
<li><a href=’#'>Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href=’#'>Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=’http://cornerstoneconfessions.blogspot.com’>Item 4</a></li>
</ul>
<br style=’clear: left’/>
</div>
8.  That’s it.  Now “save template” and close to preview.

 

Kathy

Bonus: Don't forget to check out the Cornerstone Confessions Goody Bag filled with freebies, giveaways, discounts, and more!  This month's Goody Bag includes Homemaking Planner Printables, an opportunity to win 1 of 3 Tell Your Time eBooks by Amy Lynn Andrews and more! Come check it out!


If you enjoyed your visit, have Cornerstone Confessions delivered right to your inbox!
And don't forget to follow me via all your favorite social media too!



*Occasionally you will find me linking up to some of these linky parties. Feel free to come join the fun!

Comments

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>