Tuesday, November 15, 2011

How to make a drop down navigation bar in blogger

If you have been blogging for a bit, it is likely that you have more links that you'd like accessible from your home page, but how to display them without cluttering up your navigation bar? A simple drop down menu is not that hard to achieve and customize!


To accomplish this, you will need 3 things:
  • CSS code pasted into your html section as displayed below
  • HTML code in a widget
  • Image to serve as your backround
IMAGES
Because the images will be stretched out over the length of your nav bar, they are small! Where your average blog button is 125x125, this image is only 1x43!

To use any of the examples below, right click the SMALL images and choose "save as"
Then upload it to your image hosting service (I use Photobucket) to get the URL to insert later.




Will yield

Will yield

Will yield

Will yield
Will yield


Will yield


CSS CODE 
Under "design", click "Edit HTML" and check the box to expand widget templates. 
Press Control + F to bring up your search bar, and locate the following text: ]]></b:skin>
Paste the following code JUST BEFORE it. Be sure to change IMAGES to the URL where your chosen images are hosted, and you can mess around with the colors highlighted in RED to match your theme!



.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(YOUR IMAGE) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
}
.menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#000000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-left:2px solid #0079b2;
border-right:2px solid #0079b2;
border-bottom:2px solid #0079b2;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
width:225px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
}
.menu #current{
background:url(YOUR IMAGE) top left repeat-x;
color:#ffffff;
}

HTML CODE
Under "design", add a new HTML widget and paste the following code. Drag the widget under your header and save. Replace items in red with your own links.



<div class="menu">
<ul>
<li><a href="LINK" >Home</a></li>
<li><a href="LINK" >Top Level Link Title</a>
<ul>
<li><a href="LINK">Drop Down Link Title</a></li>
<li><a href="LINK">Drop Down Link Title</a></li>
<li><a href="LINK">Drop Down Link Title</a></li>
<li><a href="LINK">Drop Down Link Title</a></li>
</ul>
</li>
<li><a href="LINK">Top Level Link Title</a>
<ul>
<li><a href="LINK">Drop Down Link Title</a></li>
<li><a href="LINK">Drop Down Link Title</a></li>
<li><a href="LINK">Drop Down Link Title</a></li>
<li><a href="LINK">Drop Down Link Title</a></li>
</ul>
</li>
<li><a href="LINK">Top Level Link Title</a></li>
</ul>
</div>


What each piece of code does:
<li> indicates a new link. 
</li> ends that section
<ul> indicates a dropdown coming up.
</ul> ends the drop down to prepare for a new top level.
HAVE FUN!!!






 
Cindy Andrzejewski Owner, Cute-Ecakes
Tel: (888) 300-3708
cute-ecakes.com

Facebook Twitter LinkedIn Flickr Google Plus
TwitterLatest tweet: It's official, we have our own domain!! http://t.co/v470ZJw7 via @LifeLoveInspire

2 comments:

Tonya said...

I'll say it again.....You are awesome! I'm gonna give this a try sometime tomorrow. Thanks!

MariaS said...

Thank yo so much for this tutorial! I'm with Tonya, you are awesome and your tips and tricks are always phenomenal! :)