Onko verkkosivustosi navigointivalikko vaakasuora rivi ylhäältä vai pystysuora rivi sivulta, se on vain luettelo. Suunnittelussa web-navigointi, navigointivalikko on linkkien ryhmä. Kun ohjelmoit navigoinnin XHTML + CSS: n avulla, voit luoda valikon, joka on pieni ladattavaksi (XHTML) ja helppo muokata (CSS).
Päästä alkuun
Jos haluat suunnitella luettelon navigointia varten, sinun on käytettävä luetteloa. Se voi olla tavallinen järjestämätön luettelo, joka on tunnistettu navigoinniksi. Esimerkiksi:
- Koti
- Tuotteet
- Palvelut
- Ota meihin yhteyttä
Kun tarkastellaan HTML-koodia, Koti-linkin tunnus on.
sinä olet täällä
Tämän avulla voit luoda valikon, joka tunnistaa lukijoiden nykyisen sijainnin. Vaikka et aio käyttää tällaista visuaalista vihjeä sivustollasi juuri nyt, voit sisällyttää nämä tiedot. Jos päätät lisätä vihjeen myöhemmin, sinulla on vähemmän koodausta valmistellaksesi sivustoasi.
Ilman yhtään CSS-muotoilu, tämä XHTML-valikko näyttää tavalliselta järjestämättömältä luettelolta. Luetteloita on, ja luettelokohdat ovat hieman sisennyttyjä. Käytettäessä
paikkamerkkien linkit, useimmat selaimet eivät näytä linkkejä napsautettavina (alleviivattuina ja sinisinä). Kun liität HTML-koodin verkkosivulle, navigointisi näyttää tältä:- Koti
- Tuotteet
- Palvelut
- Ota meihin yhteyttä
Tämä ei näytä paljon kuin valikko. Muutama CSS-tyyli lisätään luetteloon, mutta voit luoda valikon, joka tekee sinusta ylpeän.
Jos haluat lisää esimerkkejä vertikaalivalikoista, tee verkkohaku seuraaville:
- Tyyliltään pystysuora valikko
- Pystysuora valikkomalli
- Tyylitelty pystysuora valikko, jossa olet täällä
- Pystysuora valikkomalli Sinä olet täällä
Pystysuuntainen navigointivalikko
Pystysuuntainen navigointivalikko on helppo kirjoittaa, koska se näkyy samalla tavalla kuin tavallinen luettelo: ylös ja alas. Luettelokohteet näkyvät pystysuunnassa sivua alaspäin.
Kun muotoilet valikoita, aloita ulkopuolelta ja työskentele sisään. Suunnittele ensin navigointi:
ul # navigointi
Siirry sitten elementteihin ja linkkeihin. Määritä ensin valikon leveys. Tämä varmistaa, että jos valikkokohteet ovat pitkiä, ne eivät työnnä loppuasettelua yli tai aiheuta vaakasuoraa vieritystä.
ul # navigation {leveys: 12em; }
Kun olet asettanut leveyden, käsittele luettelokohteita. Tämän avulla voit asettaa esimerkiksi taustavärejä, reunoja, tekstin tasauksen ja marginaaleja.
ul # navigation li {
list-style: ei mitään;
taustaväri: # 039;
reunan yläosa: kiinteä 1px # 039;
tekstin tasaus: vasen;
marginaali: 0;
}
Kun olet määrittänyt luettelokohteiden perustiedot, selvitä, miltä valikko näyttää linkkialueella. Suunnittele navigointi ensin:
UL # navigation LI A
Tyylittele sitten seuraava:
Linkki
A: vieraili
V: Vie hiiri
A: aktiivinen
Tee linkeille linkki lohkoelementiksi (ei oletusarvoiseksi riviksi). Tämä pakottaa linkit viemään koko LI-tilan ja toimimaan kuin kappale, jolloin linkit on helpompi muotoilla valikkopainikkeina. Poista sitten seuraavat:
alleviivaus, tekstikoristelu: ei mitään; kuten
Tämän ansiosta painikkeet näyttävät enemmän painikkeilta. Suunnittelusi saattaa olla erilainen.
ul # navigation li a {
näyttö: lohko;
tekstikoristelu: ei mitään;
pehmuste: .25em;
reunapohja: kiinteä 1px # 39f;
reuna-oikea: kiinteä 1px # 39f;
}
Kanssa näyttö: lohko; asetettu linkkeihin, valikkokohdan koko ruutu on napsautettavissa, ei vain kirjaimet. Tämä on myös hyvä käytettävyydelle. Määritä linkin värit (linkki, vierailtu, hiiren osoitin ja aktiivinen), jos haluat linkkien olevan erilaiset kuin oletussininen, punainen ja violetti.
a: linkki, a: vierailtu {color: #fff; }
a: leijuva, a: aktiivinen {väri: # 000; }
Voit myös kiinnittää hiiren tilaan vähän huomiota muuttamalla taustaväriä.
a: hiiren osoitin {background-color: #fff; }
Vaakasuuntainen navigointivalikko
Vaakasuuntaisten navigointivalikoiden luominen on hieman vaikeampi kuin pystysuuntaiset navigointivalikot, koska sinun on korvattava se tosiasia, että HTML-luettelot näyttävät mieluummin pystysuunnassa. Kuten vaakavalikossa, luo navigointivalikkoluettelo:
- Koti
- Tuotteet
- Palvelut
- Ota meihin yhteyttä
Luo vaakasuuntainen valikko toimimalla samalla tavalla kuin pystyvalikossa. Aloita ulkopuolelta ja työskentele sisään. Aloita navigointi vasemmasta kulmasta asettamalla se 0 vasemmalla marginaalilla ja täytteellä ja kelluttamalla sitä vasemmalle.
Saa tapana asettaa leveys, jotta valikkosi ei vie enemmän tai vähemmän tilaa kuin aiot. Vaakavalikoissa tämä on yleensä mallin koko leveys. Voit myös lisätä taustaväri luetteloon helpottamaan lukemista.
ul # navigation {
kellua: vasen;
marginaali: 0;
pehmuste: 0;
leveys: 100%;
taustaväri: # 039;
}
Vaakasuuntaisen navigointivalikon salaisuus on luettelokohdissa. Luettelokohteet ovat yleensä lohkoelementtejä, mikä tarkoittaa, että näissä kohteissa on uusi rivi ennen kutakin ja sen jälkeen. Vaihtamalla näytön lohkosta riviin pakotat luetteloelementit riviin vaakatasossa vierekkäin.
ul # navigation li {display: inline; }
Käsittele linkkejä täsmälleen samalla tavalla kuin pystysuuntainen navigointivalikko, samoilla väreillä ja tekstikoristeluilla. Lisää yläreuna piirtääksesi painikkeet, kun käyttäjä vie hiiren painikkeen päälle. Poista sitten näyttö: lohko; koska se asettaa uudet viivat takaisin ja tuhoaa vaakavalikon.
Olet täällä sijaintitiedot
Toinen HTML: n osa on tämä tunniste:
sinä olet täällä
Jos haluat muokata valikkoa osoittamaan käyttäjien nykyisen sijainnin, määritä tällä tunnuksella toinen taustaväri tai toinen tyyli. Siirrä kyseinen attribuuttitunnus oikeaan valikkokohtaan muilla sivuilla, jotta nykyinen sivu korostetaan aina.
Jos yhdistät nämä tyylit sivullesi, voit luoda vaaka- tai pystysuuntaisen valikkopalkin, joka toimii sivustosi kanssa ja on nopeasti ladattava ja helppo päivittää. XHTML + CSS: n käyttäminen muuttaa luettelosi tehokkaaksi suunnittelutyökaluksi.
Jos haluat lisää esimerkkejä vaakavalikoista, etsi verkosta seuraavia:
- Tyyliltään vaakavalikko
- Vaakasuora valikkomalli
- Tyyliltään vaakasuora valikko, jossa olet täällä
- Vaakasuora valikkomalli olet täällä