Autor Zpráva
Seuss
Profil *
Zdravím, mohl by mi někdo prosím poradit jak u existujícího horizontálního menu s js efektem přidat class k zobrazení aktivní stránky? Děkuji za odpověď

Nyní mám tohle: menu-theme2.css
    <ul class="modern-menu theme2">
        <li><a href="index.php"><span>HOME</span></a></li>
        <li><a href="kredity.php"><span>KREDITY</span></a></li>
        <li><a href="shop.php"><span>SHOP</span></a></li>
        <li><a href="aukce.php"><span>AUKCE</span></a></li>
        <li><a href="servery.php"><span>SERVERY</span></a>
        <li><a href="forum"><span>FORUM</span></a></li>
    </ul>


A já bych chtěl tedy uvést do funkčnosti toto:
    <ul class="modern-menu theme2">
        <li><a class="active" href="index.php"><span>HOME</span></a></li>
        <li><a href="kredity.php"><span>KREDITY</span></a></li>
        <li><a href="shop.php"><span>SHOP</span></a></li>
        <li><a href="aukce.php"><span>AUKCE</span></a></li>
        <li><a href="servery.php"><span>SERVERY</span></a>
        <li><a href="forum"><span>FORUM</span></a></li>
    </ul>

Myslel jsem že bude stačit přidat do css souboru
li a:hover:not(.active) { background-color: #111; } 
.active { background-color: #4CAF50; }
Tomáš123
Profil
Seuss:
Daný zápis je iba konktérnejšou, ale horšie podporovanou, variantou selektoru a:hover. Môžeš použiť náhradu:
a:hover {background-color: #111;}
a.active {background-color: #4CAF50;}
Oba selektory majú rovnakú prioritu, takže narozdiel od tvojho riešenia, poradie rozhoduje o tom, akej farby bude aktívny odkaz pri prejdení myši.

Ukážka tvojej varianty, kde na poradí zápisov nezáleží.
Seuss
Profil *
Pravděpodobně je problém v tom, že v menu je js efekt, a tak css kod mi nepomohl. Nevím jestli sem mohu dát přímo odkaz jak menu vypadá.

Nyní je vlastně menu takové, že po najetí myši se daný odkaz přebarví js effectem. Bez najetí myši vypadá menu jako na obrázku jedna.

Tomáš123
Profil
Seuss:
Nevím jestli sem mohu dát přímo odkaz jak menu vypadá.
To určite môžeš.

Nyní je vlastně menu takové, že po najetí myši se daný odkaz přebarví js effectem.
A aký je teda problém? Že znovu prebehne animácia? JavaScriptom vieš zistiť, či daná položka má priradenú triedu active a animáciu v takom prípade nevykonať.
Seuss
Profil *
Chtěl bych aby menu vypadalo jako na druhém obrázku při aktivní stránce. www.unturnia.cz
Tomáš123
Profil
Seuss:
Nuž, možno nejako takto. Táto ukážka ale nie je kompatibilná s tvojim menu; na animáciu však nepotrebuje JavaScript.

Po nájdení myši sa v tvojom prípade prostredníctvom deklarácie transform: translate(0px, 40px); vykoná posun (ktorý je niekde nejako animovaný). Môžeš túto deklaráciu pripísať aj pod aktívne odkazy.

Vychádzajúc z kódu, zápis by vyzeral takto: a.active .mm-container {transform: translate(0px, 40px);}. Priraďovanie triedy active však v kóde ešte nie je implementované.
Seuss
Profil *
nějak nechápu toto: a.active .mm-container {transform: translate(0px, 40px);}

jinak jsem zkusil ten kod výše a přikládám ukázku: unturnia.cz/servery
Tomáš123
Profil
Seuss:
Je to pravidlo, ktoré by malo vyhovovať kódu, s ktorým pracuje prehliadač. JavaScript totiž kód modifikuje, takže to s čím sa pracuje nevyzerá tak, ako to, čo si sem vložil v [#1] príspevku.

Výslednú podobu kódu po zásahu JavaScriptu môžeš vidieť v nástrojoch pre vývojárov (väčšinou dostupnú pod klávesovou skratkou Ctrl+Shift+I, alebo tlačidlom F12).

jinak jsem zkusil ten kod výše a přikládám ukázku
Áno, o nekompatibilite som písal. Buď odstrániš JavaScript alebo moje riešenie. V prípade kombinácie sa posun vykoná dvakrát.

Odporúčal by som ti sa v tomto prípade JavaScriptu vyhnúť.
Seuss
Profil *
Když jsem odstranil JavaScript, animace zmizela a ani "active" class nefunguje. Pokud tomu rozumím správně, tak musím upravit js soubor a nikoli css, aby se zobrazila aktivní stránka spolu s animacemi ostatních záložek?
Tomáš123
Profil
Seuss:
Ak pri súčasnom ostrom stave na koniec CSS súboru pridáš pravidlo a.active .mm-container {transform: translate(0px, 40px) !important;} (minule som na ten !important zabudol, pardón) a spojazdníš si priraďovanie triedy active, malo by ti všetko fungovať.

Druhou cestou je upraviť menu tak, aby pre svoju funkčnosť nepotrebovalo JavaScript. To je načrtnuté v ukážke v príspevku [#6]. Je to cesta väčšieho množstva práce a ladenia s lepšou podporou funkčnosti efektu prejdenia myši (ktorý ale v starších prehliadačoch samozrejme nebude animovaný). Je na tebe ktorou z nich sa vydáš...
Seuss
Profil *
Jo, super. Díky moc za pomoc, už to funguje tak jak má.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: