Diskuze: Navigační menu

mkores.mk

Člen

mkores.mk:30.6.2014 15:43

Ahoj,

potřeboval bych poradit ohledně navigačního menu. Rád bych, aby po najetí na určitou položku v menu se objevil úzký pruh nad ním. Položka .aktivni označuje
aktivní stránku (dělám to podle tutoriálu zde)

https://www.dropbox.com/…emv/web2.jpg

Bohužel vždy, když najedu na jinou položku, tak se úzký pruh zobrazí pouze nad textem a ne nad celým li.

Takto to mám v HTML:

<body>
   <header>
                <a href="index.html"><div id="logo"><h1>TJ Sokol Miličín</h1></div></a>
        <nav>
                <ul>
                <li class="aktivni"><div class="cara"><a href="akt.html">Aktuality</a></div></li>
                <li><div class="cara"><a href="dok.html">Dokumenty</a></div></li>
                <li class="cara"><a href="sport.html">Sport</a></div></li>
</nav>
        </header>

V CSS takto:

nav ul li:hover .cara, .aktivni {
        display:block;
background: #FFF;
box-shadow:0px 0px 5px white;
color: f01d26;
height: 10px;
}

Když teda div vložím do li, zobrazí se pruh pouze nad textem, class="cara" dám do tagu s li, pruh se mi po najetí vůbec nezobrazuje.

Pomůžete mi prosím někdo?

Odpovědět

30.6.2014 15:43

ZdeCH

Člen

ZdeCH:30.6.2014 16:43

Ahoj je nějaký důvod proč ti nevyhovuje mít to třeba takto?
to funguje i bez divu

.aktivni{
 display:block;
 background: #FFF;
 box-shadow:0px 0px 5px white;
 color: f01d26;
 height: 10px;
 }

nav > ul li:hover{
 display:block;
 background: #FFF;
 box-shadow:0px 0px 5px white;
 color: f01d26;
 height: 10px;
 }

Editováno 30.6.2014 16:44

Nahoru Odpovědět

30.6.2014 16:43

Neřešitelný problém je ten o kterém nevím ...... a taky ona ...

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:30.6.2014 16:57

btw. chybí ti ukončení seznamu (</ul>)

Nahoru Odpovědět

30.6.2014 16:57

Neaktivní uživatelský účet

mkores.mk

Člen

mkores.mk:30.6.2014 17:04

Takto mi při pohybu myší nad odkazem pokaždé čára problikne.

Mám ho tam, jenom chyba při kopírování

Nahoru Odpovědět

30.6.2014 17:04

ZdeCH

Člen

ZdeCH:30.6.2014 18:03

teda zkoušel jsem to s černou čárou na bílém pozadí, ale nic mi neproblikávalo.

Nahoru Odpovědět

30.6.2014 18:03

Neřešitelný problém je ten o kterém nevím ...... a taky ona ...

mkores.mk

Člen

mkores.mk:30.6.2014 18:23

Když jezdíš v textu tak to nedělá. Když si nastavíš padding a jezdíš v tom odsazení tak ano

Nahoru Odpovědět

30.6.2014 18:23

Pavel Junek

Tvůrce

Pavel Junek:30.6.2014 21:14

Takhle by to nestačilo?

<body>
<header>
<a href="index.html"><div id="logo"><h1>TJ Sokol Miličín</h1></div></a>
<nav>
<a href="akt.html" onmouseover="this.style.textDecoration= 'overline'" onmouseout="this.style.textDecoration= 'none'" class="nepodtrzeno">Aktuality</a>
<a href="dok.html" onmouseover="this.style.textDecoration= 'overline'" onmouseout="this.style.textDecoration= 'none'" class="nepodtrzeno">Dokumenty</a>
<a href="sport.html" onmouseover="this.style.textDecoration= 'overline'" onmouseout="this.style.textDecoration= 'none'" class="nepodtrzeno">Sport</a>
 </nav>

A CSS

.nepodtrzeno{text-decoration: none}

Nahoru Odpovědět

30.6.2014 21:14

mkores.mk

Člen

mkores.mk:30.6.2014 21:51

Vždyť to se objeví jenom takový úzký proužek hned nad odkazem, já bych rád jak jsem dával screen.

Nahoru Odpovědět

