Menu poziome z rozwijaną listą w HTML-u

Stronę tą wyświetlono już: 4092 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:

Listing 1
  1. <nav><ul><li><a href="Strona_domowa">Home</a></li><li><a href="Matematyka" >Matematyka</a>
  2. <ol>
  3. <li><a href="Matematyka Zagadnienia_ogolne" >Matematyka &rarr; Zagadnienia ogólne</a></li>
  4. <li><a href="Matematyka Funkcje" >Matematyka &rarr; Funkcje</a></li>
  5. <li><a href="Matematyka Rownania_liniowe" >Matematyka &rarr; Równania liniowe</a></li>
  6. <li><a href="Matematyka Kombinatoryka" >Matematyka &rarr; Kombinatoryka</a></li>
  7. <li><a href="Matematyka Prawdopodobienstwo" >Matematyka &rarr; Prawdopodobieństwo</a></li>
  8. <li><a href="Matematyka Pochodna_funkcji" >Matematyka &rarr; Pochodna funkcji</a></li>
  9. <li><a href="Matematyka Calki_nieoznaczone" >Matematyka &rarr; Całki nieoznaczone</a></li>
  10. <li><a href="Matematyka Calki_oznaczone" >Matematyka &rarr; Całki oznaczone</a></li>
  11. <li><a href="Matematyka Wektory" >Matematyka &rarr; Wektory</a></li>
  12. <li><a href="Matematyka Macierze" >Matematyka &rarr; Macierze</a></li>
  13. <li><a href="Matematyka Geometria" >Matematyka &rarr; Geometria</a></li>
  14. </ol>
  15. </li><li><a href="Fizyka" >Fizyka</a>
  16. <ol>
  17. <li><a href="Fizyka Kinematyka" >Fizyka &rarr; Kinematyka</a></li>
  18. <li><a href="Fizyka Dynamika" >Fizyka &rarr; Dynamika</a></li>
  19. </ol>
  20. </li><li><a href="Mechanika_techniczna" >Mechanika</a>
  21. <ol>
  22. <li><a href="Mechanika_techniczna Statyka" >Mechanika techniczna &rarr; Statyka</a></li>
  23. <li><a href="Mechanika_techniczna Wytrzymalosc_materialow" >Mechanika techniczna &rarr; Wytrzymałość materiałów</a></li>
  24. <li><a href="Mechanika_techniczna Dynamika" >Mechanika techniczna &rarr; Dynamika</a></li>
  25. </ol>
  26. </li><li><a href="Metrologia" >Metrologia</a>
  27. <ol>
  28. <li><a href="Metrologia Bledy_pomiarowe" >Metrologia &rarr; Błędy pomiarowe</a></li>
  29. <li><a href="Metrologia Metody_pomiaru" >Metrologia &rarr; Metody pomiaru</a></li>
  30. <li><a href="Metrologia Przyrzady_pomiarowe" >Metrologia &rarr; Przyrządy pomiarowe</a></li>
  31. </ol>
  32. </li><li><a href="Programowanie" >Programowanie</a>
  33. <ol>
  34. <li><a href="Programowanie Projekty_Cpp" >Programowanie &rarr; Projekty C++</a></li>
  35. <li><a href="Programowanie Podstawy_Cpp" >Programowanie &rarr; Podstawy C++</a></li>
  36. <li><a href="Programowanie Cpp_WinApi" >Programowanie &rarr; Cpp WinApi</a></li>
  37. <li><a href="Programowanie Projekty_Csharp" >Programowanie &rarr; Projekty C#</a></li>
  38. <li><a href="Programowanie Podstawy_Csharp" >Programowanie &rarr; Podstawy C#</a></li>
  39. <li><a href="Programowanie Csharp_Api" >Programowanie &rarr; C# Api</a></li>
  40. <li><a href="Programowanie Projekty_Python" >Programowanie &rarr; Projekty Python</a></li>
  41. <li><a href="Programowanie Podstawy_Pythona" >Programowanie &rarr; Podstawy Pythona</a></li>
  42. <li><a href="Programowanie Python_-_tkinter" >Programowanie &rarr; Python - tkinter</a></li>
  43. <li><a href="Programowanie Skrypty_PHP" >Programowanie &rarr; Skrypty PHP</a></li>
  44. <li><a href="Programowanie PHP_-_podstawy" >Programowanie &rarr; PHP - podstawy</a></li>
  45. <li><a href="Programowanie Podstawy_SQL-a" >Programowanie &rarr; Podstawy SQL-a</a></li>
  46. <li><a href="Programowanie Projekty_VB_i_VBA" >Programowanie &rarr; Projekty VB i VBA</a></li>
  47. <li><a href="Programowanie OpenOffice_BASIC" >Programowanie &rarr; OpenOffice BASIC</a></li>
  48. <li><a href="Programowanie Skrypty_BASH" >Programowanie &rarr; Skrypty BASH</a></li>
  49. <li><a href="Programowanie Podstawy_HTML-a" >Programowanie &rarr; Podstawy HTML-a</a></li>
  50. <li><a href="Programowanie Algorytmy_obliczeniowe" >Programowanie &rarr; Algorytmy obliczeniowe</a></li>
  51. </ol>
  52. </li><li><a href="Geometria_wykreslna" >Geometria</a>
  53. <ol>
  54. <li><a href="Geometria_wykreslna Podstawowe_konstrukcje" >Geometria wykreślna &rarr; Podstawowe konstrukcje</a></li>
  55. <li><a href="Geometria_wykreslna Rzuty_Monge'a" >Geometria wykreślna &rarr; Rzuty Monge'a</a></li>
  56. <li><a href="Geometria_wykreslna Aksonometria" >Geometria wykreślna &rarr; Aksonometria</a></li>
  57. <li><a href="Geometria_wykreslna Perspektywa" >Geometria wykreślna &rarr; Perspektywa</a></li>
  58. <li><a href="Geometria_wykreslna Rysunek_techniczny" >Geometria wykreślna &rarr; Rysunek techniczny</a></li>
  59. </ol>
  60. </li><li><a href="Dodatki_tabelaryczne" >Dodatki</a>
  61. <ol>
  62. <li><a href="Geometria_wykreslna Podstawowe_konstrukcje" >Geometria wykreślna &rarr; Podstawowe konstrukcje</a></li>
  63. <li><a href="Dodatki_tabelaryczne Dodatki_tabelaryczne Symbole_matematyczne" >Dodatki tabelaryczne &rarr; Symbole matematyczne</a></li>
  64. <li><a href="Dodatki_tabelaryczne Dodatki_tabelaryczne Stale_matematyczne_i_fizyczne" >Dodatki tabelaryczne &rarr; Stałe matematyczne i fizyczne</a></li>
  65. <li><a href="Dodatki_tabelaryczne Dodatki_tabelaryczne Podstawowe_i_uzupelniajace_jednostki_ukladu_SI" >Dodatki tabelaryczne &rarr; Podstawowe i uzupełniające jednostki układu SI</a></li>
  66. <li><a href="Dodatki_tabelaryczne Dodatki_tabelaryczne Przedrostki_ukladu_SI" >Dodatki tabelaryczne &rarr; Przedrostki układu SI</a></li>
  67. </ol>
  68. </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:

