Menu poziome z rozwijaną listą w HTML-u

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 5873 razy

W HTML-5 do elementów nawigacji służy znacznik <nav>. W związku z tym należy z niego korzystać do oznaczenia części strony, która zawiera elementy menu. Menu można utworzyć z wykorzystaniem HTML-a i CSS-a. Część przykładowego kodu dla HTML-5 składa się z listy głównej <ul> i zagnieżdżonych wewnątrz list <ol>. Kod przykładowego menu wygląda tak:

<nav><ul><li><a href="Strona_domowa">Home</a></li><li><a href="Matematyka" >Matematyka</a> <ol> <li><a href="Matematyka Zagadnienia_ogolne" >Matematyka → Zagadnienia ogólne</a></li> <li><a href="Matematyka Funkcje" >Matematyka → Funkcje</a></li> <li><a href="Matematyka Rownania_liniowe" >Matematyka → Równania liniowe</a></li> <li><a href="Matematyka Kombinatoryka" >Matematyka → Kombinatoryka</a></li> <li><a href="Matematyka Prawdopodobienstwo" >Matematyka → Prawdopodobieństwo</a></li> <li><a href="Matematyka Pochodna_funkcji" >Matematyka → Pochodna funkcji</a></li> <li><a href="Matematyka Calki_nieoznaczone" >Matematyka → Całki nieoznaczone</a></li> <li><a href="Matematyka Calki_oznaczone" >Matematyka → Całki oznaczone</a></li> <li><a href="Matematyka Wektory" >Matematyka → Wektory</a></li> <li><a href="Matematyka Macierze" >Matematyka → Macierze</a></li> <li><a href="Matematyka Geometria" >Matematyka → Geometria</a></li> </ol> </li><li><a href="Fizyka" >Fizyka</a> <ol> <li><a href="Fizyka Kinematyka" >Fizyka → Kinematyka</a></li> <li><a href="Fizyka Dynamika" >Fizyka → Dynamika</a></li> </ol> </li><li><a href="Mechanika_techniczna" >Mechanika</a> <ol> <li><a href="Mechanika_techniczna Statyka" >Mechanika techniczna → Statyka</a></li> <li><a href="Mechanika_techniczna Wytrzymalosc_materialow" >Mechanika techniczna → Wytrzymałość materiałów</a></li> <li><a href="Mechanika_techniczna Dynamika" >Mechanika techniczna → Dynamika</a></li> </ol> </li><li><a href="Metrologia" >Metrologia</a> <ol> <li><a href="Metrologia Bledy_pomiarowe" >Metrologia → Błędy pomiarowe</a></li> <li><a href="Metrologia Metody_pomiaru" >Metrologia → Metody pomiaru</a></li> <li><a href="Metrologia Przyrzady_pomiarowe" >Metrologia → Przyrządy pomiarowe</a></li> </ol> </li><li><a href="Programowanie" >Programowanie</a> <ol> <li><a href="Programowanie Projekty_Cpp" >Programowanie → Projekty C++</a></li> <li><a href="Programowanie Podstawy_Cpp" >Programowanie → Podstawy C++</a></li> <li><a href="Programowanie Cpp_WinApi" >Programowanie → Cpp WinApi</a></li> <li><a href="Programowanie Projekty_Csharp" >Programowanie → Projekty C#</a></li> <li><a href="Programowanie Podstawy_Csharp" >Programowanie → Podstawy C#</a></li> <li><a href="Programowanie Csharp_Api" >Programowanie → C# Api</a></li> <li><a href="Programowanie Projekty_Python" >Programowanie → Projekty Python</a></li> <li><a href="Programowanie Podstawy_Pythona" >Programowanie → Podstawy Pythona</a></li> <li><a href="Programowanie Python_-_tkinter" >Programowanie → Python - tkinter</a></li> <li><a href="Programowanie Skrypty_PHP" >Programowanie → Skrypty PHP</a></li> <li><a href="Programowanie PHP_-_podstawy" >Programowanie → PHP - podstawy</a></li> <li><a href="Programowanie Podstawy_SQL-a" >Programowanie → Podstawy SQL-a</a></li> <li><a href="Programowanie Projekty_VB_i_VBA" >Programowanie → Projekty VB i VBA</a></li> <li><a href="Programowanie OpenOffice_BASIC" >Programowanie → OpenOffice BASIC</a></li> <li><a href="Programowanie Skrypty_BASH" >Programowanie → Skrypty BASH</a></li> <li><a href="Programowanie Podstawy_HTML-a" >Programowanie → Podstawy HTML-a</a></li> <li><a href="Programowanie Algorytmy_obliczeniowe" >Programowanie → Algorytmy obliczeniowe</a></li> </ol> </li><li><a href="Geometria_wykreslna" >Geometria</a> <ol> <li><a href="Geometria_wykreslna Podstawowe_konstrukcje" >Geometria wykreślna → Podstawowe konstrukcje</a></li> <li><a href="Geometria_wykreslna Rzuty_Monge'a" >Geometria wykreślna → Rzuty Monge'a</a></li> <li><a href="Geometria_wykreslna Aksonometria" >Geometria wykreślna → Aksonometria</a></li> <li><a href="Geometria_wykreslna Perspektywa" >Geometria wykreślna → Perspektywa</a></li> <li><a href="Geometria_wykreslna Rysunek_techniczny" >Geometria wykreślna → Rysunek techniczny</a></li> </ol> </li><li><a href="Dodatki_tabelaryczne" >Dodatki</a> <ol> <li><a href="Geometria_wykreslna Podstawowe_konstrukcje" >Geometria wykreślna → Podstawowe konstrukcje</a></li> <li><a href="Dodatki_tabelaryczne Dodatki_tabelaryczne Symbole_matematyczne" >Dodatki tabelaryczne → Symbole matematyczne</a></li> <li><a href="Dodatki_tabelaryczne Dodatki_tabelaryczne Stale_matematyczne_i_fizyczne" >Dodatki tabelaryczne → Stałe matematyczne i fizyczne</a></li> <li><a href="Dodatki_tabelaryczne Dodatki_tabelaryczne Podstawowe_i_uzupelniajace_jednostki_ukladu_SI" >Dodatki tabelaryczne → Podstawowe i uzupełniające jednostki układu SI</a></li> <li><a href="Dodatki_tabelaryczne Dodatki_tabelaryczne Przedrostki_ukladu_SI" >Dodatki tabelaryczne → Przedrostki układu SI</a></li> </ol> </li></ul></nav>

Powyższy kod aby działał poprawnie, wymaga jeszcze odpowiedniego ostylowania w pliku CSS. Kod niezbędnych styli wygląda następująco:

/* style dla znacznika blokowego nav */ nav{ background: #a4cfda; /* tło */ padding: 2px 0px 2px 0px; /* odsunięcie */ margin: 0px; /* margines */ text-align: center; /* wyrównanie zawartości */ } /* style dla elementu ul znajdującego się wewnątrz nav */ nav ul{ padding: 0px; /* odsunięcie na 0 */ margin: 0px; /* marginesy na 0 */ } /* style dla pierwszego potomka ul będącego znacznikiem li i znajdującego się wewnątrz nav */ nav ul > li{ list-style-type: none; /* wyłączenie wyświetlania znaczników */ display: inline-block; /* wyświetlanie jako element inline-block */ padding: 5px; /* odsunięcie */ } /* style dla znacznika a dla zdarzenia najechania kursorem myszy */ menu ul > li > a:hover{ background: #b4e3f0; /* kolor tła */ } /* formatowanie linków dla znacznika ul */ nav ul > li > a{ border-radius: 10px; /* promień obramowania */ background: #afdde9; /* kolor tła */ width: 120px; /* szerokość */ height: 32px; /* wysokość */ text-align: center; /* wyśrodkowanie tekstu */ display: inline-block; /* wyświetlanie jako element inline-block */ padding-top: 10px; /* odsunięcie górne */ text-decoration: none; /* wyłączenie dekoracji */ font-weight: bold; /* ustawienie pogrubienia czcionki */ text-shadow: 1px 1px 2px #000000; /* dodanie cienia: przesunięcie na x, przesunięcie na y, rozmycie, kolor */ color: white; /* kolor czcionki */ } /* formatowanie elementów ol */ nav ul > li > ol{ z-index: 1000; /* położenie na osi z - wpływa na to nad jakimi elementami będzie się wyświetlać podano 1000 żeby zapewnić elementowi miejsce zawsze nad innymi elementami */ list-style-type: none; /* wyłączenie wyświetlania numeracji */ padding: 0px; /* odsunięcie na 0 */ margin: 5px 0px 0px 0px; /* margines górny na 5px reszta 0 */ display: none; /* domyślnie nie wyświetlaj */ position:absolute; /* położenie absolutne, żeby element nie wpływał na rozmieszczenie pozostałych elementów strony gdy jest wyświetlany */ text-align: left; /* wyrównanie tekstu do lewej */ } /* style dla ol gdy kursor myszy znajdzie się nad znacznikiem li elementu ul */ nav ul > li:hover > ol{ display: block; /* włączaj wyświetlanie elementu jako blokowy */ background: #afdde9; /* kolor tła elementu */ } /* style dla znacznika li będącego potomkiem ol */ nav ul > li > ol > li{ padding: 5px; /* odsunięcie z wszystkich stron o 5px */ border-bottom: 1px solid #77979f; /* ramka u dołu szerokości 1px linią ciągłą i podanym kolorem */ } /* formatowanie linków dla znacznika ol */ menu ul > li > ol > li a{ text-decoration: none; /* wyłączenie dekoracji tekstu */ color: #77979f; /* kolor tekstu */ } /* formatowanie znaczników li będącego potomkiem ol gdy kursor myszy znajdzie się nad elementem li */ nav ul > li > ol > li:hover{ background: #b4e3f0; /* kolor tła */ }

Wynik działania powyższego kodu: