[jQuery] Help creating a special menu
Hi!
Sorry for my english!
I need help to create a special menu with jquery.
In this menu, when I will be hover a "button", it remain the same, but
all the other changes!
You can see a very basics and work in progress example in the orange
menu here: www.ivanisevic82.com
I used this tutorial:
http://www.3point7designs.com/blog/2007/12/22/advanced-css-menu-trick/
So, I created this menu with this code:
PHP:
<ul>
<li><a href="http://xxx.com" accesskey="3" id="home"
title="Home">Home</a></li>
<li><a href="http://yyy.com" accesskey="4" id="why" title="why">Why</
a></li>
<li><a href="http://ppp.com" accesskey="5" id="try" " title="try">Web
Design</a></li>
</ul>
CSS:
#main_nav {
list-style: none;
margin: 0;
padding: 0;
}
#main_nav li {
float: left;
list-style: none;
}
#main_nav li a {
text-indent: -999999px;
overflow: hidden;
display: block;
height: 80px;
}
#home{ background: url(/media/1.jpg); width: 103px; }
#why { background: url(/media/2.jpg); width: 103px; }
#try { background: url(/media/3.jpg); width: 103px; }
#main_nav:hover li a#home { background-position: -206px; }
#main_nav:hover li a#why { background-position: -206px; }
#main_nav:hover li a#try { background-position: -206px; }
#home:hover { background: url(/media/1.jpg) 0 0 !important; }
#why:hover { background: url(/media/2.jpg) 0 0 !important; }
#try:hover { background: url(/media/3.jpg) 0 0 !important; }
Now what I'd like to do, is try to apply a fad-in / fade-out effect
(with jquery) everytime a part of the menu has to change aspect.
I tried to build this js ofr jquery, but it doesn't works:
$(function(){
$("#home").hover(
function(){$("#main_nav:hover li a#webdesign").fadeIn('slow');},
function(){$("#main_nav:hover li a#about").fadeIn('slow');});
});
Can you help me to build a js working for my project?
Thank you, bye!