Om din navigationsmeny är en vågrät rad över toppen eller en vertikal rad längs sidan, är det fortfarande bara en lista. Vid utformning av webbnavigering är det ofta lätt att glömma att en navigeringsmeny bara är en förhärligad grupp av länkar. Men om du programmerar din navigering med XHTML + CSS kan du skapa en meny som är liten att hämta (XHTML) och lätt att anpassa (CSS).
Komma igång
För att börja utforma en lista för navigering måste du använda en lista. Det kan vara en vanlig oorderad lista som har identifierats som navigeringen:
Om du tittar noga på HTML-filen märker du att länken "Hem" också har ett ID-nummer
du är här. Det här låter dig skapa en meny som identifierar den aktuella platsen för dina läsare. Även om du inte planerar att ha den typen av visuell cue på din webbplats just nu kan du inkludera den informationen. Om du väljer att lägga till cue senare, har du mindre kodning för att förbereda din webbplats.
Utan någon CSS-styling ser denna XHTML-meny ut som en vanligt oordnad lista. Det finns kulor och listobjekten är lite indragna. Eftersom jag använder platshållarlänkar, visar de flesta webbläsare inte länkarna som klickbara (understrukna och blå). Om du klistrar in ovanstående HTML på en webbsida ser din navigering ut så här:
- Hem
- Produkter
- tjänster
- Kontakta oss
Det här är ganska tråkigt och ser inte ut som en meny. Men med några få CSS-stilar som läggs till i listan kan du skapa en meny som gör dig stolt.
Vertikal navigationsmeny
En vertikal navigationsmeny är mycket lätt att skriva eftersom den visas på samma sätt som en vanlig lista: upp och ner. Listobjekten visas vertikalt nedåt på sidan.
När jag styler menyer gillar jag att börja på utsidan och arbeta in. Med detta menar jag att jag först stilar
ul # navigation och sedan flytta till
li element och sedan länkarna etc. Så här för den här menyn definierar du först menyns bredd. Detta kommer att se till att även om menyalternativen är långa, kommer de inte att trycka på resten av layouten över eller orsaka horisontell rullning.
ul # navigation {width: 12em; }
När jag har bredden inställd kan jag spela med listobjekten. Detta låter mig ställa saker som (att bli av med kulorna), bakgrundsfärger, gränser, textjustering och marginaler.
ul # navigation li {listestil: none;bakgrundsfärg: # 039;border-top: solid 1px # 039;text-align: left;marginal: 0;} När du har ställt in grunderna för listobjekten kan du börja spela med hur menyn ser ut i länkområdet. Först stilen UL # navigering LI Aoch sedan En länk, A: besökte, A: hover, och A: aktiv (om du vill ha dem). För länkarna gillar jag att göra länkarna till ett blockelement (istället för standardinställningen). Detta tvingar dem att ta upp hela rymden av LI-Och de fungerar mer som en punkt, vilket gör dem lättare att stila som menyknappar. Det andra jag alltid gör är att ta bort underlaget ( text-dekoration: ingen;), eftersom det här gör att knapparna ser mer ut som knappar till mig. Men självklart kan din design vara annorlunda. ul # navigering li a {display: block;text-dekoration: ingen;vaddering: .25em;gränsbotten: solid 1px # 39f;gräns-höger: solid 1px # 39f;} Observera att med display: block; satt på länkarna, är hela menyns meny klickbart, inte bara bokstäverna. Detta är också bra för användbarhet. Se till att du anger länkfärgerna (länk, besök, sväng och aktiv) om du vill att de ska skilja sig från standardblått, rött och lila. a: länk, a: besökte {färg: #fff; }a: svävar, a: aktiv {färg: # 000; } Jag gillar också att ge svävarstaten lite mer uppmärksamhet genom att ändra bakgrundsfärgen. a: svep {bakgrundsfärg: #fff; } Om du vill ha fler exempel på vertikala menyer, se listan nedan. Att skapa horisontella navigeringsmenyer är något svårare än vertikala navigeringsmenyer eftersom du måste kompensera det faktum att HTML-listor föredrar att visa vertikalt. Som med den horisontella menyn, skapa först din navigeringsmenylista:
För att skapa en horisontell meny, fungera som du gjorde med den vertikala menyn. Börja med utsidan och arbeta in. Eftersom jag vill att min navigering ska börja i det vänstra hörnet ställer jag in den med 0 vänster marginal och vaddering, och jag svänger den till vänster. Du bör också bli van vid att ställa in bredden så att din meny inte tar upp mer eller mindre utrymme än vad du tänker. För horisontella menyer är det vanligtvis hela bredden på designen. Jag har också lagt till en bakgrundsfärg till hela listan för att göra det enklare att läsa. ul # navigation {flyta till vänster;marginal: 0;vaddering: 0;bredd: 100%;bakgrundsfärg: # 039;} Men hemligheten till den horisontella navigeringsmenyn finns i listobjekten. Listobjekt är normalt blockelement, vilket innebär att de kommer att ha en ny linje placerad före och efter varje. Genom att byta skärm från blockera till i kö, du tvingar listelementen att ställa upp bredvid varandra horisontellt. ul # navigation li {display: inline; } Jag behandlade länkarna exakt som jag behandlade dem i den vertikala navigationsmenyn, med samma färger och textdekorationer. Jag lade till en övre gräns för att avgränsa knapparna när de svängde över. Det enda som togs bort var display: block; som det kommer att sätta newlines tillbaka och förstöra den horisontella menyn. ul # navigering li a {text-dekoration: ingen;vaddering: .25em 1em;gränsbotten: solid 1px # 39f;border-top: solid 1px # 39f;gräns-höger: solid 1px # 39f;}a: länk, a: besökte {färg: #fff; }ul # navigering li a: svävar {bakgrundsfärg: #fff;färg: # 000;} En annan aspekt av HTML är identifieraren du är här. Om du vill ändra din meny för att ange aktuella plats för dina användare, använd bara det här ID för att definiera en annan bakgrundsfärg eller annan stil. Flytta det attributet ID till rätt menyalternativ på andra sidor så att den aktuella sidan alltid markeras. ul # navigation li # youarehere en {bakgrundsfärg: # 09f; } Om du sammanställer dessa stilar på din sida kan du skapa en horisontell eller vertikal menyraden som fungerar med din webbplats men är snabb att ladda ner och mycket lätt att uppdatera i framtiden. Använda XHTML + CSS gör dina listor till ett mycket kraftfullt verktyg för design. Om du vill ha fler exempel på horisontella menyer, se följande.
Horisontell navigeringsmeny
Du är här platsinformation