30.6.2014 21:51

Pavel Junek

Tvůrce

Pavel Junek:30.6.2014 22:37

tak takhle

<body>
<header>
<a href="index.html"><div id="logo"><h1>TJ Sokol Miličín</h1></div></a>
<nav>
<a href="akt.html" class="nepodtrzeno">Aktuality</a>
<a href="dok.html" class="nepodtrzeno">Dokumenty</a>
<a href="sport.html" class="nepodtrzeno">Sport</a>
 </nav>

CSS si uprav jak chceš

a:hover{border-style: solid none none none; border-width: 10px}
.nepodtrzeno{text-decoration: none;}

Nahoru Odpovědět

30.6.2014 22:37

Honza Bittner

Tvůrce

Honza Bittner:30.6.2014 22:45

Problém máš v tom, že se to snažíš udělat, tu lajnu, přes extra element, což bych nedoporučoval.

Udělej to přes :before, který nastyluješ pro LI.

Nahoru Odpovědět

30.6.2014 22:45

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Petr D

Člen

Petr D:30.6.2014 22:51

Neskutečná prasárna:D
http://jsfiddle.net/7vFsZ/

Nahoru Odpovědět

30.6.2014 22:51

mkores.mk

Člen

mkores.mk:30.6.2014 22:57

Bohužel, to taky není ono.

Teda měl bych místo :hover dát :before a všechno ostatní nechat, tak jak to mám?

Nahoru Odpovědět

30.6.2014 22:57

Honza Bittner

Tvůrce

Honza Bittner:30.6.2014 22:59

Ne, hover míti musíš, jinak neodchytneš ten stav.

Budeš tedy míti asi 2 selektory, něco jako ul li a ul li:hover:before, ul li.aktivni:before

Editováno 30.6.2014 22:59

Nahoru Odpovědět

30.6.2014 22:59

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

mkores.mk

Člen

mkores.mk:30.6.2014 23:12

Mohl by jsi mi napsat tedy ten kousek kódu, jak to tam bude přesně? Nějak se v tom ztrácím...

Nahoru Odpovědět

30.6.2014 23:12

Honza Bittner

Tvůrce

Honza Bittner:30.6.2014 23:16

Napíšu ti kostru pro CSS.

nav ul li{
  ...styly pro li...
}

nav ul li a{
  ...styly pro a...
  padding: 0 20px;
  line-height: 50px;
  font-size: 18px;
}


nav ul li:hover:before, nav ul li.aktivni:before{
  content: "";
  display: block;
  width: 100%;
  height: 5px;
  background: red;
  position: absolute;
  top: 0;
  let: 0;
}

Takto nějak by to mělo fungovati.
(v UL LI nech pouze A)

Editováno 30.6.2014 23:16

Nahoru Odpovědět

30.6.2014 23:16

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

mkores.mk

Člen

mkores.mk:30.6.2014 23:27

Tak to vypadá takto:

https://www.dropbox.com/…odiled/w.jpg

A v HTML bude toto?

<li><a href="sport.html" class="aktivni">Sport</a></div></li>

Editováno 30.6.2014 23:29

Nahoru Odpovědět

30.6.2014 23:27

Honza Bittner

Tvůrce

Honza Bittner:1.7.2014 8:14

Třídu aktivní dávej vždy na LI.

Čára by měla být pouze nad .aktivni nebo při :hoveru, takže nevím co to dělá? Možná zkus dát na LI ještě relativní pozici?

Nahoru Odpovědět

1.7.2014 8:14

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

mkores.mk

Člen

mkores.mk:3.7.2014 10:40

Jo, s relativní pozicí je to krásné

Ještě takovou otázečku, kdybych chtěl tento styl použít na podmenu, které bude vlevo, tzn. že ta čára by měla být ne nad odkazem ale nalevo od textu.

https://www.dropbox.com/…i/web1.1.png

Nahoru Odpovědět

3.7.2014 10:40

mkores.mk

Člen

mkores.mk:15.7.2014 19:26

Nevíš?

Akceptované řešení
+20 Zkušeností

Nahoru Odpovědět

15.7.2014 19:26

Naučíme tě pracovat na home-office.

Zjistit více...

Naučíme tě pracovat na home-office.

Více info »

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 19 zpráv z 19.