Jak utworzyć menu rozwijane na HTML i CSS -

Z tego artykułu dowiesz się, jak utworzyć menu rozwijane z HTML i CSS. Drop-down menu otwiera się, gdy użytkownik przynosi do niego wskaźnik myszy - gdy menu jest otwarte, użytkownik może kliknąć jedną z opcji menu, aby przejść do odpowiedniej strony.

Kroki

jeden. Otwórz edytor tekstu. Możesz użyć zwykłego edytora tekstu, takiego jak Notatnik lub TextEdit lub bardziej funkcjonalny edytor tekstu, takich jak Notatnik++.

Notatnik ++ Najpierw Otwórz menu "Język" w górnej części okna i wybierz "HTML".

2. Wprowadź nagłówek dokumentów. Ten kod, który określa typ kodu używanego w pozostałej części dokumentu:

3. Utwórz menu rozwijane. Wprowadź następujący kod, aby ustawić rozmiar i kolor menu. Zamiast "#", wprowadź żądaną cyfrę (im większa liczba, tym większe menu). Również w wierszach "Kolor tła" i "Kolor" można zastąpić nazwę żądanego koloru lub jego kodu HTML:

.Dropbtn {Background-Color: Black-Color: White-Padding: # PX-Font-Rozmiar: # PX-Granice: None-}

cztery. Określ, że opcje będą obecne w menu. Ponieważ opcje zostaną dodane później, umieść je w menu, wprowadzając następujący kod:

.Dropdown {Pozycja: Względny wyświetlacz: Inline-Block-}

pięć. Ustaw wygląd menu rozwijanego. Poniższy kod ustawi rozmiar menu, jego położenie, gdy dotknięte są inne elementy strony internetowej i kolor. W linii "Min-Szerokość" zamiast "#", zastępuj żądaną cyfrę (na przykład 250), aw linii "Kolor tła" - nazwa żądanego koloru lub jego kodu HTML:

.Dropdown-Content {Wyświetlacz: Brak-Pozycja: Absolute-Background-Color: LightGrey-Min-szerokość: # PX-Z Indeks: 1-}

6. Dodaj informacje o zawartości menu rozwijanego. Poniższy kod ustawia kolor tekstu i rozmiaru menu. Zamiast "#" zastępować numer (w pikselach), aby ustawić rozmiar przycisku:

.Dropdown-Content A {Color: Black-Paddding: #px # PX-Text-Decoration: None-Display: Block-}

7. Określ, w jaki sposób kolory menu zmieni się, gdy użytkownik wyświetli kursor myszy. Pierwsza linia "kolor tła" wskazuje, że kolor, w którym wybrana opcja jest malowana, aw drugiej linii "Kolor tła" kolor, w którym pomalowany jest przycisk menu rozwijanego. Idealnie, te kolory powinny być lżejsze niż kolory opcji i przycisków, gdy kursor nie jest na nich ukryty.

.Dropdown-Content A: Hover {Color-Color: White-}.Dropdown: Hover .Dropdown-Content {Wyświetlacz: Block-}.Dropdown: Hover .Dropbtn {Color-Color: Grey-}

osiem. Zamknij sekcję CSS. Aby to zrobić, wprowadź następujący kod:

dziewięć. Określ nazwę menu rozwijanego. Wprowadź następujący kod, w którym "nazwa" zastąp słowo (na przykład "menu"), który zostanie wyświetlony na przycisku MENU.

 klasa ="Upuścić"> Klasa ="Dropbtn"> Nazwa klasa ="Dropdown-Content">

10. Dodaj opcje menu. Każda opcja menu powinna odnieść się do wszystkiego, na przykład na stronie lub innej witryny. Aby dodać opcje w menu, wprowadź następujący kod, gdzie https: // Stronie internetowej.Com Podpadnij adres strony (cytaty nie usuwają), a zamiast "Nazwa" zastępują opcję Nazwa.

 href ="https: // Stronie internetowej.Com"> Nazwa href ="https: // Stronie internetowej.Com"> Nazwa href ="https: // Stronie internetowej.Com"> Nazwa

jedenaście. Wypełnij kod. Wprowadź następujące znaczniki, aby określić koniec menu rozwijanego:

12. Przeglądaj kod menu rozwijanego. Kod powinien wyglądać tak:

 {Background-Color: Black-Color: White-Padding: 16px-font-size: 16px-border: None-}.Dropdown {Pozycja: Względny wyświetlacz: Inline-Block-}.Dropdown-Content {Wyświetlacz: Brak-Pozycja: Absolute-Background-Color: LightGrey-min-szerokość: 200PX-Z-index: 1-}.Dropdown-Content A {Color: Black-Paddding: 12px 16px-Tekst-Decoration: None-Display: Block-}.Dropdown-Content A: Hover {Color-Color: White-}.Dropdown: Hover .Dropdown-Content {Wyświetlacz: Block-}.Dropdown: Hover .Dropbtn {Color-Color: Grey-} Class ="Upuścić"> Klasa ="Dropbtn"> Klasa mediów społecznościowych ="Dropdown-Content"> href ="https: // Google.Com"> Google href ="https: // Facebook.Com"> Facebook href ="https: // Youtube.Com"> YouTube

Rada

Zawsze sprawdzaj kod przed wysłaniem go na swojej stronie.
Opisane tutaj metody są zaprojektowane tak, aby utworzyć menu rozwijane, które otwierają się, jeśli przyniesie kursor myszy. Aby utworzyć menu rozwijane, które otwiera się, jeśli klikniesz go, użyj jаvascript.

Ostrzeżenie

Zestaw kolorów HTML jest dość ograniczony, jeśli używasz ich nazw, na przykład "czarny" (czarny) lub "zielony" (zielony). Na tej strony Istnieje generator kodów kolorów HTML, z którym można znaleźć kod dowolnego koloru.