Заоблено меню :hover

[lub4o]

Здравейте, правя си едно меню и се чудя един ефект, как може да стане.
Значи имам

<div id="menu">
<div class="navleft"></div>
<div class="navcenter">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">home</a></li>
<li><a href="#">home</a></li>
</ul>
</div>
<div class="navright"></div>
</div>

Клас navleft ми е лявата заоблена картинка, а navright дясната заоблена.
Така правя си менюто заоблено, всичко точно. Но идва момента, когато правя ховър ефекта, правя си го и няма проблем, но преди първия бутон ми е заоблената картинка и като ховърна първия бутон, то заобленото не се hover, а си остава картинка, та идеята ми е как мога да направя заоблено меню и съответно като hover първия бутон, да се ховър и заоблената част, а не да я изрязва?

С border-radius не ме устройва.
С спрайтове мисля, че може да се получи но незнам как точно.

Виждате как div navleft не се :hover, та как мога да постигна ефекта ?

 

[gLaVoReZa]

Вариант 1:

В navcenter сложи DIV и му задай широчина колкото е на menu, а на "menu" му задай position : relative;. След това на новия див му задай:

[css]position: absolute;
top: 0;
left: 0;[/css]

Така на практика navcenter, или по-точно новия DIV, който се намира в него, ще започва от началото на самото меню и първата връзка ще започва от началото на менюто и ще можеш да и зададеш картинка за фон, която да съдържа заоблените ръбове и тя ще застане над старите заоблени ръбове.

Вариант 2 (по-добър):

Направи ръбовете да са полупрозрачни PNG-та и да са обърнати... под обърнати имам предвид това:

Това ти е горен ляв ъгъл, като горният ляв пиксел ти е черен със 100% видимост, а другите два са черни с 50% видимост, а бялото е чисто прозрачно. В този случай цвета на body, или което там се пада под навигационното меню, трябва да е черен. Като наложиш тази маска върху менюто, се получава заоблен ръб, като отдолу менюто ти може да е с всякакъв цвят, или фон.

Та правиш ръбовете по този начин и ги позиционираш над всичко и така няма да ти се налага да имаш navcenter, а връзките ще са ти директно в menu и на първата връзка си и задаваш какъвто си искаш фон на hover, и маската си оправя заоблените ръбове. Аз използвам този метод.

Вариант 3:

Слагаш home иконка преди първата връзка и така ще избегнеш всички разправии.

 

[lub4o]

Благодаря за изчерпателния отговор
Утре ще опитам да направя и по 2-та метода и ще споделя резултат.
btw, има още един начин в li се правя два спана <a href="#"><span><span>home</span></span></a>
И на първия li с клас first, на първия спан се задава крайната картинка а на втория повтарящата.

Но като цяло доста ме обърка и ще видя как ще го направя.

 

[god_of_cs]

Имах същия проблем вчера и го реших лесно. Правиш 3 отделни класа за ховър на менюто. Ляв, среден и десен. Левия е само първия линк, средния е всичко без десния линк.

 

[lub4o]

Може ли пример с код?

 

[god_of_cs]

Давам ти пример само с класове.

.menuleft {
background... нека да е с заоблена картинка.
}
.menuleft:link {
...
}

и така до края заедно с ховър. На ховър просто сложи заоблена картинка.

.menunormal {

нормалната част от менюто

} и така също до края.

.menuright {

код за най- десния линк.

} пак до края.