Järk-järguline juhend
Kas teie navigeerimismenüü on horisontaalne rida ülaosas või vertikaalses reas külje all, on see ikkagi ainult nimekiri. Veebi navigeerimise kavandamisel on sageli lihtne unustada, et navigeerimismenüü on vaid austatud seoste rühmitus. Kuid kui programmeerite oma navigatsiooni XHTML + CSS abil, saate luua menüü, mis on allalaadimiseks väike (XHTML) ja mida saab hõlpsasti kohandada (CSS).
Alustamine
Navigeerimisloendi koostamise alustamiseks peate kasutama nimekirja.
See võib olla standardne järjestamata loend, mis on navigatsiooniks tuvastatud:
Kui vaatate HTML-i tähelepanelikult, märkate, et lingil "Kodu" on ka teie ID. See võimaldab teil luua menüü, mis tuvastab teie lugejate praeguse asukoha. Isegi kui te ei kavatse sellel saidil seda tüüpi visuaalset kii suumida, võite selle teabe lisada. Kui otsustate kleepsu hiljem lisada, on teie saidi ettevalmistamiseks vähem kodeeringut.
Ilma CSS-i kujundamiseta kuvatakse see XHTML-menüü nagu tavaline järjestamata loend. Siin on täppe ja nimekirja elemendid on veidi jäikad. Kuna ma kasutan kohahoidja linke , ei näe enamik brausereid linke klikkitavana (allajoonitud ja sinist värvi). Kui sisestate ülaltoodud HTML-i veebisaidile, kuvatakse teie navigeerimine järgmiselt:
- Kodu
- Tooted
- Teenused
- Võta meiega ühendust
See on päris igav ja ei näe välja nagu menüü. Kuid ainult mõned CSS-i stiilid loendisse lisatakse, saate luua menüü, mis uhkeldab teid.
Vertikaalne navigeerimismenüü
Vertikaalset navigeerimismenüüd on väga lihtne kirjutada, sest see kuvatakse samamoodi nagu tavaline nimekiri: üles ja alla.
Nimekiri kuvatakse lehel vertikaalselt.
Kui ma kujundame menüüsid, siis mulle meeldib alustada väljastpoolt ja töötada. Sellega seoses pean silmas, et ma esimest korda laadin ul # navigeerimist ja seejärel liigub elementidega, seejärel lingid jne. Nii saab selle menüü jaoks esmalt määrate menüü laiuse. See tagab, et isegi siis, kui menüüelemendid on pikad, ei lükka need ülejäänud skeemi üle ega põhjusta horisontaalset kerimine.
ul # navigation {width: 12em; }
Kui mul on laius, võin mängida nimekirja elementidega. See võimaldab mul määrata sellised asjad (täppide eemaldamiseks), taustavärvid, piirid, teksti joondamine ja marginaalid.
ul # navigation li {
loendi stiil: pole;
taustavärv: # 039;
border-top: solid 1px # 039;
teksti-joondus: vasakule;
marginaal: 0;
}
Kui olete määranud loendiüksuste põhitõed, mida saate hakata mängima, kuidas menüü kuvatakse linkide alal. Esimene stiil UL # navigeerimine LI A ja seejärel A: link, A: külastatud, A: hover ja A: aktiivne (kui soovite neid). Linkide jaoks sooviksin lingid luua ploki elemendi (mitte vaikimisi in-line). See sunnib neid võtma kogu LI ruumi ja nad toimivad pigem lõikega, mis muudab nende menüünuppudeks lihtsamaks stiili. Muu asi, mida ma alati teevad, on eemaldada allrükk (tekst-dekoratsioon: pole;); kuna see muudab nupud mulle rohkem nuppe.
Kuid loomulikult võib teie disain olla erinev.
ul # navigation li a {
kuva: plokk;
teksti-dekoratsioon: puudub;
padding: .25em;
border-bottom: tahke 1px # 39f;
piir-paremal: tahke 1px # 39f;
}
Pange tähele, et ekraaniga: plokk; lingid, on kogu menüüelemendi kasti klikitav, mitte ainult tähed. See on kasulik ka kasutatavusele. Veenduge, et soovite lingivärve (link, külastatud, hõljumine ja aktiivne) määrata, kui soovite, et need erineksid sinise, punase ja lilla värvist .
a: link, a: külastatud {color: #fff; }
a: hover, a: aktiivne {color: # 000; }
Mulle meeldib ka tausta värvi muutmisega hõlbustada natuke rohkem tähelepanu.
a: hõljumine {taustavärv: #fff; }
Kui soovite rohkem vertikaalsete menüüde näiteid, vaadake allpool toodud loendit.
- Styled vertikaalne menüü
- Basic Vertical Menüü mall
- Valmistatud vertikaalne menüü, kus olete siin
- Põhiline vertikaalne menüümall, kus olete siin
Horisontaalne navigeerimismenüü
Horisontaalsete navigatsioonimenüüde loomine on pisut keerukam kui vertikaalsed navigeerimismenüüd, kuna peate korvama tõsiasi, et HTML-loendid eelistavad kuvada vertikaalselt. Nagu horisontaalne menüü, looge esmalt oma navigeerimismenüüde loend :
Horisontaalmenüü loomiseks toimige samamoodi nagu vertikaalse menüüga. Alustage väljastpoolt ja töötage sisse. Kuna ma soovin, et minu navigeerimine vasakust nurgast alustataks, seadisin selle 0 vasakule äärele ja polsterile ja ma lohisin seda vasakule. Samuti peaksite harjumusse seadma laiuse, nii et teie menüü ei võtaks rohkem või vähem ruumi kui kavatsete. Horisontaalsete menüüde puhul on see tavaliselt disaini kogu laius. Lisasin ka kogu loendi taustavärvi, et oleks lihtsam lugeda.
ul # navigation {
ujuk: vasakule;
marginaal: 0;
padding: 0;
laius: 100%;
taustavärv: # 039;
}
Kuid horisontaalse navigeerimismenüü saladus on loendi üksustes. Nimekirjas olevad üksused on tavaliselt ploki elemendid, mis tähendab, et neil on uus jaotis enne ja pärast iga. Kui lülitate ekraani plokkilt inline, sunnib see nimekirja elemente horisontaalselt kõrvutama.
ul # navigeerimine li {display: inline; }
Ma käsitlesin linke täpselt nii, nagu käsitlesin neid vertikaalses navigeerimismenüüs, samade värvidega ja tekstilise kujundusega. Lisasin ülemise piiri nuppude tähistamiseks, kui need on hõljunud. Ainuke asi, mida ma eemaldasin, oli ekraan: blokk; kuna see paneb uued read uuesti horisontaalsesse menüüsse ja hävitab selle.
ul # navigation li a {
teksti-dekoratsioon: puudub;
padding: .25em 1em;
border-bottom: tahke 1px # 39f;
border-top: tahke 1px # 39f;
piir-paremal: tahke 1px # 39f;
}
a: link, a: külastatud {color: #fff; }
ul # navigeerimine li a: hover {
taustavärv: #fff;
värv: # 000;
}
Te olete siin asukohainfot
Veel üks HTML-i aspekt on teie identifikaator. Kui soovite muuta oma menüüd teie kasutajate praeguse asukoha näitamiseks, kasutage seda ID ainult teise taustavärvi või muu stiili määratlemiseks. Teisaldage ID-atribuut teistele lehtedele õige menüüelemendi juurde, et praegune lehekülg oleks alati esile tõstetud.
ul # navigeerimine li # youarehere {taustavärv: # 09f; }
Kui lisate oma lehele need stiilid, saate luua horisontaalse või vertikaalse menüüriba, mis töötab teie saidil, kuid mida saab kiiresti alla laadida ja mida on tulevikus väga lihtne värskendada. XHTML + CSS kasutamine muudab teie loendid väga võimasks disaini jaoks.
Kui soovite rohkem horisontaalsete menüüde näiteid, vaadake järgmist.
- Styled horisontaalne menüü
- Põhiline horisontaalne menüümall
- Styled horisontaalne menüü, kus olete siin
- Põhiline horisontaalse menüümall, kus sa oled siin