Hoe maak je een vervolgkeuzemenu met HTML en CSS

Geef elke sectie een class-kenmerk. U zult het class-kenmerk later gebruiken om stijl toe te passen op deze elementen met behulp van CSS. Geef een klassenattribuut aan de container en een ander aan het menu afzonderlijk.

Voeg een lijst met menu-items toe. De rommelige lijst (

) bevat de items in het bovenste menu (items in de lijst

Voeg links toe Als de menu-items op het hoogste niveau ook zijn gekoppeld aan uw eigen pagina`s, voegt u nu de bijbehorende koppelingen in. Hoewel ze niet aan een andere site zijn gekoppeld, bevat deze koppelingen naar een niet-bestaand anker (bijvoorbeeld "#!") zodat de cursor van de gebruiker van uiterlijk verandert. In dit voorbeeld "Neem contact met ons op" Het leidt nergens heen, maar de andere twee menu`s doen:

Maak sublijsten voor de items in het vervolgkeuzemenu. Nadat u de stijlen hebt toegepast, worden deze lijsten een vervolgkeuzemenu. Nest de lijsten binnen het item van de lijst waarop de gebruiker de cursor zal passeren. Voeg een klassenattribuut en een koppeling toe, net zoals u eerder deed.

Voeg de code toe "Clearfix". Herinner je je de klas nog? "Clearfix" Wat heb je toegevoegd in de menulijst? Normaal gesproken hebben de elementen van een vervolgkeuzemenu een transparante achtergrond en duwen de andere elementen naar andere richtingen. Je kunt dit probleem oplossen met een snelle CSS-instelling. Hier heeft u een praktische en eenvoudige oplossing, hoewel deze niet compatibel is met Internet Explorer 7 en eerdere versies:

Creëer het basisontwerp. Deze code sorteert uw menu aan de bovenkant van de pagina en verbergt de vervolgkeuzemenu-items. Dit is opzettelijk een beperkt voorbeeld, om u alleen te richten op de relevante code. Dan kunt u het verbeteren door extra CSS-eigenschappen toe te voegen, zoals "vulling" (vulling) en "marge" (Marge).

Laat de vervolgkeuzemenu`s verschijnen als je de cursor voorbij bent. De items in de vervolgkeuzelijst zijn momenteel ingesteld om niet te worden weergegeven. Hier ziet u hoe u een volledige sublijst kunt weergeven door de muisaanwijzer op de lijst te plaatsen waartoe deze behoort:

Geeft het vervolgkeuzemenu aan met een pijl. Webontwerpers laten meestal zien dat een item een ​​vervolgkeuzemenu opent met een pijl naar beneden. Deze code voegt die pijl toe aan elk van de menu-items: