Olipa navigointivalikko vaakasuora rivi ylhäällä tai pystysuora rivi alaspäin, se on silti vain luettelo. Web-navigointia suunniteltaessa on usein helppo unohtaa, että navigointivalikko on vain kirkastettu linkkilinkki. Mutta jos suunnittelet navigointiasi XHTML + CSS: llä, voit luoda valikon, joka on pieni ladattavaksi (XHTML) ja helppo muokata (CSS).
Päästä alkuun
Jos haluat aloittaa navigoinnin luettelon suunnittelun, sinun on käytettävä luetteloa. Se voi olla standardi järjestämättömät luettelot, jotka on tunnistettu navigointi:
Jos tarkastelet tarkasti HTML-koodia, huomaat myös, että kotisivulla on myös tunnus
sinä olet täällä. Tämän avulla voit luoda valikon, joka tunnistaa lukijoiden nykyisen sijainnin. Vaikka et suunnittele tämäntyyppisen visuaalisen vihjeen tällä sivustolla, voit sisällyttää kyseiset tiedot. Jos päätät lisätä vihjeen myöhemmin, sinulla on vähemmän koodausta sivustosi valmisteluun.
Ilman CSS-muotoilua tämä XHTML-valikko näyttää tavalliselta järjestämättömältä luettelolta. Luettelomerkkejä on listattu ja listat ovat hieman sisennettyjä. Koska käytän paikkamerkkiliitoksia, useimmat selaimet eivät näytä linkkejä napsautettaviksi (alleviivattuna ja sinisenä). Jos liitä yllä oleva HTML verkkosivustoon, navigointi näyttää tältä:
- Koti
- Tuotteet
- Palvelut
- Ota meihin yhteyttä
Tämä on melko tylsää ja ei näytä paljon valikosta. Mutta vain muutamalla CSS-tyylillä lisätty luetteloon, voit luoda valikon, joka tekee sinusta ylpeä.
Pystysuuntainen valikko
Pystysuuntainen navigointivalikko on helppo kirjoittaa, koska se näyttää samalla tavoin kuin tavallinen lista: ylös ja alas. Luettelotiedot näkyvät pystysuunnassa sivun alaspäin.
Kun suunnittelemme valikoita, haluan aloittaa ulkoa ja työskennellä. Tällä tarkoitan, että aluksi muotoilen
ul # navigointi ja siirry sitten
li elementtejä ja sitten linkkejä jne. Joten tässä valikossa määrität ensin valikon leveyden. Tämä varmistaa, että vaikka valikkokohteet ovat pitkiä, ne eivät työnnä loput ulkoasusta tai aiheuttavat vaakasuoraa vieritystä.
ul # navigation {leveys: 12em; }
Kun leveys on asetettu, voin leikkiä luettelon kohteiden kanssa. Tämä sallii minun asettaa asioita (päästä eroon luoteista), taustavärejä, reunoja, tekstin kohdistamista ja marginaaleja.
ul # navigation li {list-style: none;taustaväri: # 039;border-top: kiinteä 1px # 039;teksti-align: left;marginaali: 0;} Kun olet määrittänyt luettelokohteiden perusasiat, voit aloittaa soittamisen siihen, miten valikko näyttää linkkien alueella. Ensimmäinen tyyli UL # navigointi LI Aja sitten Linkki, V: vieraili, A: hover, ja V: aktiivinen (jos haluat niitä). Linkkien suhteen haluan tehdä linkit lohkoelementiksi (pikemminkin kuin oletusarvoisesti in-line). Tämä pakottaa heidät ottamaan vastaan koko tilan LI- ja ne toimivat enemmän kuin kappale, mikä tekee niistä helpompaa tyyliä valikkopainikkeina. Toinen asia, jota aina teen, on poistaa alleviiva ( teksti-decoration: none;), sillä näin painikkeet näyttävät enemmän kuin painikkeet minulle. Mutta tietenkin, suunnittelu voi olla erilainen. ul # navigation li a {näyttö: lohko;teksti-decoration: none;täyttö: .25em;raja-pohja: kiinteä 1px # 39f;raja-oikea: kiinteä 1px # 39f;} Huomaa, että näyttö: lohko; asetetaan linkit, koko valikon kohta on napsautettava, ei vain kirjaimia. Tämä on myös hyvä käytettävyyteen. Varmista, että asetat linkkien värit (linkki, vierailu, ajo ja aktiivinen), jos haluat, että ne ovat erilaiset kuin oletus sininen, punainen ja violetti. a: linkki, a: vieraili {color: #fff; }a: hover, a: aktiivinen {väri: # 000; } Haluan myös antaa leijuvastaustilaa hieman enemmän huomiota muuttamalla taustavärin. a: hover {taustaväri: #fff; } Jos haluat lisää esimerkkejä pystysuorista valikoista, katso alla olevaa luetteloa. Horisontaalisten navigointivalikkojen luominen on hieman vaikeampaa kuin pystysuorat navigointivalikot, koska sinun on korvattava se, että HTML-luettelot haluavat näyttää pystyasennossa. Kuten horisontaalivalikossa, luo aluksi navigointivalikko seuraavasti:
Voit luoda horisontaalisen valikon toimimaan samalla tavalla kuin pystysuorassa valikossa. Aloita ulkopuolelta ja työskentele sisään. Koska haluan navigoinnin alkavan vasemmassa kulmassa, asetan sille 0 vasemmalle marginaalille ja pehmusteelle, ja kellan se vasemmalle. Sinun tulisi myös tavata asettaa leveys niin, että valikko ei vie enemmän tai vähemmän tilaa kuin aiot. Vaakasuorille valikoille tämä on tavallisesti koko leveys. Lisäsin myös taustan värin koko luetteloon, jotta lukeminen olisi helpompaa. ul # navigation {float: vasen;marginaali: 0;pehmuste: 0;leveys: 100%;taustaväri: # 039;} Mutta horisontaalisen navigointivalikon salaisuus on listan kohteissa. Luettelomerkit ovat yleensä lohkoelementtejä, mikä tarkoittaa, että niillä on uusi rivin sijoittaminen ennen jokaista ja sen jälkeen. Vaihdetaan näyttöä lohko että linjassa, pakotat listan elementit liikkumaan vierekkäin vaakasuoraan. ul # navigointi li {display: inline; } Käsittelin linkkejä aivan kuten käsittelin niitä pystysuorassa navigointivalikossa, samoilla väreillä ja tekstin sisustuksella. Lisäsin yläreunan, jolla voit piirtää painikkeet, kun ne liikkuvat. Ainoa asia oli poistettu näyttö: lohko; sillä se asettaa uudet rivit takaisin ja tuhoaa horisontaalisen valikon. ul # navigation li a {teksti-decoration: none;pehmuste: .25em 1em;raja-pohja: kiinteä 1px # 39f;border-top: kiinteä 1px # 39f;raja-oikea: kiinteä 1px # 39f;}a: linkki, a: vieraili {color: #fff; }ul # navigointi li a: hover {taustaväri: #fff;väri: # 000;} Toinen HTML-muoto on tunniste sinä olet täällä. Jos haluat muokata valikkoasi ilmoittamaan käyttäjän nykyisen sijainnin, käytä tätä ID määritellä eri taustavärin tai muun tyylin. Siirrä tämä ominaisuus ID oikeaan valikkokohtaan muilla sivuilla niin, että nykyinen sivu on aina korostettuna. ul # navigointi li # sinä olet a {taustaväri: # 09f; } Jos laitat nämä tyylejä sivuillesi, voit luoda horisontaalisen tai pystysuoran valikkorivin, joka toimii sivustossasi, mutta on nopea ladata ja päivittämään sitä helposti tulevaisuudessa. XHTML + CSS: n käyttäminen muuttaa listasi erittäin tehokkaaksi suunnittelutyökaluksi. Jos haluat enemmän esimerkkejä horisontaalisista valikoista, katso seuraavia ohjeita.
Vaakasuuntainen valikko
Olet täällä Sijainti tiedot
