Rozwijalne menu w css

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/

Leave a reply

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

This site uses Akismet to reduce spam. Learn how your comment data is processed.