Blogosphere Travels #5: Dropdown Menus in Blogger

Posted December 26, 2013 in Blogosphere Travels / 4 Comments

Share
I used to use Blogger and one thing it didn’t already have was a dropdown navigation menu at the top. I had to do some hunting around but I finally found a way to do it. Hope this helps you guys!

What I’m going to do is basically copy all the HTML code you’ll need to use- there’s little other instruction on the original post, but I’ll put the link here anyway.
http://xomisse.com/blog/add-drop-menu-can-styled-template-designer/

STEP ONE

So first you’ll need to go to the Layout tab and put in a new HTML/Javascript Gadget and paste in the following code:

<!-- start navmenu -->
<ul id='cssnav'>
<li class="active"><a href='LINK'>Home</a></li>
<li class="sub"><a href='LINK'>CATEGORY 1</a>
<ul>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 1A</a></li>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 1B</a></li>
</ul>
</li>
<li class="sub"><a href='LINK'>CATEGORY 2</a>
<ul>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 2A</a></li>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 2B</a></li>
</ul>
</li>
<!-- ADD MORE CATEGORIES OR LINKS HERE -->
<li class="last"><a href='LINK'>Contact</a></li>
</ul>
<!-- end navmenu -->
 This is where you can add in your page links and titles. The part I highlighted in green is where you put the link, and the part I highlighted in blue is the title for that page.
For instance, mine would look like this for my Features page :
<li><a href='http://www.awesomebookassessment.com/p/features.html'>Features</a></li>
To add a new page with subpages, use this code:
<li class="sub"><a href='LINK'>CATEGORY 3</a>
<ul>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 3A</a></li>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 3B</a></li>
</ul>
</li>
To add a new link WITHOUT subpages, use this code:
<li><a href='LINK'>LINK-NAME</a></li>
Remember, you can edit the example code however you need to to get it right. It might take a while. I did it in about 30 minutes though and that was because I was using the wrong code….silly me haha.

STEP TWO

Go to the Template tab and click on Customize. Go to Advanced and Add CSS. Then add this code:
 /* ----- CSS Nav Menu Styling ----- */
#cssnav { 
border: 0px;
margin: 0px;
padding: 0px;
width: auto;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
color: $(tabs.text.color); /* Template Designer - Change Font Size */
}

#cssnav ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
height: 40px; /* Change Height of Menu */
list-style: none;
margin: 0px;
padding: 0px;
}

#cssnav li {
float: left;
padding: 0px;
}

#cssnav li a {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: block;
margin: 0px;
text-align: center;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
text-decoration: none;
}

#cssnav > ul > li > a {
color: $(tabs.text.color); /* Template Designer - Change Font Color */
}

#cssnav ul ul a { 
color: $(tabs.text.color); /* Template Designer - Change Color */
}

#cssnav li > a:hover, #cssnav ul li:hover {
color: $(tabs.selected.text.color); /* Template Designer - Change Font Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */
text-decoration: none;
}

#cssnav li ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 200px; /* Change Width Of DropDown Menu */
z-index:9999;
}

#cssnav li:hover ul {
display: block;
}

#cssnav li li {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Background */
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 200px; /* Change Width Of DropDown Menu */
}

#cssnav li:hover li a {
background: #FFFFFF; /* Template Designer - Change Background of Link on Hover */
}

#cssnav li ul a {
display: block;
height: auto;
margin: 0px;
padding: 10px;
text-align: left;
}

#cssnav li ul a:hover, #cssnav li ul li:hover > a {
color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */
border: 0px;
text-decoration: none;
}
The pink stuff is the stuff you are going to want to edit. To change the colors on things, just take out where it says $(tabs.selected.text.color) (for example) and insert #ADFF2F (for example). Part of my code would look like this:
#cssnav li > a:hover, #cssnav ul li:hover {
color: #F8F8FF; /* Template Designer – Change Font Color on Hover */
background-color: #002100; /* Template Designer – Change Font Background on Hover */
text-decoration: none;
}
I highlighted it where I edited it. To find colors, a great site is here: http://www.w3schools.com/tags/ref_colorpicker.asp
And another one that has fewer color values but is easier to look at: http://cloford.com/resources/colours/500col.htm
So just play around with it, edit it and you’re done!
Signature1
Share

Tags:

Sign up here to receive ALL of Awesome Book Assessment's posts in your inbox!

Nose Graze - WordPress themes and plugins for the creative blogger

Leave a Reply

4 Comments on "Blogosphere Travels #5: Dropdown Menus in Blogger"

Notify of
avatar
Sort by:   newest | oldest
Chelsey
Guest

Thank you so much for sharing this! It was really very helpful!

New follower via GFC :)

Stop by and say hello!

Chelsey@Charming Chelsey’s

Alicia the Awesome
Guest

Glad I could help!
Thanks for following, I followed back! I love the way your blog looks (:

Alicia

Scott
Guest

I enjoy this blog. I am hoping this will be helpful to my NBA Blog. You can find my blog at http://probasketballhoopsland.blogspot.com I am following you on twitter. You can find me here at twitter https://twitter.com/NBAfanblogger I hope to be able to create a drop down menu to sell NBA products for NBA fans. Great blog.

Alicia the Awesome
Guest

Thank you for following; I followed you back. I am so glad you found this post helpful! Best of luck with your blog.

Alicia

wpDiscuz