Nesvarbu, ar jūsų svetainės naršymo meniu yra horizontali eilutė viršuje, ar vertikali eilutė žemyn, tai tik sąrašas. Projektuojant žiniatinklio naršymas, naršymo meniu yra nuorodų grupė. Kai programuojate navigaciją naudodami XHTML + CSS, galite sukurti nedidelį atsisiuntimo (XHTML) ir lengvai pritaikomo (CSS) meniu.
Pradžia
Norėdami sukurti navigacijos sąrašą, turite naudoti sąrašą. Tai gali būti standartinis nesutvarkytas sąrašas, kuris buvo identifikuotas kaip navigacija. Pavyzdžiui:
- Namai
- Produktai
- Paslaugos
- Susisiekite su mumis
Žiūrint į HTML nuorodą Pagrindinis turi ID.
tu esi čia
Tai leidžia jums sukurti meniu, nurodantį dabartinę jūsų skaitytojų vietą. Net jei šiuo metu neplanuojate tokio tipo vaizdinių ženklų savo svetainėje, galite įtraukti šią informaciją. Jei nuspręsite vėliau pridėti žymą, turėsite mažiau kodų, kad paruoštumėte savo svetainę.
Be jokių CSS stilius, šis XHTML meniu atrodo kaip standartinis nesutvarkytas sąrašas. Yra kulkų, o sąrašo elementai yra šiek tiek įdėti. Naudojant
vietos ženklų nuorodos, daugelyje naršyklių nuorodos nerodomos kaip paspaudžiamos (pabrauktos ir mėlynos). Kai įklijuosite HTML į tinklalapį, naršymas atrodys taip:- Namai
- Produktai
- Paslaugos
- Susisiekite su mumis
Tai nelabai atrodo kaip meniu. Tačiau pridėję kelis CSS stilius į sąrašą galite sukurti meniu, kuris jus didžiuotų.
Jei norite daugiau vertikalių meniu pavyzdžių, atlikite internetinę paiešką, atlikdami šiuos veiksmus:
- Stilingas vertikalus meniu
- Pagrindinis vertikalaus meniu šablonas
- Stilingas vertikalus meniu su „Jūs esate čia“
- Pagrindinis vertikalaus meniu šablonas su „Jūs esate čia“
Vertikalios navigacijos meniu
Vertikalų naršymo meniu lengva parašyti, nes jis rodomas taip pat, kaip įprastas sąrašas: aukštyn ir žemyn. Sąrašo elementai puslapio apačioje rodomi vertikaliai.
Kurdami meniu, pradėkite nuo išorės ir dirbkite. Pirmiausia suformuokite navigaciją:
ul # navigacija
Tada pereikite prie elementų ir nuorodų. Pirmiausia nustatykite meniu plotį. Tai užtikrina, kad jei meniu elementai yra ilgi, elementai neperstums likusio maketo ir nesukels horizontalaus slinkimo.
ul # navigation {plotis: 12em; }
Nustačius plotį, dirbkite su sąrašo elementais. Tai leidžia nustatyti tokius dalykus kaip fono spalvos, kraštinės, teksto lygiavimas ir paraštės.
ul # navigation li {
list-style: nėra;
fono spalva: # 039;
„border-top“: kietas 1px # 039;
text-align: kairė;
paraštė: 0;
}
Nustačius sąrašo elementų pagrindus, padirbėkite, kaip meniu atrodo nuorodų srityje. Pirmasis naršymo stilius:
UL # navigation LI A
Tada suformuokite taip:
Nuoroda
A: aplankė
A: užveskite pelės žymeklį
A: aktyvus
Nuorodoms padarykite nuorodas blokiniu elementu (o ne numatytuoju eilutėje). Tai priverčia nuorodas užimti visą LI erdvę ir veikti kaip pastraipa, todėl nuorodas lengviau formuoti kaip meniu mygtukus. Tada pašalinkite šiuos dalykus:
pabraukimas, teksto dekoravimas: nėra; kaip
Dėl to mygtukai atrodo labiau kaip mygtukai. Jūsų dizainas gali būti kitoks.
ul # navigation li a {
rodyti: blokuoti;
teksto dekoravimas: nėra;
paminkštinimas: .25em;
apatinis kraštas: vientisas 1 taškas # 39f;
kraštas-dešinė: kietas 1px # 39f;
}
Su rodyti: blokuoti; nustatytas ant nuorodų, spustelėjamas visas meniu punkto langelis, ne tik raidės. Tai taip pat naudinga naudoti. Jei norite, kad nuorodos skirtųsi nuo numatytosios mėlynos, raudonos ir violetinės, nustatykite nuorodų spalvas (nuoroda, aplankyta, užveskite pelės žymeklį ir aktyvi).
a: nuoroda, a: aplankyta {spalva: #fff; }
a: pelės žymeklis, a: aktyvus {spalva: # 000; }
Taip pat galite šiek tiek atkreipti dėmesį į žymeklio būseną, pakeisdami fono spalvą.
a: užveskite pelės žymeklį {background-color: #fff; }
Horizontalios navigacijos meniu
Kurti horizontalius naršymo meniu yra šiek tiek sunkiau nei vertikalius naršymo meniu, nes jūs turite atsverti tai, kad HTML sąrašai nori rodyti vertikaliai. Kaip ir horizontaliame meniu, sukurkite naršymo meniu sąrašą:
- Namai
- Produktai
- Paslaugos
- Susisiekite su mumis
Norėdami sukurti horizontalųjį meniu, dirbkite taip pat, kaip ir su vertikaliuoju meniu. Pradėkite nuo išorės ir dirbkite. Norėdami pradėti naršymą kairiajame kampe, nustatykite 0 kairę paraštę ir užpildą ir plaukite kairėn.
Įpraskite nustatyti plotį, kad jūsų meniu neužimtų daugiau ar mažiau vietos, nei ketinate. Horizontaliems meniu tai dažniausiai yra visas dizaino plotis. Taip pat galite pridėti fono spalva į sąrašą, kad būtų lengviau skaityti.
ul # navigation {
plūdė: kairė;
paraštė: 0;
užpildas: 0;
plotis: 100%;
fono spalva: # 039;
}
Horizontalaus naršymo meniu paslaptis yra sąrašo elementuose. Sąrašo elementai paprastai yra blokiniai elementai, o tai reiškia, kad šie elementai turi naują eilutę prieš kiekvieną ir po jų. Perjungdami ekraną iš bloko į įterptąjį, priverčiate sąrašo elementus išsidėstyti horizontaliai šalia vienas kito.
ul # navigation li {display: inline; }
Su nuorodomis elkitės tiksliai kaip su vertikaliuoju naršymo meniu, su tomis pačiomis spalvomis ir teksto apdaila. Pridėkite viršutinę kraštinę, jei norite išskirti mygtukus, kai vartotojas užveda pelės žymeklį virš mygtuko. Tada nuimkite rodyti: blokuoti; nes tai vėl įtraukia eilutes ir sunaikina horizontalųjį meniu.
Jūs esate čia Vietovės informacija
Kitas HTML aspektas yra šis identifikatorius:
tu esi čia
Jei norite pakeisti savo meniu, kad nurodytumėte dabartinę savo naudotojų vietą, naudokite šį ID norėdami apibrėžti kitą fono spalvą ar kitą stilių. Perkelkite tą atributo ID į teisingą meniu punktą kituose puslapiuose, kad dabartinis puslapis visada būtų paryškintas.
Jei sujungsite šiuos stilius į savo puslapį, galite sukurti horizontalią arba vertikalią meniu juostą, kuri veikia su jūsų svetaine, yra greitai atsisiunčiama ir lengvai atnaujinama. Naudojant XHTML + CSS sąrašai paverčiami galingu dizaino įrankiu.
Jei norite daugiau horizontalių meniu pavyzdžių, ieškokite žiniatinklyje:
- Stilingas horizontalus meniu
- Pagrindinis horizontalaus meniu šablonas
- Stilingas horizontalus meniu su „Jūs esate čia“
- Pagrindinis horizontalaus meniu šablonas su „Jūs esate čia“