Rozwijalne menu, tzw. dropdown menu, na stronie www jest o tyle fajne, że oszczędza miejsce. Ja osobiście uważam to za zbędny wodotrysk i nie lubie rozwijalnego menu. Niemniej jednak jest ono elementem wielu stron www dlatego warto wiedzieć jak coś takiego zrobić. Znalazlam takie rozwiązanie na zagranicznym blogu.
Jak zrobić rozwijalne menu w html i css.
Najpierw tworzysz listę nienumerowaną z zagnieżdżonymi listami wewnątrz.
<ul id="coolMenu"> <li><a href="#">Lorem</a></li> <li><a href="#">Mauricii</a></li> <li> <a href="#">Periher</a> <ul> <li><a href="#">Hellenico</a></li> <li><a href="#">Genere</a></li> <li><a href="#">Indulgentia</a></li> </ul> </li> <li><a href="#">Tyrio</a></li> <li><a href="#">Quicumque</a></li></ul>Tak wygląda arkusz stylów, który tworzy rozwijalne menu:
#coolMenu,
#coolMenu ul { list-style: none; }
#coolMenu { float: left; }
#coolMenu > li { float: left; }
#coolMenu li a { display: block; height: 2em; line-height: 2em; padding: 0 1.5em; text-decoration: none; }
#coolMenu ul { position: absolute; display: none; z-index: 999; }
#coolMenu ul li a { width: 80px; }
#coolMenu li:hover ul { display: block; }
- Ustawiamy float:left dla menu, dla elementów listy a nie linków
- linki powinny być ustawione jako display:block
- lista zagnieżdzona powinna być ustawiona jako position:absolute i display: none aby nie była widoczna. Dodatkowo ustawiamy z-index: 999 aby submenu nie pojawiło się pod spodem innych elementów strony
- ustawiamy takie same wartości wysokości i odstępu między wierszami dla linków
- hover jest ustawiony dla elementu listy a nie linku
Style dla menu tak aby ładnie wyglądało.
/* Main menu
——————————————*/
#coolMenu {
font-family: Arial;
font-size: 12px;
background: #2f8be8;
}
#coolMenu > li > a {
color: #fff;
font-weight: bold;
}
#coolMenu > li:hover > a {
background: #f09d28;
color: #000;
}
/* Submenu
——————————————*/
#coolMenu ul {
background: #f09d28;
}
#coolMenu ul li a {
color: #000;
}
#coolMenu ul li:hover a {
background: #ffc97c;
}
Znacznik > jest to child selector czyli oznaczenie że jakiś element jest potomny wobec innego elementu.
Inne rozwiązanie zagadnienia rozwijalnego menu: http://magazynt3.pl/rozwijane-menu-w-css/
Incoming search terms:
- menu css
- menu w css
- lista zagnieżdzona
- rozwijane menu css
- poziome menu css
- css rozwijane menu poziome
- menu rozwijalne w css
- menu rozwijane boczne css
- menu rozwijane css
- a li:hover li a
Related posts:
- Sliding doors Tworzymy poziome menu tzw. sliding doors czyli rozsuwane drzwi. Jest to ciekawy motyw, który tworzy jakby zakładki, które po najechaniu...
Wpisz komentarz