Diskuze: Odskočení menu při najetí kurzorem, efekt border

HTML a CSS HTML a CSS Odskočení menu při najetí kurzorem, efekt border American English version English version

Avatar
tbartolen
Člen
Avatar
tbartolen:

Zdar, na webu
http://stansekeltem.cz/
používám v menu tento efekt pro zvýraznění která volba se volí

nav ul li:hover, nav > ul > li.active {
        border-bottom: 1px solid #0057b8;
}

Bohužel při najetí na položku v menu mi odskočí celá navigační lišta o ten jeden pixel. Víte někdo, jak tohle řešit? Děkuji za radu

Odpovědět 19. dubna 21:46
Navštiv www.fb.com/skkelticz
Avatar
Václav Černý:

Jakmile je položka aktivní, přidá se vespod 1px rámeček, který pochopitelně o ten 1px výšku menu zvětší a dojde k poskočení. Nejjednodušší v tvém případě bude přidat položkám rámeček hned, který sice menu zvětší, ale nebude vidět. Pokud dojde k najetí myši, pak se rámeček pouze dole obarví.

nav ul li {
        border: 1px solid rgba(0, 0, 0, 0);
}
nav ul li:hover, nav > ul > li.active {
        border-bottom-color: #0057b8;
}

Neviditelný rámeček bude ze všech stran a zachová se tak vertikální zarovnání položek na střed.

Editováno 20. dubna 17:57
Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
Nahoru Odpovědět  +1 20. dubna 17:55
Nezávislý český vývojářský tým - www.luvastudio.cz
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.