Jak utworzyć rozwijane menu HTML i podmenu

Krok 2
Dodaj swoje podmenu jako nową nieuporządkowaną listę zagnieżdżoną w tagach „

Krok 3
Otwórz arkusz stylów i styluj menu za pomocą CSS. Usuń zarówno pociski, jak i lewe wcięcie: #menu {list-style: none; wypełnienie: 0; } Zauważ, że „#menu” odpowiada nazwie ID przykładowego kodu HTML.

Krok 4
Dodaj kolor tła do paska menu: #menu {list-style: none; wypełnienie: 0; kolor tła: ciemny niebieski; }

Krok 5
Przesuń elementy menu w lewo, aby ustawiły się poziomo na pasku menu: #menu li {float: left; }

Krok 6
Styluj linki, które tworzą elementy menu. Dodaj dopełnienie do linków, aby ustawić je w pionie na pasku menu, jednocześnie ułatwiając ich kliknięcie i zatrzymanie. Musisz zmienić właściwość „display” na „block”, aby dodać dopełnienie do linków: #menu li a {display: block; padding: 8px 15px; wyrównanie tekstu: środek; kolor biały; waga czcionki: pogrubiona; dekoracja tekstowa: brak; } Zauważ, że w „dopełnieniu” ustawiono dwie wartości. Pierwszą wartością jest wypełnienie pionowe, podczas gdy drugie powoduje wypełnienie poziome.

Krok 7
Styluj podmenu i jego elementy. Najpierw musisz ustawić podmenu. Usuń także pociski i dopełnienie z podmenu: #menu ul {position: absolute; styl listy: brak; wypełnienie: 0; }

Krok 8
Usuń lewe pływaki z pozycji w podmenu: #menu ul li {clear: left; }

Krok 9
Dodaj „dsiplay: none” do reguły „#menu ul”, aby wyłączyć podmenu, ponieważ nie chcesz, aby pojawiło się, dopóki użytkownik nie ustawi się nad swoim elementem nadrzędnym. Powtórz menu, używając tego kodu: #menu li: hover ul {dipslay: block; }
Dodaj regułę „clear fix” do div: .clearfix {clear: both; }

Wskazówki
Dodaj podświetlanie do pozycji menu, gdy użytkownik na nich umieści. Reguła stylu, aby zmienić kolor tła łącza zawieszonego, wygląda jak „#menu a: hover {}”.
Kiedy skończysz budować menu za pomocą HTML i CSS, możesz dodać wtyczkę jQuery, aby tworzyć ładne animacje dla list rozwijanych.


URL:https://pl.whycomputer.com/oprogramowanie/100307813.html