Listing 2
  1. /* style dla znacznika blokowego nav */
  2. nav{
  3. background: #a4cfda; /* tło */
  4. padding: 2px 0px 2px 0px; /* odsunięcie */
  5. margin: 0px; /* margines */
  6. text-align: center; /* wyrównanie zawartości */
  7. }
  8. /* style dla elementu ul znajdującego się wewnątrz nav */
  9. nav ul{
  10. padding: 0px; /* odsunięcie na 0 */
  11. margin: 0px; /* marginesy na 0 */
  12. }
  13. /* style dla pierwszego potomka ul będącego znacznikiem li i znajdującego się wewnątrz nav */
  14. nav ul > li{
  15. list-style-type: none; /* wyłączenie wyświetlania znaczników */
  16. display: inline-block; /* wyświetlanie jako element inline-block */
  17. padding: 5px; /* odsunięcie */
  18. }
  19. /* style dla znacznika a dla zdarzenia najechania kursorem myszy */
  20. menu ul > li > a:hover{
  21. background: #b4e3f0; /* kolor tła */
  22. }
  23. /* formatowanie linków dla znacznika ul */
  24. nav ul > li > a{
  25. border-radius: 10px; /* promień obramowania */
  26. background: #afdde9; /* kolor tła */
  27. width: 120px; /* szerokość */
  28. height: 32px; /* wysokość */
  29. text-align: center; /* wyśrodkowanie tekstu */
  30. display: inline-block; /* wyświetlanie jako element inline-block */
  31. padding-top: 10px; /* odsunięcie górne */
  32. text-decoration: none; /* wyłączenie dekoracji */
  33. font-weight: bold; /* ustawienie pogrubienia czcionki */
  34. text-shadow: 1px 1px 2px #000000; /* dodanie cienia: przesunięcie na x, przesunięcie na y, rozmycie, kolor */
  35. color: white; /* kolor czcionki */
  36. }
  37. /* formatowanie elementów ol */
  38. nav ul > li > ol{
  39. 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 */
  40. list-style-type: none; /* wyłączenie wyświetlania numeracji */
  41. padding: 0px; /* odsunięcie na 0 */
  42. margin: 5px 0px 0px 0px; /* margines górny na 5px reszta 0 */
  43. display: none; /* domyślnie nie wyświetlaj */
  44. position:absolute; /* położenie absolutne, żeby element nie wpływał na rozmieszczenie pozostałych elementów strony gdy jest wyświetlany */
  45. text-align: left; /* wyrównanie tekstu do lewej */
  46. }
  47. /* style dla ol gdy kursor myszy znajdzie się nad znacznikiem li elementu ul */
  48. nav ul > li:hover > ol{
  49. display: block; /* włączaj wyświetlanie elementu jako blokowy */
  50. background: #afdde9; /* kolor tła elementu */
  51. }
  52. /* style dla znacznika li będącego potomkiem ol */
  53. nav ul > li > ol > li{
  54. padding: 5px; /* odsunięcie z wszystkich stron o 5px */
  55. border-bottom: 1px solid #77979f; /* ramka u dołu szerokości 1px linią ciągłą i podanym kolorem */
  56. }
  57. /* formatowanie linków dla znacznika ol */
  58. menu ul > li > ol > li a{
  59. text-decoration: none; /* wyłączenie dekoracji tekstu */
  60. color: #77979f; /* kolor tekstu */
  61. }
  62. /* formatowanie znaczników li będącego potomkiem ol gdy kursor myszy znajdzie się nad elementem li */
  63. nav ul > li > ol > li:hover{
  64. background: #b4e3f0; /* kolor tła */
  65. }

Wynik działania powyższego kodu:

Tematy powiązane
Propozycje książek
tytuł: HTML i CSS. Zaprojektuj i zbuduj witrynę WWW. Podręcznik Front-End Developera autor: Jon Duckett

Tytuł:

HTML i CSS. Zaprojektuj i zbuduj witrynę WWW. Podręcznik Front-End Developera

Autor:

Jon Duckett

Komentarze