Uanset om din navigationsmenu er en vandret række over toppen eller en lodret række ned langs siden, er det stadig bare en liste. Ved udformning af webnavigation er det ofte nemt at glemme, at en navigationsmenu kun er en glorificeret gruppe af links. Men hvis du programmerer din navigation ved hjælp af XHTML + CSS, kan du oprette en menu, der er let at downloade (XHTML) og let at tilpasse (CSS).
Kom i gang
For at begynde at designe en liste til navigation, skal du bruge en liste. Det kan være en standard uordnet liste, der er blevet identificeret som navigationen:
Hvis du ser nøje på HTML'en, vil du bemærke, at linket "Home" også har et ID på
du er her. Dette giver dig mulighed for at oprette en menu, der identificerer den aktuelle placering for dine læsere. Selvom du ikke har planer om at have den slags visuelle cue på dit websted lige nu, kan du inkludere disse oplysninger. Hvis du beslutter dig for at tilføje cue senere, har du mindre kodning for at forberede dit websted.
Uden CSS-styling ser denne XHTML-menu ud som en standard uordnet liste. Der er kugler og listeposterne er lidt indrykkede. Fordi jeg bruger pladsholderforbindelser, vil de fleste browsere ikke vise linkene som klikbare (understregede og blå). Hvis du indsætter ovenstående HTML på en webside, ser din navigation sådan ud:
- Hjem
- Produkter
- Services
- Kontakt os
Dette er ret kedeligt og ser ikke meget ud som en menu. Men med blot nogle få CSS-stilarter tilføjet til listen, kan du oprette en menu, der gør dig stolt.
Vertikal Navigation Menu
En vertikal navigationsmenu er meget nem at skrive, fordi den vises på samme måde som en normal liste: op og ned. Listerne vises lodret ned på siden.
Når jeg styler menuer, kan jeg starte udefra og arbejde ind. Ved dette mener jeg, at jeg først stiler
ul # navigation og derefter flytte til
li elementer og derefter linkene osv. Så for denne menu, definerer du først bredden af menuen. Dette sikrer, at selvom menupunkterne er lange, vil de ikke skubbe resten af layoutet over eller forårsage vandret rulning.
ul # navigation {width: 12em; }
Når jeg har fået bredden indstillet, kan jeg spille med listeposterne. Dette giver mig mulighed for at indstille ting som (at slippe af med kuglerne), baggrundsfarver, grænser, tekstjustering og marginer.
ul # navigation li {listestil: none;baggrundsfarve: # 039;border-top: solid 1px # 039;tekst-align: left;margen: 0;} Når du har angivet det grundlæggende for listeposterne, kan du begynde at spille med, hvordan menuen ser ud i linkområdet. Først stil den UL # navigation LI Aog derefter den Et link, A: besøgte, A: hover, og A: aktiv (hvis du vil have dem). Til linkene kan jeg gerne lave linkene et blokelement (i stedet for standard in-line). Dette tvinger dem til at optage hele rummet af LI- og de virker mere som et afsnit, hvilket gør dem lettere at style som menuknapper. Det andet, jeg altid gør, er at fjerne understregen ( tekst dekoration: ingen;), da det gør knapperne mere som knapper til mig. Men selvfølgelig kan dit design være anderledes. ul # navigation li a {display: blok;tekst dekoration: ingen;polstring: .25em;border-bottom: solid 1px # 39f;grænse-højre: solid 1px # 39f;} Bemærk at med display: blok; sæt på linkene, er hele boksen i menupunktet klikbart, ikke kun bogstaverne. Dette er også godt for brugervenlighed. Sørg for at indstille linkfarverne (link, besøgt, svinge og aktiv), hvis du vil have dem anderledes end standard blå, rød og lilla. a: link, a: besøgte {farve: #fff; }a: svever, a: aktiv {farve: # 000; } Jeg vil også gerne give svømmerstaten en smule mere opmærksomhed ved at ændre baggrundsfarven. a: svever {baggrundsfarve: #fff; } Hvis du vil have flere eksempler på vertikale menuer, skal du se nedenstående liste. Oprettelse af vandrette navigationsmenuer er lidt sværere end vertikale navigationsmenuer, fordi du skal kompensere for, at HTML-lister foretrækker at vise vertikalt. Som med den vandrette menu skal du først oprette din navigationsmenu liste:
For at oprette en vandret menu skal du fungere som du gjorde med den lodrette menu. Start med ydersiden og arbejde ind. Da jeg vil have min navigation begyndt i venstre hjørne, sætter jeg det med 0 venstre margen og polstring, og jeg flyder den til venstre. Du bør også være vant til at indstille bredden, så din menu ikke optager mere eller mindre plads, end du har til hensigt. For vandrette menuer er dette normalt den fulde bredde af designet. Jeg har også tilføjet en baggrundsfarve til hele listen for at gøre det nemmere at læse. ul # navigation {flyde: venstre;margen: 0;polstring: 0;bredde: 100%;baggrundsfarve: # 039;} Men hemmeligheden til den vandrette navigationsmenu er i listeposterne. Listeelementer er normalt blokelementer, hvilket betyder, at de vil have en ny linje placeret før og efter hver enkelt. Ved at skifte displayet fra blok til inline, tvinger du elementerne til at linse op ved siden af hinanden vandret. ul # navigation li {display: inline; } Jeg behandlede forbindelserne præcis som jeg behandlede dem i den vertikale navigationsmenu med de samme farver og tekstdekorationer. Jeg tilføjede en øverste grænse for at afgrænse knapperne, når de svæves over. Den eneste ting fjernet var display: blok; som det vil sætte newlines tilbage og ødelægge den vandrette menu. ul # navigation li a {tekst dekoration: ingen;polstring: .25em 1em;border-bottom: solid 1px # 39f;border-top: solid 1px # 39f;grænse-højre: solid 1px # 39f;}a: link, a: besøgte {farve: #fff; }ul # navigation li a: hover {baggrundsfarve: #fff;farve: # 000;} Et andet aspekt af HTML er identifikatoren du er her. Hvis du vil ændre din menu for at angive den aktuelle placering af dine brugere, skal du blot bruge denne ID at definere en anden baggrundsfarve eller en anden stil. Flyt den attribut ID til det korrekte menupunkt på andre sider, så den aktuelle side altid er fremhævet. ul # navigation li # youarehere en {baggrundsfarve: # 09f; } Hvis du sætter disse stilarter sammen på din side, kan du oprette en vandret eller lodret menulinje, der fungerer sammen med dit websted, men det er hurtigt at downloade og meget nemt at opdatere i fremtiden. Brug XHTML + CSS gør dine lister til et meget kraftfuldt værktøj til design. Hvis du vil have flere eksempler på vandrette menuer, skal du kontakte følgende.
Horisontal Navigation Menu
Du er her Placering Information
