CSS navigationsfält

Demonstration: navigationsmeny

Vertikal navigationsmeny

Horisontell navigationsmeny


Navigationsmeny

En användarvänlig navigationsmeny är mycket viktig för varje webbplats.

Genom att använda CSS kan du konvertera tråkiga HTML-menyer till vackra navigationsmenyer.

Navigationsmeny = länklista

Navigationsmenyn kräver standard HTML som grund.

I vårt exempel kommer vi att bygga navigationsmenyn med hjälp av standard HTML-lista.

Navigationsmenyn är i huvudsak en länklista, därför är det mycket meningsfullt att använda <ul> och <li> element:

Exempel

<ul>
  <li><a href="index.asp">Home</a></li>
  <li><a href="news.asp">Nyheter</a></li>
  <li><a href="contact.asp">Kontakt</a></li>
  <li><a href="about.asp">Om</a></li>
</ul>

Prova själv

Nu, ta bort punktlistor samt marginaler och inre marginaler (fyllning) från listan:

Exempel

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Prova själv

Exempel förklaring:

  • list-style-type: none; - Ta bort punktlistor. Navigationslisten behöver inte listelementetiketter.
  • ställa in margin: 0; och padding: 0; Ta bort webbläsarens standardinställningar.

Koden i föregående exempel används för vertikala och horisontella navigationsfält och kommer att läras mer om i nästa kapitel.