Samouczek: Menu w CSS - Kurs HTML i CSS

Artykuł
10/07/2011

Autor: Witold Lasik

Opublikowano: 2011-10-06

Projektując layout naszej strony WWW, musimy szczególnie skupić się na odpowiednim wyborze kolorystyki i typu struktur nawigacyjnych. Wszelkiego rodzaju menu muszą wpasować się zarówno w kompozycję strony, a jednocześnie wyróżniać się, aby odwiedzający mogli szybko wyróżnić je na tle innych struktur logicznych. Istotne jest, aby zaprojektować styl menu, który będzie jednocześnie efektowny, wyróżniający strukturę nawigacyjną na tle innych oraz zachowujący konwencje kolorystyczne, w jakich stworzono całą witrynę. W tym samouczku nauczymy się tworzyć za pomocą stylów CSS proste i efektowne struktury nawigacyjne, które uatrakcyjnią naszą witrynę przy jednoczesnym pełnieniu swoich podstawowych funkcji.

Przed wykonaniem zadań powinieneś wiedzieć:

Po wykonaniu zadań nauczysz się:

tworzyć proste, poziome menu i projektować style CSS, które będą je modyfikować,
tworzyć menu rozwijane i projektować style CSS, które będą je modyfikować,
tworzyć proste reguły CSS odnoszące się do różnych stanów pozycji menu,
dodawać reguły modyfikujące kolorystykę i styl elementów menu.

Implementacja

W kolejnych zadaniach dowiesz się, w jaki sposób szybko tworzyć struktury nawigacyjne, projektować efektowne reguły CSS, które je uatrakcyjnią. Nauczysz się również tworzyć interaktywne menu rozwijane bez użycia JavaScript.

Wynik końcowy przedstawiono na Rys. 1.

Rys. 1. Wynik końcowy zadania – menu poziome na górze strony i rozwijane w lewej części.

Przygotowanie strony internetowej

Przygotujemy szkielet strony internetowej. Jeśli będziesz miał problem z tym zadaniem, zobacz pierwszą część kursu Pierwsza strona internetowa.

Otwórz edytor HTML i utwórz szkielet strony.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Menu w CSS</title>
        <style type="text/css">
            #kontent{
                float:left; 
                margin: 20px; }
            #header_menu {
                height: 50px; 
                width: 100%;
                float: left; }
            #left_menu {
                width: 200px; 
                float: left; }
        </style>
    </head>
    <body>
    <div id="strona">
        <div id="header_menu">
        </div>
        <div id="left_menu">
        </div>
        <div id="kontent">
            Zawartość strony</div>
    </div>
    </body>
</html>

Zapisz stronę i otwórz ją w przeglądarce.

Na stronach internetowych najczęściej spotykamy poziome menu, którego elementy są wyświetlane w innym kolorze (podświetlane), gdy kursor myszki znajdzie się nad nimi. Kilka lat temu takie menu było wykonywane za pomocą tabel, dzisiaj używamy lekkiej, łatwej do rozbudowy i automatycznego tworzenia listy odnośników. Więcej o listach przeczytasz w samouczku Listy HTML, a o odnośnikach w samouczkach Odnośniki i Formatowanie odnośników.

Do strony w znaczniku div z id= header_menu dodaj:

<ul id="menu_header_list">
    <li><a href="#">Strona Główna</a></li>
    <li><a href="#">Podstrona 1</a></li>
    <li><a href="#">Podstrona 2</a></li>
    <li><a href="#">Podstrona 3</a></li>
    <li><a href="#">Podstrona 4</a></li>
</ul>

Do nagłówka strony do znacznika style dodaj:

#header_menu ul {
    display: block;
    float: left; 
    padding-left: 0;
    list-style: none; }
#header_menu li {
    float: left;
    margin-right: 5px; }
#header_menu a {
    display: block;
    padding: 3px 5px 3px 8px;
    background-color: #2e7888; }
#header_menu a:link, #header_menu a:visited {
    color: #FFF;
    text-decoration: none;
    position: relative; }
#header_menu a:hover {
    background-color: #aad3dc;
    text-decoration: none;
    color: #000;
    font-weight: bold; }

Zapisz zmiany. Odśwież stronę w przeglądarce. Sprawdź, czy strona wygląda tak, jak na Rys. 2.

Rys. 2. Menu poziome z interaktywnym podświetlaniem elementu.

