Thank you for your support!
I don't know if I understand all...
I tried to change the css part I posted in the first post with this, but I
don't think is right becouse it doesn't work...
#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;
background-position: 0 0;
}
#home{ background: url(/media/1.jpg) 0 0; width: 103px; }
#webdesign { background: url(/media/2.jpg) 0 0; width: 103px; }
#about { background: url(/media/3.jpg) 0 0; width: 103px; }
#main_nav li a.Blur {
background-position: -206px 0;
}
#main_nav li a:hover { background-position: -103px 0; }
What I wrong?
And (second question) is possible to insert fade effect in the same .js I
use for blur.
Last thing: when I say "blur" I want to say the kind of effect hat make a
text or image with less focus.
thank you, bye!
brian-263 wrote:
>
>
> You're only passing one value for background-position; there should be
> a left and top.
>
> Looking at the code you posted and the images themselves, it's not
> clear to me what you want the hovered link to look like. I'm assuming
> here that you want the hovered link to change to black text, and the
> others to be blurred.
>
> #main_nav li a {
> text-indent: -999999px;
> overflow: hidden;
> display: block;
> height: 80px;
> background-position: 0 0; /* set it here globally */
> }
>
> /* default white text
> */
> #home{ background: url(/media/1.jpg) 0 0; width: 103px; }
> #why { background: url(/media/2.jpg) 0 0; width: 103px; }
> #try { background: url(/media/3.jpg) 0 0; width: 103px; }
>
> /* class for the blurred state
> */
> #main_nav li a.Blur {
> background-position: -206px 0;
> }
>
> /* Changes the hovered link to black text
> */
> #main_nav li a:hover { background-position: -103px 0; }
>
> /* there's no need to assign hover callbacks for each link individually
> */
> $(function(){
> $("#main_nav li a").hover(
> function(){$("#main_nav li a").addClass('Blur');},
> function(){$("#main_nav li a").removeClass('Blur');}
> );
> });
>
>
> The one thing this is missing is the fadeIn effect you had. But you
> could use this to potentially add that, maybe with setTimeout.
>
>
> On Fri, Dec 5, 2008 at 7:32 AM, ivanisevic82 <[EMAIL PROTECTED]>
> wrote:
>>
>> 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> http://xxx.com title="Home">Home </li>
>> <li> http://yyy.com Why</
>> a></li>
>> <li> http://ppp.com Web
>> Design </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!
>>
>
>
--
View this message in context:
http://www.nabble.com/Help-creating-a-special-menu-tp20855490s27240p20864772.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
