Home
About
Forums
Advertise
Contact
WH horizontal menu with mouse hover effect
Posted by Nitesh Kothari on 18 August 2008|
Share this post:
|
|
2 Comments
I like experimenting with my blog every day. I try to make much better navigation for my blog, which would help the readers to access each and every post in a convenient way. Today, i will teach you how to design a Navigation menu with a dynamic submenu. When you hover over a link on topmenu, all related links to that particular menu appears on submenu.See the picture below to understand it better or live demo here.
This menu has mouse hover effect(using JavaScript).Follow the steps to use it for your blog.
Step 1: CSS Code
Take the backup of your template.Now,copy and paste the following code between <head> and <head>.
#topmenu{
background:url(http://wolverinehacks.googlepages.com/navmenu.gif) repeat-x;
height:32px;
margin:0 auto;
width:auto;
}
#topmenu ul{
height:32px;
line-height:32px;
}
#topmenu ul li{
display:inline;
}
#topmenu ul li a,
#topmenu ul li a:visited {
background:url(http://wolverinehacks.googlepages.com/linkseprator.gif) right no-repeat;
padding:0 20px;
display:block;
text-decoration:none;
float:left;
color:#4261df;
font-weight:bold;
text-shadow:#ffffff 2px 2px 2px;
}
#topmenu ul li a:hover{
color:#1532a5;background:#f2f2f2
}
#submenulinks{
width:auto;
margin:0 0 5px 0;
background:#888888 url(http://wolverinehacks.googlepages.com/navsubmenumenu.gif);
height:30px;
font-size:11px;
}
#submenulinks ul{
height:32px;
line-height:31px;
}
#submenulinks ul li{
display:inline;
}
#submenulinks ul li a,
#submenulinks ul li a:visited {
padding:0 20px;
display:block;
text-decoration:none;
float:left;
color:#FFFFFF;
}
#submenulinks ul li a:hover{
text-decoration:underline;
}
#s2, #s3{display:none;}
Download the following images and save it to your server or googlepages and change the image sources(red) in css code.Step 2: JavaScript Code
Copy and paste following code just above </head>
<script src='http://wolverinehacks.googlepages.com/wolvimouseovermenu.js' type='text/javascript'/>This menu has 3 submenus by default. If you want to add more then, edit the "wolvimouseovermenu.js".for(i=1;i<=3;i++)...If you want maximum 5 submenus, then, replace 3 to 5 in this line. Similarly Edit the HTML code also. Do not forget to change the ul id for new submenu. (eg: ID="s4")Step 3: HTML Code
Copy and paste following code in <body> section where you want to place this menu(eg: Below Header)
<div id='topmenu'>
<ul id='mymenu'>
<li><a href='#' onmouseover='javascript:showsubmenu(1)'>Home</a></li>
<li><a href='#' onmouseover='javascript:showsubmenu(2)'>Labels</a></li>
<li><a href='#' onmouseover='javascript:showsubmenu(3)'>Links</a></li>
<li><a href='contact.html'>Contact</a></li>
<li><a href='contact.html'>Advertise</a></li>
</ul>
</div>
<!-- SUB MENU -->
<div id='submenulinks'>
<ul id='s1'>
<li><a href='#'>Link1</a></li>
<li><a href='#'>Link2</a></li>
<li><a href='#'>Link3</a></li>
</ul>
<ul id='s2'>
<li><a href='#'>Tips</a></li>
<li><a href='#'>Tricks</a></li>
<li><a href='#'>Hacks</a></li>
<li><a href='#'>Widgets</a></li>
</ul>
<ul id='s3'>
<li><a href='#'>Link1</a></li>
<li><a href='#'>Link2</a></li>
<li><a href='#'>Link3</a></li>
</ul>
</div>
Now, save the template and check the blog. Your WH horizontal menu with mouse hover effect menu is ready for use.Final Words:
I hope you liked WH horizontal menu with mouse hover effect menu. Is there anything that you did not understand? leave a comment with details, i will replay ASAP or get yourself updated by subscribing to our feed.
