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!
- 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 |
.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; } |
<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.
Cindy Andrzejewski Owner, Cute-Ecakes |
My blog: Retweet me Tuesday Hop Week #16
2 comments:
I'll say it again.....You are awesome! I'm gonna give this a try sometime tomorrow. Thanks!
Thank yo so much for this tutorial! I'm with Tonya, you are awesome and your tips and tricks are always phenomenal! :)
Post a Comment