Oavsett om din webbplats navigeringsmeny är en horisontell rad överst eller en vertikal rad längs sidan är det bara en lista. Vid design webbnavigering, är en navigeringsmeny en grupp länkar. När du programmerar din navigering med XHTML + CSS kan du skapa en meny som är liten att ladda ner (XHTML) och lätt att anpassa (CSS).
Komma igång
För att utforma en lista för navigering måste du använda en lista. Det kan vara en icke-ordnad standardlista som har identifierats som navigering. Till exempel:
- Hem
- Produkter
- Tjänster
- Kontakta oss
När du tittar på HTML har hemlänken ett ID på.
du är här
Detta 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 bestämmer dig för att lägga till köen senare kommer du att ha mindre kodning för att förbereda din webbplats.
Utan några CSS-styling, denna XHTML-meny ser ut som en standardlista som inte är ordnad. Det finns kulor och listobjekten är något indragna. När man använder
platshållarlänkar, de flesta webbläsare visar inte länkarna som klickbara (understrukna och i blått). När du klistrar in HTML på en webbsida ser din navigering ut så här:- Hem
- Produkter
- Tjänster
- Kontakta oss
Det här ser inte ut som en meny. Men med några CSS-stilar som läggs till i listan kan du skapa en meny som gör dig stolt.
Om du vill ha fler exempel på vertikala menyer, gör en webbsökning efter följande:
- En vertikal meny
- En grundläggande vertikal menymall
- En utformad vertikal meny med You Are Here
- En grundläggande vertikal menymall med You Are Here
Vertikal navigeringsmeny
En vertikal navigeringsmeny är lätt att skriva eftersom den visas på samma sätt som en normal lista: upp och ner. Listobjekten visas vertikalt nedåt på sidan.
När du stylar menyer, börja utifrån och arbeta in. Först utformar du navigationen:
ul # navigering
Gå sedan till elementen och länkarna. Definiera först menyens bredd. Detta säkerställer att om menyalternativen är långa, kommer objekten inte att skjuta resten av layouten eller orsaka horisontell rullning.
ul # navigering {bredd: 12em; }
När du har ställt in bredden, arbeta med listobjekten. Detta låter dig ställa in saker som bakgrundsfärger, ramar, textjustering och marginaler.
ul # navigering li {
liststil: ingen;
bakgrundsfärg: # 039;
border-top: solid 1px # 039;
textjustera: vänster;
marginal: 0;
}
När du har ställt in grunderna för listobjekten, arbeta med hur menyn ser ut i länkområdet. Först utforma navigeringen:
UL # navigering LI A
Stylera sedan följande:
En länk
A: besökt
A: sväva
A: aktiv
För länkarna gör länkarna till ett blockelement (snarare än standardintegrerad). Detta tvingar länkar att ta upp hela utrymmet i LI och fungera som ett stycke, vilket gör det lättare att utforma länkar som menyknappar. Ta sedan bort följande:
understrykning, textdekoration: ingen; som
Detta gör att knapparna ser mer ut som knappar. Din design kan vara annorlunda.
ul # navigering li a {
display: blockera;
text-dekoration: ingen;
stoppning: .25em;
border-bottom: solid 1px # 39f;
border-right: solid 1px # 39f;
}
Med display: blockera; på länkarna är hela rutan för menyalternativet klickbar, inte bara bokstäverna. Detta är också bra för användbarheten. Ställ in länkfärgerna (länk, besökt, sväva och aktivt) om du vill att länkar ska skilja sig från standardblått, rött och lila.
a: länk, a: besökt {color: #fff; }
a: sväva, a: aktiv {färg: # 000; }
Du kan också ge svävaren lite uppmärksamhet genom att ändra bakgrundsfärgen.
a: sväva {bakgrundsfärg: #fff; }
Horisontell navigeringsmeny
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 visas vertikalt. Som med den horisontella menyn, skapa navigeringsmenylistan:
- Hem
- Produkter
- Tjänster
- Kontakta oss
För att skapa en horisontell meny, arbeta på samma sätt som du gjorde med den vertikala menyn. Börja med utsidan och arbeta in. För att starta navigeringen i det vänstra hörnet, ställ in den med 0 vänster marginal och stoppning och sväv den åt vänster.
Var vana att ställa in bredden så att din meny inte tar mer eller mindre utrymme än du tänker. För horisontella menyer är detta vanligtvis designens fulla bredd. Du kan också lägga till en bakgrundsfärg till listan för att göra det lättare att läsa.
ul # navigation {
flyta till vänster;
marginal: 0;
stoppning: 0;
bredd: 100%;
bakgrundsfärg: # 039;
}
Hemligheten till den horisontella navigeringsmenyn finns i listobjekten. Listobjekt är normalt blockelement, vilket innebär att dessa objekt har en ny rad placerad före och efter var och en. Genom att byta bildskärm från block till inline tvingar du listelementen att ställa upp horisontellt bredvid varandra.
ul # navigering li {display: inline; }
Behandla länkarna precis som den vertikala navigeringsmenyn, med samma färger och textdekoration. Lägg till en övre kant för att avgränsa knapparna när användaren svävar över en knapp. Ta sedan bort den display: blockera; eftersom det sätter in nya linjer och förstör den horisontella menyn.
Du är här Platsinformation
En annan aspekt av HTML är denna identifierare:
du är här
Om du vill ändra din meny för att ange användarnas aktuella plats, använd detta ID för att definiera en annan bakgrundsfärg eller annan stil. Flytta attribut-ID till rätt menyalternativ på andra sidor så att den aktuella sidan alltid är markerad.
Om du sätter ihop dessa stilar på din sida kan du skapa en horisontell eller vertikal menyrad som fungerar med din webbplats och är snabb att ladda ner och enkel att uppdatera. Att använda XHTML + CSS gör dina listor till ett kraftfullt verktyg för design.
Om du vill ha fler exempel på horisontella menyer, sök på webben efter följande:
- En formad horisontell meny
- En grundläggande horisontell menymall
- En formad horisontell meny med You Are Here
- En grundläggande horisontell menymall med You Are Here