FINÁLNÍ VÝPRODEJ KREDITŮ na ITnetwork je tady. Využij poslední šanci a získej až 80 % extra kreditů ZDARMA na náš interaktivní e-learning. Zjisti více:
NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
wolfsharp666
Člen
Avatar
wolfsharp666:10.3.2016 11:38

Zdravím, mám na své stránce dropdown menu které funguje krásně na hover, ale nedalo by se nějak udělat aby mi menu po kliknutí na odkaz zůstalo rozbalené a nezabalovalo zpět ?

Kod CSS:

.dropbtn {
    margin-top: 1%;
    background-color: #A60800;
    color: white;
    padding: 15px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    z-index: 1;
    margin-left: 5px;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #A60800;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {background-color: #FF0000}
.dropdown:hover .dropdown-content {
    display: block;
}

Kod HTML:

<div class="center">
  <div class="menu">

  <a href="cz.html"><button class="dropbtn">Tady jsme</button></a>
  <a href="novinky.html"><button class="dropbtn">Novinky</button></a>
  <div class="dropdown"><button class="dropbtn">Autodíly</button>
        <div class="dropdown-content">
        <a href="autodily.html">Akce</a>
            <a href="kola.html">Kola</a>
            <a href="pneucz.html">Pneu Syron</a>
            <a href="kingcz.html">Pneu King Meiler</a>
        <a href="exterier.html">Exteriér</a>
        <a href="interier.html">Interiér</a>
        <a href="vyfuk.html">Výfuk</a>
        <a href="pruzina.html">Pruziny</a>
        <a href="bodykitcz.html">Body kits</a>
        <a href="motorcz.html">Tuning Motoru</a>
        </div></div>
  <a href="autobazar.html"><button class="dropbtn">Autobazar</button></a>
  <a href="partnercz.html"><button class="dropbtn">Partneři</button></a>
  <a href="sponsoringcz.html"><button class="dropbtn">Sponsoring</button></a>
  <a href="kontaktcz.html"><button class="dropbtn">Kontakt</button></a>

  </div>
  </div>
 
Odpovědět
10.3.2016 11:38
Avatar
Tomáš123
Člen
Avatar
Odpovídá na wolfsharp666
Tomáš123:12.3.2016 15:34

Skôr nie.

Potreboval by si na serveri detekovať na čo sa kliklo a podľa toho nastaviť nadradenej položke triedu, ktorú by si v CSS naštýloval tak ako akciu :hover. Cieľ odkazov mi ale napovedá, že tvoj web je statický.

Ďalej by šlo uskutočňovať presmerovanie JavaScriptom a vysunutie zachovať. Alebo ešte použiť iframe na obsahovú časť.

Ak by som to chcel riešiť, tak určite na serveri. Šlo by to cez porovnávanie aktuálnej adresy a cieľu odkazu. Ak by tam bola zhoda, položka by bola aktívna.

Nahoru Odpovědět
12.3.2016 15:34
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na wolfsharp666
Honza Bittner:12.3.2016 20:50

Můžeš využít checkboxu, který odchytíš v CSS pomocí input:checked. K checkboxu si vytvoříš i label, který propojíš a checkbox samotný schováš. Dále budeš jen stylovat label.

Pokud bude checkbox šartnutý, měl by jsi změnit styly labelu nějak takto:

input:checked + label { ... }

Také můžeš využít radio butonů, pokud bys chtěl mít více stavů.

Nahoru Odpovědět
12.3.2016 20:50
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Honza Bittner
Tomáš123:12.3.2016 21:43

Pozerám, že sme problém pochopili rozlične. Nejako mi ale nejde do hlavy ako tvoje riešenie súvisí s otázkou... Pripravil by si prosím nejakú ukážku?

Samotný klik na odkaz ešte vysunuté menu neschováva (stále je splnená podmienka :hoveru). Menu sa skryje až pri prechode na ďalšiu stránku. Tam už, myslím, žiadna HTML, či CSS konštrukcia nemá dosah.

Nahoru Odpovědět
12.3.2016 21:43
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Tomáš123
Honza Bittner:12.3.2016 23:35

Podle mne chtěl udělat toto http://codepen.io/HoBi/pen/MyjeJz, wolfsharp666?

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
12.3.2016 23:35
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Tomáš123
Člen
Avatar
Tomáš123:13.3.2016 13:22

Aha, už rozumiem. Len to pácha viac škody ako úžitku. Musím odkliknúť položku, aby sa mi to menu konečne stratilo...

Ak to, wolfsharp666, chceš naozaj takto, zamysli sa, či ti to stojí za množstvo zmätených užívateľov.

Nahoru Odpovědět
13.3.2016 13:22
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
wolfsharp666
Člen
Avatar
wolfsharp666:14.3.2016 9:11

Přesně podle checkboxu děkuji moc za rady, pustim se do toho :)

 
Nahoru Odpovědět
14.3.2016 9:11
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 7 zpráv z 7.