Menu pionowe z pojawiającą się listą w HTML-u
Stronę tą wyświetlono już: 1058 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:
- <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>
Jedynie kod CSS ulega tutaj pewnym modyfikacjom:
- /* style dla znacznika nav */
- nav{
- background: #a4cfda; /* kolor tła */
- padding: 0; /* odsunięcie na zero */
- margin: 0px; /* marginesy na zero */
- width: 180px; /* szerokość */
- }
- /* style dla znacznika ul znajdującego się w nav */
- nav ul{
- padding: 0px; /* odsunięcie 0 */
- margin: 0px; /* marginesy 0 */
- }
- /* style dla pierwszego potomka li znacznika ul znajdującego się wewnątrz znacznika nav */
- nav ul > li{
- list-style-type: none; /* wyłączenie wyświetlania znaczników wypunktowania */
- display: block; /* wyświetlanie jako element blokowy */
- padding: 0; /* odsunięcie na zero */
- }
- /* 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 */
- nav ul > li > a:hover{
- background: #b4e3f0; /* kolor tła */
- }
- /* 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 */
- nav ul > li > a{
- background: #afdde9; /* kolor tła */
- width: 150px; /* szerokość */
- text-align: left; /* wyrównanie */
- display: inline-block; /* wyświetlanie jako element liniowy blokowy */
- padding: 10px; /* odsunięcie z wszystkich stron na 10px */
- text-decoration: none; /* wyłączenie domyślnej dekoracji tekstu */
- font-weight: bold; /* pogrubienie tekstu */
- text-shadow: 1px 1px 2px #000000; /* cień tekstu: odsunięcie na x, odsunięcie na y, promień rozmycia, kolor */
- color: white; /* kolor czcionki */
- }
- /* style dla elementu ol będącego pierwszym potomkiem li będącego pierwszym potomkiem ul znajdującego się w nav */
- nav ul > li > ol{
- 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 */
- list-style-type: none; /* wyłączenie wyświetlania numeracji */
- padding: 0; /* wyzerowanie odsunięcia */
- margin: 0; /* wyzerowanie marginesów */
- display: none; /* wyłączenie wyświetlania elementu */
- position:absolute; /* oderwanie elementu od reszty strony, by jego pojawienie nie wpływało na układ strony */
- text-align: left; /* wyrównanie tekstu do lewej */
- }
- /* 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 */
- nav ul > li:hover > ol{
- display: inline-block; /* wyświetl jako obiekt blokowy liniowy */
- background: #afdde9; /* kolor tła */
- }
- /* 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 */
- nav ul > li > ol > li{
- border-bottom: 1px solid #77979f; /* ramka u dołu: szerokość, styl linii (ciągły), kolor */
- }
- /* 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 */
- menu ul > li > ol > li a{
- padding: 10px; /* odsunięcie na 10px */
- text-decoration: none; /* wyłączenie dekoracji tekstu */
- color: #77979f; /* kolor tekstu */
- display: block; /* wyświetlaj jako element blokowy */
- }
- /* 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 */
- nav ul > li > ol > li:hover{
- background: #b4e3f0; /* kolor tła */
- }
Rezultat końcowy działania powyższego kodu: