Ükskõik, kas teie veebisaidi navigeerimismenüü on horisontaalne rida ülaosas või vertikaalne rida allapoole, on see vaid loend. Kujundamisel veebis navigeerimine, on navigeerimismenüü linkide rühm. Kui programmeerite navigeerimise XHTML + CSS-i abil, saate luua menüü, mis on väike allalaadimiseks (XHTML) ja hõlpsasti kohandatav (CSS).
Alustamine
Navigeerimise loendi kujundamiseks peate kasutama loendit. See võib olla tavaline tellimata loend, mis on määratletud navigeerimisena. Näiteks:
- Kodu
- Tooted
- Teenused
- Võta meiega ühendust
HTML-i vaadates on lingi Kodu ID.
sa oled siin
See võimaldab teil luua menüü, mis tuvastab teie lugejate praeguse asukoha. Isegi kui te ei kavatse oma saidil praegu seda tüüpi visuaalset märguannet saada, võite selle teabe lisada. Kui otsustate märguande hiljem lisada, on teil oma saidi ettevalmistamiseks vähem kodeeringuid.
Ilma ühegi CSS-i stiil, näeb see XHTML-menüü välja nagu tavaline tellimata loend. On täppe ja loendiüksused on veidi taandatud. Kasutamisel
kohatäite lingid, ei näita enamik brausereid linke klõpsatavana (allajoonitud ja sinisega). HTML-i kleepimisel veebilehele näeb navigeerimine välja järgmine:- Kodu
- Tooted
- Teenused
- Võta meiega ühendust
See ei sarnane eriti menüüga. Kui loendisse on lisatud paar CSS-i stiili, saate luua menüü, mis teeb teid uhkeks.
Kui soovite rohkem vertikaalsete menüüde näiteid, tehke veebiotsing järgmistele:
- Stiilne vertikaalne menüü
- Põhiline vertikaalse menüü mall
- Stiilne vertikaalne menüü, kus olete siin
- Peamine vertikaalse menüü mall, kus olete siin
Vertikaalse navigeerimismenüü
Vertikaalset navigeerimismenüüd on lihtne kirjutada, sest see kuvatakse samamoodi nagu tavaline loend: üles ja alla. Loendi üksused kuvatakse lehe all vertikaalselt.
Menüüde kujundamisel alustage väljastpoolt ja töötage sisse. Kõigepealt stiilige navigeerimine:
ul # navigeerimine
Seejärel liikuge elementide ja linkide juurde. Kõigepealt määrake menüü laius. See tagab, et kui menüüelemendid on pikad, ei lükka üksused ülejäänud paigutust üle ega põhjusta horisontaalset kerimist.
ul # navigation {laius: 12em; }
Pärast laiuse määramist töötage loendi üksustega. See võimaldab teil määrata selliseid asju nagu taustavärvid, äärised, teksti joondamine ja veerised.
ul # navigation li {
list-style: puudub;
taustavärv: # 039;
ääris: tahke 1px # 039;
teksti joondamine: vasak;
varu: 0;
}
Kui olete loendiüksuste põhitõed määranud, uurige, kuidas menüü linkide alal välja näeb. Esmalt stiilige navigeerimine:
UL # navigation LI A
Seejärel kujundage järgmine stiil:
A: link
A: külastatud
A: hõljutage kursorit
A: aktiivne
Lingide jaoks muutke lingid plokielemendiks (mitte reaalseks vaikeseadeks). See sunnib linke hõivama kogu LI ruumi ja toimima nagu lõik, muutes linke menüünuppudena lihtsamaks. Seejärel eemaldage järgmine:
allajoonimine, teksti kaunistamine: puudub; as
See muudab nupud pigem nuppudeks. Teie kujundus võib olla erinev.
ul # navigation li a {
kuva: plokk;
teksti kaunistamine: puudub;
polster: .25em;
ääris-põhi: tahke 1px # 39f;
ääris paremal: tahke 1px # 39f;
}
Koos kuva: plokk; linkidele seatuna on klõpsatav kogu menüükasti kast, mitte ainult tähed. See on hea ka kasutatavuse jaoks. Kui soovite, et lingid erinevad sinistest, punastest ja lilladest, määrake lingi värvid (link, külastatud, hõljutatud ja aktiivne).
a: link, a: külastatud {color: #fff; }
a: hõljutage kursorit, a: aktiivne {color: # 000; }
Samuti saate hõljumisolekule pisut tähelepanu pöörata, muutes taustavärvi.
a: hõljutage kursorit {background-color: #fff; }
Horisontaalne navigeerimismenüü
Horisontaalsete navigeerimismenüüde loomine on vertikaalsetest navigeerimismenüüdest veidi keerulisem, sest peate kompenseerima asjaolu, et HTML-i loendid eelistavad vertikaalset kuvamist. Nagu horisontaalse menüü puhul, looge navigeerimismenüü loend:
- Kodu
- Tooted
- Teenused
- Võta meiega ühendust
Horisontaalse menüü loomiseks toimige samamoodi nagu vertikaalse menüüga. Alustage väljastpoolt ja töötage sisse. Vasakus nurgas navigeerimise alustamiseks määrake see 0 vasaku veerise ja polsterdusega ning hõljutage vasakule.
Harjuge seadma laiust nii, et teie menüü ei võtaks rohkem või vähem ruumi, kui kavatsete. Horisontaalsete menüüde puhul on see tavaliselt kogu kujunduse laius. Võite ka lisada taustavärv loetellu, et seda oleks lihtsam lugeda.
ul # navigation {
ujuk: vasak;
varu: 0;
polster: 0;
laius: 100%;
taustavärv: # 039;
}
Horisontaalse navigeerimismenüü saladus on loendi üksustes. Loendiüksused on tavaliselt plokielemendid, mis tähendab, et nendele üksustele on iga rea ette ja järele pandud uus rida. Kui lülitate ekraani plokilt sisse, sunnite loendi elemendid üksteise kõrval horisontaalselt joonduma.
ul # navigation li {display: inline; }
Käsitlege linke täpselt samamoodi nagu vertikaalset navigeerimismenüüd, samade värvide ja teksti kaunistustega. Nuppude piiritlemiseks lisage ülemine äär, kui kasutaja hõljutab nuppu. Seejärel eemaldage kuva: plokk; kuna see paneb uued read uuesti sisse ja hävitab horisontaalse menüü.
Olete siin asukohateavet
HTML-i teine aspekt on see identifikaator:
sa oled siin
Kui soovite oma menüüd muuta, et näidata kasutajate praegust asukohta, kasutage seda ID-d erineva taustavärvi või muu stiili määratlemiseks. Teisaldage see atribuudi ID teistel lehtedel õigesse menüüpunkti, nii et praegune leht on alati esile tõstetud.
Kui panete need stiilid oma lehele kokku, saate luua horisontaalse või vertikaalse menüüriba, mis töötab teie saidiga, on kiiresti allalaaditav ja hõlpsasti värskendatav. XHTML + CSS-i kasutamine muudab teie loendid võimsaks kujundamise tööriistaks.
Kui soovite rohkem horisontaalmenüüde näiteid, otsige veebist järgmist:
- Stiilne horisontaalne menüü
- Horisontaalse menüü põhimall
- Stiilne horisontaalne menüü, kus olete siin
- Põhiline horisontaalne menüü mall, kus olete siin