| Autor | Zpráva | ||
|---|---|---|---|
| WencaTv Profil |
#1 · Zasláno: 20. 3. 2016, 12:01:54
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 |
#2 · Zasláno: 20. 3. 2016, 14:25:28
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
|
||
|
Časová prodleva: 8 let
|
|||
0