Vaiheittainen opas
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, että Home-linkillä on myös tunnuksesi. 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, aloittelen ulkona ja työskentelen sisään. Tarkoitan tällä tavalla, että alun perin alun perin ul # navigointi ja siirry li elementteihin ja sitten linkkeihin jne. Joten tähän valikkoon, ensin määrität 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 A ja sitten A: linkki, A: vieraili, A: hover ja A: aktiivinen (jos haluat niitä). Linkkien suhteen haluan tehdä linkit lohkoelementiksi (pikemminkin kuin oletusarvoisesti in-line). Tämä pakottaa heidät ottamaan koko LI: n tilan ja he toimivat enemmän kuin kappale, mikä tekee heistä helpomman tyyliä valikkopainikkeina. Toinen asia, jota aina teen, on poistaa alleviivaus (teksti-decoration: none;); koska tämä tekee painikkeet näyttävät enemmän painikkeita 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äytöllä: 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.
- Styled Vertical -valikko
- Basic Vertical -valikkomalli
- Tyylitelty pystysuora valikko sinä täällä
- Basic Vertical -valikkomalli, jossa olet täällä
Vaakasuuntainen valikko
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. Vaihtaessasi näyttöä lohkosta sisäänpäin, pakotat listan elementit liikkumaan vierekkäin vaakasuunnassa.
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, jonka poistan, oli 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;
}
Olet täällä Sijainti tiedot
Toinen HTML-elementti on sinä itsesi tunniste. Jos haluat muokata valikkoa ilmoittamaan käyttäjien nykyisen sijainnin, käytä tätä tunnusta määritelläksesi toisen taustaväri tai muu tyyli. Siirrä kyseinen ID-attribuutti oikeille valikkokohteille 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.
- Muotoiltu vaakavalikko
- Vaakasuuntainen perusvalikoima
- Tyylitelty vaakavalikko sinä täällä
- Perus Vaaka-valikkomalli, jossa olet täällä