Diskuze: Menu Aktivovany stav

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

Aktivity (1)
Avatar
Test Case
Redaktor
Avatar
Test Case:28.2.2014 21:25

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
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na Test Case
Ondrca:28.2.2014 21:27

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 Test Case
Daniel Vítek:28.2.2014 21:30

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

 
Nahoru Odpovědět 28.2.2014 21:30
Avatar
Test Case
Redaktor
Avatar
Test Case:28.2.2014 21:30

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
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na Daniel Vítek
Ondrca:28.2.2014 21:32

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 Test Case
Michal Žůrek (misaz):28.2.2014 21:33

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
Test Case
Redaktor
Avatar
Test Case:28.2.2014 21:35

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
Avatar
Odpovídá na Test Case
Jakub Vaněk (Bubavanek):28.2.2014 21:37

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):28.2.2014 21:47

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):28.2.2014 21:50

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.