Menyvarselsmerker Bruke HTML5-data-attributter

I dag skal vi ta Orman Clarks menyvarslingsmerke design og bygge den ved hjelp av HTML og CSS. Vi ser på et par måter å oppnå effekten, inkludert bruk av HTML5-dataattributter som du kanskje ikke er kjent med. La oss dykke inn!

Trinn 1: HTML5 Base Markup

La oss starte med å kaste inn noen grunnleggende oppslag. Vi bruker HTML5-doktypen i hele opplæringen. Vi lager menyen selv ved først å legge til en hoved div etterfulgt av listeposter som vil opprette hver menykobling. Vi har også tatt med HTML5 shiv (eller shim) skriptet i hodet på dokumentet vårt. Dette kalles inn i spill med eldre versjoner av Internet Explorer, slik at de kan gjenkjenne og utforme HTML5-elementer.

Trinn 2: Meny Markup

For å opprette strukturen på menyen vår bruker vi en ikke-bestilt liste med 4 listeposter og en ankermerke inne. Du vil kanskje også nest listen i en