Jak utworzyć menu rozwijane w HTML za pomocą CSS?

Menu rozwijane jest sposobem na umożliwienie użytkownikowi zbadania różnych opcji dostępnych podczas korzystania z witryny internetowej. Są to nieco niezbędny widżet podczas projektowania strony internetowej. CSS pozwala tworzyć przystojne menu rozwijane, które zwiększają wrażenia użytkownika i upiększają wygląd Twojej witryny. Ten post składa się z zapewnienia:

1. Tworzenie rozwijanej skrzynki
2. Tworzenie menu rozwijanego

Zaczynajmy

Tworzenie rozwijanej skrzynki

Często musiałeś widzieć, że kiedy przynosisz kursor myszy na kawałek tekstu lub przycisku na stronie internetowej, pojawia się rozwijane pole. Oto, jak to się robi.

Przykład

Ten przykład pokazuje tworzenie rozwijanej pudełka.

Html

Przynieś mysz tutaj

Kliknij

Aby zrobić rozwijane pole, przede wszystkim stworzyliśmy kontener DIV, aby umieścić zawartość rozwijanego pola w nim, co więcej, aby otworzyć rozwijane pole, użyliśmy elementu.

CSS

.upuścić
Pozycja: względny;
Wyświetlacz: Block Inline;

Klasa „rozwijana” została przypisana do pierwszego kontenera Div, który gniazduje całą zawartość. Ustawiliśmy jego pozycję na względne, aby po otwarciu rozwijania został umieszczony tuż pod przyciskiem.

CSS

.containt
Nie wyświetla się;
kolor tła: Whitesmoke;
szerokość: 100%;
Wyściółka: 15px;

Kontener Div, który zawiera treść rozwijaną, przypisano klasę „rozwijaną”. Co więcej, ustawiliśmy wyświetlacz na żaden.

CSS

.Downiste: zawieszanie .containt
Blok wyświetlacza;

Ponadto, aby uczynić rozwijaną wkładkę, przypisaliśmy mu stan: Układ i ustaw jego wyświetlacz na blokowanie, aby pojawił się poniżej przycisku.

I na koniec, również stylizowaliśmy nasz przycisk, zgodnie z naszym pragnieniem.

przycisk
Wyściółka: 5px;
kolor tła: pszenica;
Font-Family: Lucida Sans;

Wyjście

Z powodzeniem utworzono rozwijane pole. Teraz przejdźmy do tworzenia menu rozwijanego.

Tworzenie menu rozwijanego

Menu rozwijane składa się z listy opcji i otwiera się tylko wtedy, gdy użytkownik przyniesie kursor myszy. Możesz utworzyć menu rozwijane na swojej stronie za pomocą CSS. Postępuj zgodnie z przykładem poniżej.

Html

Menu

Skontaktuj się z nami
O nas
Inny

Tutaj dodaliśmy tagi kotwiczne, aby zapewnić wiele opcji w menu rozwijanym.

CSS

.Dropbtn
kolor tła: łosoś;
kolor biały;
szerokość: 100px;
Wyściółka: 18px;
granica: 0;
Rozmiar czcionki: 17px;

Po pierwsze, podajemy nasz przycisk styl za pomocą różnych właściwości CSS.

CSS

.upuścić
Pozycja: względny;
Wyświetlacz: Block Inline;
Szerokość: 160px;

Jak już wyjaśniono powyżej, ustawiliśmy pozycję div z klasą „rozwijaną” na względne.

CSS

.containt
Nie wyświetla się;
kolor tła: Whitesmoke;
szerokość: 100%;

Tutaj używamy podstawowych właściwości CSS do stylizowania naszej rozwijanej treści.

CSS

.Content A
Blok wyświetlacza;
czarny kolor;
Wyściółka: 12px;
Dekoracja tekstu: Brak;

W powyższym kodzie CSS stylizujemy linki obecne w menu rozwijanym. Ustawiliśmy ich wyświetlacz na blokowanie, aby każdy link pojawił się na nowej linii.

CSS

.Downiste: zawieszanie .Dropbtn
kolor tła: Sandybrown;

.rozwijany content A: Hover
kolor tła: Lightgrey;

.Downiste: zawieszanie .containt
Blok wyświetlacza;

Tutaj stylizujemy efekty najemnika dla przycisku menu i menu rozwijanego.

Wyjście

W ten sposób możesz pomyślnie utworzyć menu rozwijane.

Wniosek

Menu rozwijane zapewnia mu różne opcje użytkownika dostępne podczas korzystania z witryny internetowej. Możesz utworzyć te menu rozwijane za pomocą różnych właściwości CSS. W celu utworzenia podstawowego rozwijanego pudełka możesz użyć kontenera Div i umieścić w nim rozwijaną zawartość, używając właściwości CSS, możesz dać mu trochę stylu. Po nauczeniu się, jak utworzyć podstawowe pole rozwijane, możesz użyć podobnych technik, aby utworzyć menu rozwijane. Ten przewodnik uczy, jak utworzyć menu rozwijane za pomocą odpowiedniego przykładu.