Subscribe Here RSS or Email


Add A CSS Pop-ups To Your Navigation Menu

0 comments Buzz Here

I would like to give credit to the origin of this CSS Eric Meyer's this gives me an idea and i have done a few trial and error. I have come up a few Tutorial but i am still working to the other one where i want to use images.

This Tutorial is about how to add Popups to your existing navigation menu.

Things to do:
  1. Add CSS Codes of your pop-ups
  2. Add div code to your existing navigation html/javascript code
  3. Optional: draw a background images for your pop-ups
Once you play around with this one this will give you a few idea and you can modify and create a more attractive design to either your navigation menu or post.

Important! Before you start, please download your full template for your safety.

Lets Start! with CSS Code: Go to your Dashboard, Layout then Edit Html -- Ctrl+F type ]]></b:skin>

Then Place this Code BEFORE ]]></b:skin>
#navlinks {

#navlinks a:hover {
#navlinks a span {

#navlinks .home span {
width: 202px;
height: 31px;
background: url(Image.png) no-repeat;


#navlinks .about span {

width: 202px;
height: 31px;
background: url(image.png) no-repeat;


#navlinks .contact span {

width: 202px;
height: 31px;
background: url(image.png) no-repeat;


#navlinks .Links span {

width: 202px;
height: 31px;
background: url(image.png) no-repeat;

#navlinks a:hover span {
display: block;

Then save your template.

Note: Only include the code that are marked as blue if you want to add background, if not then take them off and that is the optional.


Open the Html/javascript code of your navigation menu and replace with the code below.

<div id="navlinks">
<li><span class="home"><a href="">Home<span>Go to Home</span></a></span></li>
<li><span class="about"><a href="">About<span>Want to know more?</span></a></span></li>
<li><span class="contact"><a href="">Contact<span>If you need for something</span></a></span></li>
<li><span class="Links"><a href="">Links<span>Check if you are in my list</span></a></span></li>
</div><!-- /navlinks -->

If you don't want to replace, you can manually add the code below instead.

Add the once that are marked red to your existing navigation menu.

There you go, you can check my navigation menu for demo. I hope you find this tutorial helpful, it's easy and it's a simple yet add value to your blog design.

Related Posts by Categories


Post a Comment

I really love to read your thoughts, Reminder though that I Moderate my blog, If your intention is only to spam think twice.

For those that will comment because you want to share your thoughts i really appreciate your time. "Dofollow" Rules.


  © Blogger template 'tbn' by thebuzznutter 2008

Bring me to TOP