Of je navigatiemenu nu een horizontale rij aan de bovenkant of een verticale rij onderaan de zijkant is, het is nog maar een lijst. Bij het ontwerpen van webnavigatie is het vaak gemakkelijk om te vergeten dat een navigatiemenu slechts een veredelde groep links is. Maar als u uw navigatie programmeert met XHTML + CSS, kunt u een menu maken dat klein is om te downloaden (de XHTML) en eenvoudig aan te passen is (de CSS).
Ermee beginnen
Om te beginnen met het ontwerpen van een lijst voor navigatie, moet u een lijst gebruiken. Het kan een standaard ongeordende lijst zijn die is geïdentificeerd als de navigatie:
Als u goed naar de HTML kijkt, ziet u dat de link "Home" ook een ID van heeft
je bent hier. Hiermee kunt u een menu maken dat de huidige locatie voor uw lezers aangeeft. Zelfs als je niet van plan bent om zo'n type visuele cue op je site te hebben, kun je die informatie opnemen. Als u besluit om de cue later toe te voegen, heeft u minder codering om uw site voor te bereiden.
Zonder CSS-styling ziet dit XHTML-menu eruit als een standaard ongeordende lijst. Er zijn kogels en de lijstitems zijn licht ingesprongen. Omdat ik placeholder-links gebruik, zullen de meeste browsers de links niet als klikbaar weergeven (onderstreept en in blauw). Als u de bovenstaande HTML in een webpagina plakt, ziet uw navigatie er als volgt uit:
- Huis
- producten
- Diensten
- Neem contact met ons op
Dit is behoorlijk saai en lijkt niet veel op een menu. Maar met slechts een paar CSS-stijlen toegevoegd aan de lijst, kunt u een menu maken waar u trots op bent.
Verticaal navigatiemenu
Een verticaal navigatiemenu is heel gemakkelijk te schrijven omdat het op dezelfde manier wordt weergegeven als een normale lijst: op en neer. De lijstitems worden verticaal op de pagina weergegeven.
Wanneer ik menu's vorm, vind ik het leuk om aan de buitenkant te beginnen en aan het werk te gaan. Hiermee bedoel ik dat ik het eerst stijl
ul # navigatie en ga dan naar de
li elementen en vervolgens de links, enz. Dus voor dit menu, definieert u eerst de breedte van het menu. Dit zorgt ervoor dat, zelfs als de menu-items lang zijn, ze niet de rest van de lay-out duwen of horizontaal scrollen veroorzaken.
ul # navigatie {width: 12em; }
Zodra ik de breedte heb ingesteld, kan ik met de lijstitems spelen. Hierdoor kan ik dingen instellen als (om van de kogels af te komen), achtergrondkleuren, randen, tekstuitlijning en marges.
ul # navigation li {lijststijl: geen;achtergrondkleur: # 039;border-top: vast 1px # 039;text-align: left;marge: 0;} Nadat u de basis voor de lijstitems hebt ingesteld, kunt u beginnen met spelen met hoe het menu er uitziet in het koppelingsgebied. Eerste stijl het UL # navigatie LI Aen dan de Een link, A: visited, A: hover, en A: active (als je ze wilt). Voor de links maak ik graag van de links een blokelement (in plaats van de standaard in-line). Dit dwingt hen om de hele ruimte van de LI-En ze gedragen zich meer als een alinea, waardoor ze gemakkelijker te stylen zijn als menuknoppen. Het andere wat ik altijd doe, is het verwijderen van de onderstreping ( tekstdecoratie: geen;), omdat de knoppen hierdoor meer op knoppen lijken. Maar je ontwerp kan natuurlijk anders zijn. ul # navigation li a {weergave: blok;tekstdecoratie: geen;opvulling: .25em;border-bottom: solid 1px # 39f;border-right: solid 1px # 39f;} Merk op dat met de weergave: blok; ingesteld op de koppelingen, kan het volledige vak van het menu-item worden aangeklikt, niet alleen de letters. Dit is ook goed voor de bruikbaarheid. Zorg ervoor dat de linkkleuren (link, bezocht, zweeftekst en actief) zijn ingesteld als u wilt dat ze anders zijn dan de standaard blauw, rood en paars. a: link, a: visited {color: #fff; }a: hover, a: active {color: # 000; } Ik hou ook van om de hover state een beetje meer aandacht te geven door de achtergrondkleur te veranderen. a: hover {background-color: #fff; } Als u meer voorbeelden van verticale menu's wilt, raadpleegt u de onderstaande lijst. Het maken van horizontale navigatiemenu's is iets moeilijker dan verticale navigatiemenu's, omdat u het feit dat HTML-lijsten de voorkeur geven om verticaal te tonen, moet compenseren. Net als bij het horizontale menu, maakt u eerst uw navigatiemenu-lijst:
Als u een horizontaal menu wilt maken, werkt u hetzelfde als in het verticale menu. Begin met de buitenkant en werk erin. Omdat ik wil dat mijn navigatie start in de linkerhoek, plaats ik deze met 0 linkermarge en opvulling en zweef ik deze naar links. Je moet er ook de gewoonte van maken om de breedte zo in te stellen dat je menu niet meer of minder ruimte inneemt dan je van plan bent. Voor horizontale menu's is dit meestal de volledige breedte van het ontwerp. Ik heb ook een achtergrondkleur aan de volledige lijst toegevoegd om het lezen te vergemakkelijken. ul # navigatie {zweven: links;marge: 0;opvulling: 0;breedte: 100%;achtergrondkleur: # 039;} Maar het geheim van het horizontale navigatiemenu bevindt zich in de lijstitems. Lijstitems zijn normaal gesproken blokelementen, wat betekent dat ze een nieuwe regel vóór en na elke regel hebben geplaatst. Door het display om te schakelen blok naar in lijn, forceer je de elementen in de lijst horizontaal naast elkaar te plaatsen. ul # navigation li {display: inline; } Ik behandelde de links precies zoals ik ze behandelde in het verticale navigatiemenu, met dezelfde kleuren en tekstdecoratie. Ik heb een bovenrand toegevoegd om de knoppen af te bakenen wanneer ze worden omgedraaid. Het enige dat werd verwijderd was het weergave: blok; omdat dat de nieuwe regels weer terugzet en het horizontale menu vernietigt. ul # navigation li a {tekstdecoratie: geen;opvulling: .25em 1em;border-bottom: solid 1px # 39f;border-top: vast 1px # 39f;border-right: solid 1px # 39f;}a: link, a: visited {color: #fff; }ul # navigation li a: hover {achtergrondkleur: #fff;kleur: # 000;} Een ander aspect van HTML is de identifier je bent hier. Als u uw menu wilt wijzigen om de huidige locatie van uw gebruikers aan te geven, gebruikt u dit gewoon ID kaart om een andere achtergrondkleur of een andere stijl te definiëren. Verplaats dat kenmerk ID kaart naar het juiste menu-item op andere pagina's, zodat de huidige pagina altijd is gemarkeerd. ul # navigation li # je hebt daar een {background-colour: # 09f; } Als u deze stijlen samenvoegt op uw pagina, kunt u een horizontale of verticale menubalk maken die geschikt is voor uw site, maar snel kan worden gedownload en zeer gemakkelijk in de toekomst kan worden bijgewerkt. Door XHTML + CSS te gebruiken, worden uw lijsten een zeer krachtig hulpmiddel voor ontwerp. Als u meer voorbeelden van horizontale menu's wilt, raadpleegt u het volgende.
Horizontaal navigatiemenu
U bent hier locatiegegevens
