Hoe aangepaste CSS3 Dropdown menu's maken: CSS Dropdown tutorial voor beginners (3 / 8 stap)

Stap 3: De HTML-code

De eerste stap in het creëren van een menu is het creëren van een ongeordende lijst in HTML. We zouden later deze lijst in een navigatie dropdownmenu stijl. We gebruiken voor het maken van multilevel dropdown menu's, geneste ongeordende lijsten met hetzelfde aantal niveaus als het aantal niveaus die hebben we nodig in onze dropdown-menu. Hier is de HTML-code voor de lijst.

<! doctype html >
< html >
< head >
< meta charset = "utf-8" >
< titel > voorbeeldproject < / title >
< link href="style.css" type = "text/css" rel = "stylesheet" / >
< / head >

< body >
< koptekst >
< div class = "menu" >
< ul >
< li >< een href = "#" > < /a >< /li > Home
< li >< een href = "#" > < /a > Categorieën
< ul >
< li >< een href = "#" > Photoshop < /a >< /li >
< li >< een href = "#" > < /a >< /li > Wordpress
< li >< een href = "#" > Web Development < /a >
< ul >
< li >< een href = "#" > HTML < /a >< /li >
< li >< een href = "#" > CSS < /a >< /li >
< /ul >
< /li >
< /ul >
< /li >
< li >< een href = "#" > over met ons opnemen < /a >
< ul >
< li >< een href = "#" > onze missie < /a >< /li >
< li >< een href = "#" > Our Clients < /a >< /li >
< li >< een href = "#" > inhoud met ons opnemen < /a >< /li >
< /ul >
< /li >
< li >< een href = "#" > < /a >< /li > Blog
< /ul >
< / div >
< / kop >
< / body >
< / html >

Zoals u zien kan we deze pagina maakt in HTML5, en al het style.css bestand opgenomen, code onze belangrijkste CSS blad. Ook hebben we een aangepaste klasse met de naam menu in de belangrijkste < div > met behulp van welke we zullen onze navigatie-menu stijl reeds opgenomen. Hoewel we hebben genoemd het menu klasse voor deze tutorial, om praktische redenen proberen voor zitten meerder specifiek in naamgeving, zoals soms een website bevat veel verschillende soorten menu's zoals kop menu, menu van de voettekst, zijbalk menu, enz. Dus met de juiste naamgeving het wordt gemakkelijker om te coderen van de website en helpt anderen te begrijpen die code. Voor nu aangezien er geen opmaakmodel aanwezig, zal deze code alleen een ongeordende geneste lijst maken met standaardstijl.