Om navigasjonsmenyen din er en horisontal rad over toppen eller en vertikal rad nedover siden, er det fortsatt bare en liste. Når du designer webnavigasjon, er det ofte enkelt å glemme at en navigasjonsmeny bare er en forherlig gruppe lenker. Men hvis du programmerer navigasjonen din med XHTML + CSS, kan du opprette en meny som er liten for nedlasting (XHTML) og enkel å tilpasse (CSS).
Starter
For å begynne å designe en liste for navigasjon, må du bruke en liste. Det kan være en standard uordnet liste som har blitt identifisert som navigasjonen:
Hvis du ser nøye på HTML, vil du legge merke til at linken "Hjem" også har en ID på
du er her. Dette vil tillate deg å lage en meny som identifiserer gjeldende plassering for leserne dine. Selv om du ikke har planer om å ha den typen visuelle cue på nettstedet ditt akkurat nå, kan du inkludere den informasjonen. Hvis du bestemmer deg for å legge til køen senere, har du mindre koding for å forberede nettstedet ditt.
Uten CSS-styling, ser denne XHTML-menyen ut som en standard uordnet liste. Det er kuler og listepostene er litt innrykkede. Fordi jeg bruker plassholderforbindelser, vil de fleste nettlesere ikke vise koblingene som klikkbare (understreket og i blått). Hvis du limer inn HTML-koden ovenfor på en webside, ser du den slik ut:
- Hjem
- Produkter
- tjenester
- Kontakt oss
Dette er ganske kjedelig og ser ikke ut som en meny. Men med bare noen få CSS-stiler lagt til i listen, kan du opprette en meny som gjør deg stolt.
Vertikal navigasjonsmeny
En vertikal navigasjonsmeny er veldig lett å skrive fordi den vises på samme måte som en vanlig liste: opp og ned. Listepostene vises vertikalt nedover siden.
Når jeg styler menyer, liker jeg å starte på utsiden og jobbe inn. Ved dette mener jeg at jeg først stiler
ul # navigasjon og deretter flytte til
li elementer og deretter koblingene, etc. Så for denne menyen, definerer du først bredden på menyen. Dette sikrer at selv om menyelementene er lange, vil de ikke skyve resten av oppsettet over eller forårsake horisontal rulling.
ul # navigasjon {width: 12em; }
Når jeg har bredden satt, kan jeg spille med listepostene. Dette tillater meg å sette ting som (å bli kvitt kulene), bakgrunnsfarger, grenser, tekstjustering og marginer.
ul # navigasjon li {listestil: none;bakgrunnsfarge: # 039;border-top: solid 1px # 039;tekstjustering: venstre;margin: 0;} Når du har angitt grunnleggende for listepostene, kan du begynne å spille med hvordan menyen ser ut i koblingsområdet. Først stil på UL # navigasjon LI Aog deretter En lenke, A: visited, A: hover, og A: aktive (hvis du vil ha dem). For koblingene liker jeg å gjøre koblingene et blokkelement (i stedet for standardinnstillingene). Dette tvinger dem til å ta opp hele rommet av LI- og de fungerer mer som et avsnitt, noe som gjør dem lettere å stilere som menyknapper. Den andre tingen jeg alltid gjør er å fjerne understreken ( tekst-dekorasjon: ingen;), da dette gjør at knappene ser mer ut som knapper til meg. Men selvfølgelig kan designen din være annerledes. ul # navigasjon li a {skjerm: blokk;tekst-dekorasjon: ingen;polstring: .25em;border-bottom: solid 1px # 39f;border-right: solid 1px # 39f;} Legg merke til det med skjerm: blokk; sett på linkene, er hele boksen i menyelementet klikkbar, ikke bare bokstavene. Dette er også bra for brukervennlighet. Sørg for å angi koblingsfargene (lenke, besøkte, sveve og aktiv) hvis du vil at de skal være forskjellige fra standardblått, rødt og lilla. a: link, a: besøkt {farge: #fff; }a: svever, a: aktiv {farge: # 000; } Jeg liker også å gi sveverstaten litt mer oppmerksomhet ved å endre bakgrunnsfargen. a: svever {bakgrunnsfarve: #fff; } Hvis du vil ha flere eksempler på vertikale menyer, kan du se listen nedenfor. Å lage horisontale navigasjonsmenyer er litt vanskeligere enn vertikale navigasjonsmenyer, fordi du må kompensere for at HTML-lister foretrekker å vise vertikalt. Som med den horisontale menyen, må du først opprette navigasjonsmenylisten:
Hvis du vil opprette en horisontal meny, fungerer det som du gjorde med den vertikale menyen. Start med utsiden og arbeid inn. Siden jeg vil at navigasjonen min skal starte i venstre hjørne, setter jeg det med 0 venstre margen og polstring, og jeg flyter den til venstre. Du bør også bli vant til å sette bredden slik at menyen ikke tar opp mer eller mindre plass enn du har tenkt. For horisontale menyer er dette vanligvis den totale bredden av designet. Jeg har også lagt til en bakgrunnsfarge til hele listen for å gjøre det enklere å lese. ul # navigasjon {flyte: venstre;margin: 0;polstring: 0;bredde: 100%;bakgrunnsfarge: # 039;} Men hemmeligheten til den horisontale navigasjonsmenyen er i listepostene. Listeposter er vanligvis blokkelementer, noe som betyr at de vil ha en ny linje plassert før og etter hver. Ved å skifte displayet fra blokkere til på linje, tvinge du listelementene til å ligge opp ved siden av hverandre horisontalt. ul # navigasjon li {display: inline; } Jeg behandlet koblingene akkurat som jeg behandlet dem i vertikal navigasjonsmeny, med samme farger og tekstdekorasjoner. Jeg la til en toppgrense for å avgrense knappene når de svinges over. Det eneste som ble fjernet var skjerm: blokk; som det vil sette newlines tilbake og ødelegge den horisontale menyen. ul # navigasjon li a {tekst-dekorasjon: ingen;polstring: .25em 1em;border-bottom: solid 1px # 39f;border-top: solid 1px # 39f;border-right: solid 1px # 39f;}a: link, a: besøkt {farge: #fff; }ul # navigasjon li a: svever {bakgrunnsfarge: #fff;farge: # 000;} Et annet aspekt av HTML er identifikatoren du er her. Hvis du vil endre menyen din for å indikere den nåværende plasseringen til brukerne, bruker du bare denne ID å definere en annen bakgrunnsfarge eller en annen stil. Flytt det attributtet ID til riktig menyelement på andre sider, slik at den nåværende siden alltid er uthevet. ul # navigasjon li # youarehere en {bakgrunnsfarge: # 09f; } Hvis du setter disse stilene sammen på siden din, kan du opprette en horisontal eller vertikal menylinje som fungerer sammen med nettstedet ditt, men det er raskt å laste ned og veldig enkelt å oppdatere i fremtiden. Ved hjelp av XHTML + CSS blir lister inn i et meget kraftig verktøy for design. Hvis du vil ha flere eksempler på horisontale menyer, kan du se følgende.
Horisontal navigasjonsmeny
Du er her Stedinformasjon
