| Autor | Zpráva | ||
|---|---|---|---|
| Seuss Profil * |
#1 · Zasláno: 31. 12. 2016, 15:12:45
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 |
#2 · Zasláno: 31. 12. 2016, 18:27:14
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;}Ukážka tvojej varianty, kde na poradí zápisov nezáleží. |
||
| Seuss Profil * |
#3 · Zasláno: 1. 1. 2017, 15:33:22
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 |
#4 · Zasláno: 1. 1. 2017, 18:20:52
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 * |
#5 · Zasláno: 1. 1. 2017, 18:25:03
Chtěl bych aby menu vypadalo jako na druhém obrázku při aktivní stránce. www.unturnia.cz
|
||
| Tomáš123 Profil |
#6 · Zasláno: 1. 1. 2017, 19:21:45
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 * |
#7 · Zasláno: 1. 1. 2017, 23:18:07
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 |
#8 · Zasláno: 2. 1. 2017, 13:47:39
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 * |
#9 · Zasláno: 2. 1. 2017, 14:08:06
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 |
#10 · Zasláno: 2. 1. 2017, 18:19:24
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 * |
#11 · Zasláno: 2. 1. 2017, 18:46:03
Jo, super. Díky moc za pomoc, už to funguje tak jak má.
|
||
|
Časová prodleva: 7 let
|
|||
0