Dość często spotkamy menu, w którym po najechaniu kursorem myszki rozwijane są kolejne podmenu. W większości przypadków do tego efektu wykorzystywany jest skrypt w JavaScript. Okazuje się jednak, że można go również bardzo prosto uzyskać za pomocą odpowiedniego formatowania CSS.

Do strony w znaczniku div z id= left_menu dodaj:

<div class="menu_left_list">
    <p>Menu 1</p>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
    </ul>
</div>
<div class="menu_left_list">
    <p>Menu 2</p>
    <ul>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul>
</div>

Do nagłówka strony do znacznika style dodaj:

.menu_left_list {
    width: 150px;
    border: 1px solid #D3D3D3;
    height: 40px;
    overflow: hidden;
    background-color: #2e7888;            
    color: #FFF }
.menu_left_list a {
    color: #FFF;
    text-decoration: none; }
.menu_left_list a:hover {
    background-color: #aad3dc;
    text-decoration: none;
    color: #000000;
    font-weight: bold; }
.menu_left_list li { display:block;}
.menu_left_list:hover { height: auto; }

Zapisz zmiany. Odśwież stronę w przeglądarce. Sprawdź, czy strona wygląda tak, jak na Rys. 1.

Strona końcowa

Poniżej możesz zobaczyć końcowy kod strony HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Menu w CSS</title>
    <style type="text/css">
        #kontent{
            float:left; 
            margin: 20px; }
        #header_menu {
            height: 50px; 
            width: 100%;
            float: left; }
        #left_menu {
            width: 200px; 
            float: left; }
        #header_menu ul {
            display: block;
            float: left; 
            padding-left: 0;
            list-style: none; }
        #header_menu li {
            float: left;
            margin-right: 5px; }
        #header_menu a {
            display: block;
            padding: 3px 5px 3px 8px;
            background-color: #2e7888; }
        #header_menu a:link, #header_menu a:visited {
            color: #FFF;
            text-decoration: none;
            position: relative; }
        #header_menu a:hover {
            background-color: #aad3dc;
            text-decoration: none;
            color: #000;
            font-weight: bold; }
        .menu_left_list {
            width: 150px;
            border: 1px solid #D3D3D3;
            height: 40px;
            overflow: hidden;
            background-color: #2e7888;            
            color: #FFF }
        .menu_left_list a {
            color: #FFF;
            text-decoration: none; }
        .menu_left_list a:hover {
            background-color: #aad3dc;
            text-decoration: none;
            color: #000000;
            font-weight: bold; }
        .menu_left_list li { display:block;}
        .menu_left_list:hover { height: auto; }

    </style>
</head>
<body>
    <div id="strona">
        <div id="header_menu">
            <ul id="menu_header_list">
                <li><a href="#">Strona Główna</a></li>
                <li><a href="#">Podstrona 1</a></li>
                <li><a href="#">Podstrona 2</a></li>
                <li><a href="#">Podstrona 3</a></li>
                <li><a href="#">Podstrona 4</a></li>
            </ul>
        </div>
        <div id="left_menu">
            <div class="menu_side">
                <p>
                    Menu 1</p>
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                </ul>
            </div>
            <div class="menu_side">
                <p>
                    Menu 2</p>
                <ul>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                    <li><a href="#">Link 5</a></li>
                </ul>
            </div>
        </div>
        <div id="kontent">
            Zawartość strony</div>
    </div>
</body>
</html>

Podsumowanie

W tym samouczku nauczyliśmy się tworzyć różne typy struktur nawigacyjnych. Dodatkowo poznaliśmy możliwości stylów CSS w zakresie modyfikacji i dostosowywania ich wyglądu do tematyki pozostałej części witryny. Przedstawione zostały różne zestawienia kolorystyczne, wyróżniające menu, a zarazem podkreślające jego charakter i rolę. Zaprezentowane zostały różne typy menu, umożliwiające optymalne dopasowanie obszaru struktury nawigacyjnej w obrębie dostępnej przestrzeni. Opierając się o treść tego samouczka, możemy rozpocząć projektowanie kluczowego elementu strony WWW, jakim jest blok nawigacyjny.

W kolejnym samouczku nauczymy się jak tworzyć formularze w HTML.

Dodatkowo zobacz:

Samouczek: Menu w CSS - Kurs HTML i CSS

Autor: Witold Lasik

Implementacja

Przygotowanie strony internetowej

Proste menu

Menu rozwijane

Strona końcowa

Podsumowanie

Dodatkowe zasoby