Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Pouze tento týden sleva až 80 % na e-learning týkající se C a C++. Zároveň využij akce až 80 % zdarma při nákupu e-learningu - více informací.
discount week 80 + hiring

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

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
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
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í
+1 bodů
Ř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.