Diskuze: Menu Aktivovany stav

HTML a CSS HTML a CSS Menu Aktivovany stav American English version English version

Avatar
BlugW
Redaktor
Avatar
BlugW:

Hoj,

chci se zeptat, chci udělat menu, že když je stránka aktivní (jsem právě na ní), tak se odpovídající položka v menu svítí nebo je podtržena.

Netuším jak to udělat, jelikož vždy jsem dělal jen hover.

Poradí někdo prosím?

Díky

Odpovědět 28.2.2014 21:25
Pořiď si mac na www.appletrh.cz. Novinky a zajímavosti ze světa Apple na https://www.applemagazin.eu
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na BlugW
Ondrca:

Ahoj, nevím, jestli není nějaká hezčí možnost, ale určitě by to šlo udělat tak že si do každýho html dokumentu hodíš <style> a v něm to nastyluješ.

Nahoru Odpovědět  -1 28.2.2014 21:27
Zase jsem o něco chytřejší
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Odpovídá na BlugW
Daniel Vítek:

Normálně tomu dáš class třeba "active" a pak si to nastyluješ.

 
Nahoru Odpovědět 28.2.2014 21:30
Avatar
BlugW
Redaktor
Avatar
BlugW:

Já umím html + css, docela dobře jen jsem nikdy nevyužíval všechno, jako např. aktivní stav.

Vůbec netuším jak ho udělat. :(

http://postimg.org/…e/gi8jq8t8j/ to oranžové podtržení ma být když se právě nacházim na te stránce.

Právě že nemůžu najít ten příkaz nebo tag na to.

Editováno 28.2.2014 21:32
Nahoru Odpovědět 28.2.2014 21:30
Pořiď si mac na www.appletrh.cz. Novinky a zajímavosti ze světa Apple na https://www.applemagazin.eu
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na Daniel Vítek
Ondrca:

Tak ale to stejně u každýho html dokumentu musí udělat ručně pokud nepoužívá PHP, ne?

Nahoru Odpovědět 28.2.2014 21:32
Zase jsem o něco chytřejší
Avatar
Odpovídá na BlugW
Michal Žůrek (misaz):

Jde to udělat v JS.

V JS si zpracuješ nadpisy a označíš všechny elementy menu (nejšastěji to bývají li), které mají obsah textu právě tento nadpis.

var nadpisy = document.querySelectorAll("h1");
for (var i = 0; i < nadpisy.lenght; i++) {
    var polozkyMenu = document.querySelectorAll("li");
    for (var u = 0; u < polozkyMenu.lenght; u++) {
        if (polozkyMenu[u].innerText == nadpisy[i].innerText) {
            polozkyMenu[u].style.fontweight = "bold";
        }
    }
}

Kód jsem psal z hlavy a nevím jestli funguje.

Editováno 28.2.2014 21:34
Nahoru Odpovědět  +2 28.2.2014 21:33
Nesnáším {}, proto se jim vyhýbám.
Avatar
BlugW
Redaktor
Avatar
BlugW:

Díky, vyzkouším :)
Jinak, jak se tomuhle říká, jelikož jsem nevěděl vůbec jak to zadat do googlu.

Nahoru Odpovědět 28.2.2014 21:35
Pořiď si mac na www.appletrh.cz. Novinky a zajímavosti ze světa Apple na https://www.applemagazin.eu
Avatar
Odpovídá na BlugW
Jakub Vaněk (Bubavanek):

Asi takto

<li class="aktivni"><a href="#"></a></li>

a pak to nastylujes

.aktivni{
  background: barva;
  color: barva;
}

A takhle si ten styl hodis nejdriv do index.html, pak do dalsi, ale do indexu uz ne atd.

Snad jsem to napsal dobře. Pokud by bylo nějaký lepší řešení, tak nevím. Nikdy jsem se tím nějak nezabýval.

EDIT: Tak misaz byl rychlejší. Neumim JS, takže jsem netušil jak to funguje.

Editováno 28.2.2014 21:40
 
Nahoru Odpovědět 28.2.2014 21:37
Avatar
Odpovídá na Jakub Vaněk (Bubavanek)
Michal Žůrek (misaz):

To tovje je super, ale psát na každou stránku mírně odlišné HTML je opruz, nedejbože by se na tom něco měnilo.

Nahoru Odpovědět  +1 28.2.2014 21:47
Nesnáším {}, proto se jim vyhýbám.
Avatar
Odpovídá na Michal Žůrek (misaz)
Jakub Vaněk (Bubavanek):

Jo já vim, proto je tvoje řešení daleko lepší. Ale jak říkám, já se v JS nevyznám, takže jsem netušil jak jinak na to.

 
Nahoru Odpovědět 28.2.2014 21:50
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 10 zpráv z 10.