Jak zrobić MENU w CSS?

Jak zrobić MENU w CSS?

Jak zrobić MENU w CSS?

W dzisiejszym artykule opiszę coś, co jeszcze kilka lat temu było nie możliwe bez użycia JavaScript.
Jak zrobić nawigację na stronę z użycie HTML i CSS?
Nie będzie to jednak zwykła nawigacje.
Pokażę Ci jak zrobić menu w CSS z użyciem animacji i z 3 poziomowym zagnieżdżeniem (rozwijane).
Tutaj demo tego, co zrobimy : ).

Nie ma co podłużać. Stwórzmy strukturę HTML:

<!DOCTYPE HTML>
<html lang="pl">
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" href="menu.css" />
        <title>Jak zrobić MENU w CSS?</title>
    </head>
    <body>

        <nav id="nav">
        
            <ul id="menu">
                <li><a href="#">start</a></li>
                <li><a href="#">promocje</a>
                    <ul>
                        <li><a href="#">dla klubowiczów</a></li>
                        <li><a href="#">ostatnie 24h</a></li>
                        <li><a href="#">GRATIS</a></li>
                    </ul>
                </li>
                <li><a href="#">kategorie</a>
                    <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">PHP</a></li>
                        <li><a href="#">CMS</a>
                            <ul>
                                <li><a href="#">WordPress</a></li>
                                <li><a href="#">Joomla</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Java Script</a>
                            <ul>
                                <li><a href="#">jQuery</a></li>
                                <li><a href="#">AJAX</a></li>
                            </ul>
                        </li>
                        <li><a href="#">My SQL</a></li>
                        <li><a href="#">Grafika</a></li>
                        <li><a href="#">Zabezpieczenia</a></li>
                    </ul>
                </li>
                <li><a href="#">kontakt</a></li>
            </ul>
            
        </nav>
    
</body>
</html>

A tak nawigacja wygląda z domyślnymi stylami CSS:

Jak zrobić MENU w CSS?

Teraz style CSS, które nadadzą zamierzony efekt wizualny.

Zacznijmy od CSS dla NAV, proste kosmetyczne style, które ustawiają margines górny, prawy, lewy na automatyczny i szerokość menu.

#nav
 {
     width:80%;
     margin:0 auto;
     margin-top:100px;
 }

Wyrównajmy wszystkie pozycję w menu do lewej strony, zamiast jedna pod drugą, jak ma to miejsce obecnie.

Dla wszystkich elementów listy li, których rodzicem jest ul ustawiamy opływanie z lewej strony:

ul > li
{
   
    float: left;
}

Pozostałe style dla tego fragmentu, to wyzerowany margines, pozycja relatywna, dzięki temu będziemy mogli przesuwać element w dowolne miejsce.
W naszym przypadku rozwijane pod-menu, i wysokość danego elementu li na np. 30px.

Cały styl CSS dla ul > li:

ul > li
{
    float: left;
    margin: 0;
    position: relative;
    height: 30px;
}

Następnie napiszmy te style, które odpowiadają za rozwijane pod-menu. Ustawmy mu pozycję absolutną, co spowoduje wyciągnięcie elementu z normalnego menu i pozwoli nam ustawić go tak jak chcemy. A zrobimy to używając stylów top i left ustawiając pierwszy na 0, drugi na 30px, wyzerujmy jeszcze margines wewnętrzny (padding) .

ul > li ul 
{
     padding: 0;
     left: 0px; 
     top: 30px;
     position: absolute; 
}

Pozostało nam ukryć pod-menu do czasu, aż zostanie najechane myszką. Proponuje zrobić to właściwością visibility z wartością hidden.
Moglibyśmy też użyć display:none; – ale to może nie działać poprawnie w IE. Przyda się też nadanie odpowiedniej szerokości i wyrównanie tekstu do lewej krawędzi. Damy jeszcze białe tło i szare obramowanie, żeby wyróżnić nasze rozwijane menu.

ul > li ul 
{
     visibility: hidden; 
     width: 160px; 
     text-align: left;
     background-color: #fff;
     border: 1px solid #666;
}

