Hoe maak je een vervolgkeuzemenu op HTML en CSS

Uit dit artikel leert u hoe u een vervolgkeuzemenu maakt met HTML en CSS. Het vervolgkeuzemenu wordt geopend wanneer de gebruiker de muisaanwijzer naar deze brengt - wanneer het menu is geopend, kan de gebruiker op een van de menu-opties klikken om naar de bijbehorende pagina te gaan.

Stappen

een. Open teksteditor. U kunt een gewone teksteditor gebruiken, zoals Kladblok of Texteit of een meer functionele teksteditor, zoals Kladblok++.

Notepad ++ Open eerst het menu "Taal" aan de bovenkant van het venster en selecteer "HTML".

2. Voer de documentkop in. Deze code die het type code definieert dat wordt gebruikt in de rest van het document:

3. Maak een vervolgkeuzemenu. Voer de volgende code in om de grootte en kleur van het menu in te stellen. Voer in plaats van "#" het gewenste cijfer in (hoe groter het aantal, hoe groter het menu). Ook in de rijen "achtergrondkleur" en "Kleur", kunt u de naam van de gewenste kleur of de HTML-code vervangen:

.Dropbtn {achtergrond-color: zwart-kleur: wit-vulling: # px-font-size: # px-rand: geen-}

4. Geef op dat de opties in het menu aanwezig zijn. Aangezien de opties later worden toegevoegd, plaatst u ze in het menu door de volgende code in te voeren:

.Dropdown {Positie: Relative-Display: Inline-Block-}

vijf. Stel het uiterlijk van het vervolgkeuzemenu in. De volgende code zal de grootte van het menu, de positie ervan instellen wanneer andere webpagina-elementen worden aangetast en kleur. In de "min-breedte" -lijn, in plaats van "#", vervangt u het gewenste cijfer (bijvoorbeeld 250) en in de lijn "achtergrondkleur" - de naam van de gewenste kleur of de HTML-code:

.Dropdown-Content {display: none-positie: absolute achtergrondkleur: lightgrey-min-breedte: # px-z-index: 1-}

6. Voeg informatie toe over de inhoud van het vervolgkeuzemenu. De volgende code bepaalt de kleur van de tekst en de MENU-knop. In plaats van "#" vervangen het nummer (in pixels) om de grootte van de knop in te stellen:

.Dropdown-Content A {Color: Black-Padding: #px # px-tekst-decoratie: Geen-Display: Block-}

7. Geef op hoe de menukleuren zullen veranderen wanneer de gebruiker de muiscursor zal weergeven. De eerste regel "achtergrondkleur" geeft de kleur aan waarin de geselecteerde optie is geverfd en in de tweede regel "achtergrondkleur" -kleur waarin de vervolgkeuzelijst wordt geschilderd. Idealiter moeten deze kleuren lichter zijn dan de kleuren van de opties en de knoppen wanneer de cursor niet op hen is verborgen.

.Dropdown-Content A: Hover {background-color: White-}.Dropdown: Hover .Dropdown-Content {display: block-}.Dropdown: Hover .Dropbtn {achtergrondkleur: Grey-}

acht. Sluit CSS-sectie. Om dit te doen, voert u de volgende code in:

negen. Geef de naam van het vervolgkeuzemenu op. Voer de volgende code in waar "naam" het woord "wordt vervangen (bijvoorbeeld" menu "), die op de MENU-knop wordt weergegeven.

 klasse ="Laten vallen"> Klasse ="Dropbtn"> Naamklasse ="Dropdown-inhoud">

10. Menu-opties toevoegen. Elke menu-optie moet niks naar verwijzen naar de pagina van uw of andere website. Om opties in het menu toe te voegen, voert u de volgende code in waar HTTPS: // Website.Com Onderdun het adres van de pagina (quotes niet verwijderen), en in plaats van "naam" vervangen de naam optie.

 href ="HTTPS: // Website.Com"> Naam href ="HTTPS: // Website.Com"> Naam href ="HTTPS: // Website.Com"> Naam

elf. Vul de code in. Voer de volgende tags in om het einde van het vervolgkeuzemenu op te geven:

12. Blader door de code van het vervolgkeuzemenu. De code moet er als volgt uitzien:

 {Background-color: zwart-color: White-Padding: 16px-font-size: 16px-rand: Geen-}.Dropdown {Positie: Relative-Display: Inline-Block-}.Dropdown-content {display: geen-positie: absolute achtergrondkleur: lightgrey-min-breedte: 200px-Z-index: 1-}.Dropdown-inhoud A {Color: Black-Padding: 12px 16px-tekst-decoratie: Geen-Display: Block-}.Dropdown-Content A: Hover {background-color: White-}.Dropdown: Hover .Dropdown-Content {display: block-}.Dropdown: Hover .Dropbtn {achtergrondkleur: Grey-} Class ="Laten vallen"> Klasse ="Dropbtn"> Social Media Class ="Dropdown-inhoud"> href ="HTTPS: // Google.Com"> Google Href ="HTTPS: // Facebook.Com"> Facebook href ="HTTPS: // YouTube.Com"> YouTube

Tips

Controleer altijd de code voordat u deze op uw website plaatst.
De hier beschreven methoden zijn ontworpen om een vervolgkeuzemenu te maken die wordt geopend als u de muiscursor meeneemt. Als u een vervolgkeuzemenu wilt maken die opent als u erop klikt, gebruikt u jаvascript.

Waarschuwingen

De set HTML-kleuren is vrij beperkt als u hun namen gebruikt, bijvoorbeeld, "zwart" (zwart) of "groen" (groen). Op de van deze pagina Er is een HTML-kleurencodes-generator waarmee u de code van elke kleur kunt vinden.

Deel in het sociale netwerk:

Hoe een vervolgkeuzemenu op html en css te maken

Stappen

Tips

Waarschuwingen