Diskuze: Dropdown který se nezabalí

HTML a CSS HTML a CSS Dropdown který se nezabalí American English version English version

Avatar
wolfsharp666
Člen
Avatar
wolfsharp666:

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. března 11:38
Avatar
Tomáš123
Člen
Avatar
Odpovídá na wolfsharp666
Tomáš123:

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  -2 12. března 15:34
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na wolfsharp666
Honza Bittner:

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. března 20:50
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Honza Bittner
Tomáš123:

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. března 21:43
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Tomáš123
Honza Bittner:

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

Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
Nahoru Odpovědět  +2 12. března 23:35
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Tomáš123
Člen
Avatar
Tomáš123:

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. března 13:22
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
wolfsharp666
Člen
Avatar
wolfsharp666:

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

 
Nahoru Odpovědět 14. března 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.