Czas na style CSS odpowiedzialne za animacje pod-menu. Za ten  efekt będzie odpowiedzialna właściwość transform: z wartością scaleY(0);
Funkcja scaleY() jako argument (arg) przyjmuje liczbę od 0 do 1 gdzie 0 oznacza całkowite zmniejszenie elementu, a 1 pełną jego wysokość.
Żeby działało nie tylko w Firefox musimy dodać przedrostek webkit. Określmy jeszcze czas wysuwania elementu (w milisekundach)  transition: 200ms wydłuża czas wysuwania elementu o 2 sekundy.
Za pomocą transform-origin będziemy musieli przesunąć na środek górnej krawędzi (50% 0): transform-origin: 50% 0;.

Cały kod pod-menu:

ul > li ul 
{
     padding: 0;
     left: 0px; 
     top: 30px;
     position: absolute; 
     visibility: hidden; 
     width: 160px; 
     text-align: left;
     background-color: #fff;
     border: 1px solid #666;
     transform: scaleY(0);
     -webkit-transform: scaleY(0);
     transform-origin: 50% 0;
    -webkit-transform-origin: 50% 0;
     transition: 200ms;
}

Teraz przesunąć  nasze pod-menu 3 stopnia czyli ul li ul li ul tak, aby obok zmieściła się rozwinięta lista 2 stopnia (ul li ul):

ul > li ul ul
{
    left:160px;
    top: -1px;
}
ul > li ul li 
{
     margin: 0; 
     padding: 0;
     position: relative; 
     float: none; 
     height: auto;
}

I analogicznie pozostałe style dla listy 3 stopnia zagnieżdżenia.

Przejdźmy do linków czyli elementów a:

ul > li ul li a 
{
     padding: 10px 20px; 
     color: #505050; 
     text-decoration: none;
     display: block;
}
ul > li > a
{
    color: #505050;
    text-decoration: none;
    padding: 15px;
}

Margines wewnętrzny z góry i dołu 10px, z lewej i prawej 20px. Kolor tekstu.  Wyłączenie podkreślenia pod tekstem. Pokazywanie rozwijanej listy po najechaniu myszką.

Ostatnie co nam pozostało to wyłączyć style listy (kropki) i zaprogramować co ma się stać po najechaniu myszką.

li
{
    list-style: none;
}
ul li:hover > ul
{
     visibility: visible;
     transform: scaleY(1);
}
ul > li > a:hover, ul > li:hover > a
{
    color:#5288ca;
    border-top: 5px #315b9d solid;
}

Tak prezentuje się nasze menu.

A tu cały kod CSS:

#nav
{
    width:80%;
    margin:0 auto;
    margin-top:100px;
}
ul > li
{
    float: left;
    margin: 0;
    position: relative;
    height: 30px;
}  
ul > li ul 
{
     padding: 0;
     left: 0px; 
     top: 30px;
     position: absolute; 
     visibility: hidden; 
     width: 160px; 
     text-align: left;
     background-color: #fff;
     border: 1px solid #666;
     transform: scaleY(0); 
     -webkit-transform: scaleY(0);
     transform-origin: 50% 0;
    -webkit-transform-origin: 50% 0;
     transition: 200ms;
}
ul > li ul ul
{
    left:160px;
    top: -1px;
}
ul > li ul li 
{
     margin: 0; 
     padding: 0;
     position: relative; 
     float: none; 
     height: auto;
}
ul > li ul li a 
{
     padding: 10px 20px; 
     color: #505050; 
     text-decoration: none;
     display: block;
}
ul > li > a
{
    color: #505050;
    text-decoration: none;
    padding: 15px;
}
li
{
    list-style: none;
}
ul li:hover > ul
{
     visibility: visible;
     transform: scaleY(1);
}
ul > li > a:hover, ul > li:hover > a
{
   color:#5288ca;
    border-top: 5px #315b9d solid;
}

Mam nadzieję, że ten wpis był pomocny i  już wiesz jak zrobić MENU w CSS .

2 thoughts on “Jak zrobić MENU w CSS?

Dodaj komentarz

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