NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

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

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
tbartolen
Člen
Avatar
tbartolen:19.4.2016 21:46

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.4.2016 21:46
Navštiv www.fb.com/skkelticz
Avatar
Václav Černý
Člen
Avatar
Václav Černý:20.4.2016 17:55

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.4.2016 17:57
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
20.4.2016 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.