Autor Zpráva
WencaTv
Profil
Zdravím, mam vytvořené horizontální menu a rád bych si k tomu dodal vysouvací efekt. Mám na mysli efekt, kdy najedu na jednu položku navigace a jakmile na ni najedu vysune se mi "podokno" kde budou články, které se vztahuje k položce. příklad je např. zde, kde ale není horizontální menu. Rád bych od vás radu, jak to zakomponovat do mého kódu.
CSS
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #22c398;
}

}   
* {box-sizing:border-box}
body {
    font-family: Verdana ;
    sans-serif;
    margin:0
}

HTML
<ul>
  <li><a class="active" href="Index.HTML">Home</a></li>
  <li><a href="#news">Vodní dýmka</a></li>
  <li><a href="#contact">Rubrika tipů</a></li>
  <li><a href="#about">Kontakt</a></li>
</ul>
Tomáš123
Profil
WencaTv:
Ako je vysvetlené v článku, postata spočíva v zmene displayu (alebo iných vlastností – visibility, height, width, ...). Ukážka základného princípu. Pripravil som aj upravenú funkčnú ukážku tvojho kódu, ale chcem, aby si si to najprv vyskúšal sám.

Pripomienky ku kódu:
– pseudotrieda :not je pomerne nová a nepodporovaná, použi radšej jednoduchšiu alternatívu
– URL adresy sú citlivé na nerovnakú veľkosť písmen v ich zápise; pozor na odkaz Index.HTML

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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