HTML og CSS kode for et navigasjonsfelt med et avrundet hjørne
HTML gir struktur for data innen websider. Etter dette prinsippet, de fleste webutviklere lage navigasjonsfelt starter med sorterte lister. En sorterte liste oppretter en punktliste som standard i alle nettlesere, men du kan bruke Cascading Style Sheets (CSS) koden senere å strippe kuler og stil listeelementer som nødvendig.
Den uordnet liste
Her er koden for en grunnleggende sorterte liste som vil bli et navigasjonsfelt:
<Ul>
<Li> <a href="somepage.html"> Noen Page </a> </ li>
<Li> <a href="anotherpage.html"> En side </a> </ li>
</ Ul>
Merk at hvert element i listen - skapt av "<ul>" tag - er pakket inn i et listeelement eller "<li>" tag par. Siden nettstedet besøkende må klikke på elementene i listen, må du bruke ankerkoden for å lage koblinger ut av hvert listepunkt.
Fjern Standard Styling
Før du kan style en uordnet liste til en navigeringslinje, må du fjerner standardstiler. Hvis du bruker en reset stilark, slik som den er laget av Eric Meyers, kan du hoppe over dette trinnet. Stripping bort standard styling krever å sette "list-style" eiendom til "ingen" for å fjerne kuler, og så må du fjerne både venstre marg og venstre padding. CSS-koden ser slik ut:
ul {
list-style: none;
margin-left: 0;
padding-left: 0;
}
Gjør List Horisontal
Selv om noen nettsteder bruker sidebar menyer for navigasjon, er den mest vanlige navigasjonsfeltet orientering horisontal, spenner øverst på nettsiden. Du kan lage din sorterte liste horisontalt ved å sette listeelementer til "float: left" som dette:
li {
float: left;
}
Navigation Links
Å gi hver koble en skjerm type "blokk" er den beste måten å gjøre din navigasjonsfeltet enkel å bruke. Uten "display: block", kan du ikke legge padding til linkene som legger klikkbare plass rundt sin tekst. Polstringen gjør også navigasjonsfeltet element utheving enklere. Dette er et eksempel på CSS-kode for lenker i et navigasjonsfelt:
li a {
display: block;
padding: 10px;
background-color: # 555555;
color: # ffffff;
text-decoration: none;
}
li a: hover {
background-color: # 333333;
}
Den forrige koden legger 10 piksler av polstring rundt hver kobling. Lenkene få en bakgrunnsfarge mellom grå og en tekstfarge hvit. "Text-decoration: none" slår av koblingen understreking. Den "li a: hover" velger talls stil regler gjør det slik at når brukeren svever musepekeren over en kobling, blir bakgrunnen mørkere grå.
Styling Bar Itself
Du kan gi din navigasjonsfeltet noen styling du vil, med bakgrunn, graderinger, skygger og avrundede hjørner. Sørg for at din styling fungerer i alle nettlesere, med mindre det er greit på det konkrete prosjektet slik at baren for å degradere. For eksempel, her er koden for en bar med en svart bakgrunn og avrundede hjørner:
ul {
bakgrunn: # 000000;
border-radius: 20px;
}
Den "border-radius" eiendom vil ikke fungere i Internet Explorer 8 og under uten bruk av en polyfill som "CSS3Pie." Et eget stilark innpakket i betinget kommentarer, sammen med hjørne bilder, kan skape en fallback for avrundet hjørne også.