Menu pionowe z pojawiającą się listą w HTML-u

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

Menu pionowe można zbudować w podobny sposób co poziome opisane na stronie tutaj, ponieważ główny kod HTML-a nie ulega tutaj zmianie:

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>

Jedynie kod CSS ulega tutaj pewnym modyfikacjom:

Listing 2
  1. /* style dla znacznika nav */
  2. nav{
  3. background: #a4cfda; /* kolor tła */
  4. padding: 0; /* odsunięcie na zero */
  5. margin: 0px; /* marginesy na zero */
  6. width: 180px; /* szerokość */
  7. }
  8. /* style dla znacznika ul znajdującego się w nav */
  9. nav ul{
  10. padding: 0px; /* odsunięcie 0 */
  11. margin: 0px; /* marginesy 0 */
  12. }
  13. /* style dla pierwszego potomka li znacznika ul znajdującego się wewnątrz znacznika nav */
  14. nav ul > li{
  15. list-style-type: none; /* wyłączenie wyświetlania znaczników wypunktowania */
  16. display: block; /* wyświetlanie jako element blokowy */
  17. padding: 0; /* odsunięcie na zero */
  18. }
  19. /* style dla linku gdy kursor myszy znajdzie się nad nim - znacznik linku musi być pierwszym potomkiem znacznika li będącym pierwszym potomkiem znacznika ul znajdującego się wewnątrz znacznika nav */
  20. nav ul > li > a:hover{
  21. background: #b4e3f0; /* kolor tła */
  22. }
  23. /* style dla znacznika linku będącego pierwszym potomkiem znacznika li będącym pierwszym potomkiem znacznika ul znajdującego się wewnątrz znacznika nav */
  24. nav ul > li > a{
  25. background: #afdde9; /* kolor tła */
  26. width: 150px; /* szerokość */
  27. text-align: left; /* wyrównanie */
  28. display: inline-block; /* wyświetlanie jako element liniowy blokowy */
  29. padding: 10px; /* odsunięcie z wszystkich stron na 10px */
  30. text-decoration: none; /* wyłączenie domyślnej dekoracji tekstu */
  31. font-weight: bold; /* pogrubienie tekstu */
  32. text-shadow: 1px 1px 2px #000000; /* cień tekstu: odsunięcie na x, odsunięcie na y, promień rozmycia, kolor */
  33. color: white; /* kolor czcionki */
  34. }
  35. /* style dla elementu ol będącego pierwszym potomkiem li będącego pierwszym potomkiem ul znajdującego się w nav */
  36. nav ul > li > ol{
  37. z-index: 1000; /* określa kolejność wyświetlania elementów (im wyższa liczba tym bardziej na wierzchu będzie dany element, a ponieważ menu powinno raczej na wierzchu się wyświetlać, więc dana została duża wartość by ten warunek został spełniony */
  38. list-style-type: none; /* wyłączenie wyświetlania numeracji */
  39. padding: 0; /* wyzerowanie odsunięcia */
  40. margin: 0; /* wyzerowanie marginesów */
  41. display: none; /* wyłączenie wyświetlania elementu */
  42. position:absolute; /* oderwanie elementu od reszty strony, by jego pojawienie nie wpływało na układ strony */
  43. text-align: left; /* wyrównanie tekstu do lewej */
  44. }
  45. /* styl dla elementu ol będącego potomkiem li będącego potomkiem ul znajdującego się w nav, gdzie styl jest stosowany gdy kursor myszy znajdzie się nad elementem li */
  46. nav ul > li:hover > ol{
  47. display: inline-block; /* wyświetl jako obiekt blokowy liniowy */
  48. background: #afdde9; /* kolor tła */
  49. }
  50. /* style dla li będącego pierwszym potomkiem ol będącego pierwszym potomkiem li, będącego pierwszym potomkiem ul znajdującego się w nav */
  51. nav ul > li > ol > li{
  52. border-bottom: 1px solid #77979f; /* ramka u dołu: szerokość, styl linii (ciągły), kolor */
  53. }
  54. /* style dla znacznika linku a będącego potomikem li będącego pierwszym potomkiem ol będącego pierwszym potomkiem li, będącego pierwszym potomkiem ul znajdującego się w menu */
  55. menu ul > li > ol > li a{
  56. padding: 10px; /* odsunięcie na 10px */
  57. text-decoration: none; /* wyłączenie dekoracji tekstu */
  58. color: #77979f; /* kolor tekstu */
  59. display: block; /* wyświetlaj jako element blokowy */
  60. }
  61. /* style dla li gdy kursor znajdzie się nad nim, który jest pierwszym potomkiem ol, będący pierwszym potomkiem li, będący pierwszym potomkiem ul znajdującym się w nav */
  62. nav ul > li > ol > li:hover{
  63. background: #b4e3f0; /* kolor tła */
  64. }

Rezultat końcowy działania powyższego kodu:

Tematy powiązane

Komentarze