Hvordan lage en Vertical Navigation Bar Bruke CSS

October 13

Opprette en horisontal navigasjonslinjen vil legge til funksjonalitet til nettstedet ditt, og bidra til å holde den organisert. Det kan også legge verdi i form av SEO. Det er en enkel prosess som kan gjøres ved hjelp av CSS, eller Cascading Style Sheets.

Bruksanvisning

Hvordan lage en Vertical Navigation Bar Bruke CSS

1 Bestem hva som foregår i vertikale navigasjonsfeltet. Hvilke sider som er mest relevant, og mest besøkte etter dine horisontale eller hovednavigasjons elementer?

2 Åpne din nettside i notepad eller teksteditor og skriv inn følgende kode der du vil at listen skal starte: <div id = "navcontainer"> <ul id = "navlist">.

3 Legg inn første listeelement. Dette vil være den første vertikale navigasjonsknappen på siden os den har "id" av "dagens". Type <li id = "aktiv"> <a href="first-nav-page-name.html" id="current"> Navigation sikt </a> </ li>

4 Tilsett resten av navigasjonselementene ved hjelp av <li> og </ li> tags, med en hyperkobling. Type <li> <a href="second-nav-page-name.htm"> Nav sikt 2 </a> </ li> <li> <a href = "tredje-nav-side-name.html" > Nav sikt 3 </a> </ li>, etc.

5 Etter den siste navigasjons tag, avslutte listen med </ ul> og deretter </ div>.

6 Opprett CSS-stiler for denne listen ved å legge til egenskaper til deg CSS arket. Bare åpne CSS-mappen, og laste ned CSS stilark, og deretter legge en stil. For eksempel, hvis du ønsker å legge firkant kuler, skriver #navlist li {list-style-type: square; } I stilarket, på toppen. #navlist li definerer navigasjonsfeltet liste objekt.

Hint

Opprette dekorative vertikale navigasjonslister er en ferdighet som krever mer kunnskap om CSS, men enkle lister med interessante stiler kan bli funnet rett på nettet.
Ikke gjøre listen for lang, og alltid ta med nav-koder, samt <li> og </ li> tags.