Žingsnis po žingsnio vadovas
Nesvarbu, ar jūsų navigacijos meniu yra horizontali eilutė viršaus viršuje, ar vertikalioje eilutėje žemyn, tai vis tiek tik sąrašas. Projektuojant žiniatinklio naršymą dažnai paprasta pamiršti, kad navigacijos meniu yra tik garsi jungčių grupė. Tačiau jei programuosite navigaciją naudodami XHTML + CSS, galite sukurti meniu, kuris yra mažas (XHTML) ir kurį galima lengvai pritaikyti (CSS).
Pradžia
Norėdami pradėti kurti navigacijos sąrašą, turite naudoti sąrašą.
Tai gali būti standartinis netvarkingas sąrašas, kuris buvo identifikuotas kaip navigacija:
Jei atidžiai pažvelgsite į HTML, pastebėsite, kad nuoroda "Pradžia" taip pat turi jūsų ID. Tai leis jums sukurti meniu, kuriame bus nurodyta dabartinė jūsų skaitytojų vieta. Net jei planuojate, kad šiuo metu turėsite tokio pobūdžio vizualinį kablelį, galite įtraukti šią informaciją. Jei nuspręsite vėliau pridėti nuorodą, jūsų svetainė bus paruošta mažiau.
Be CSS stiliaus , šis XHTML meniu atrodo kaip standartinis netvarkingas sąrašas. Yra kulkų ir sąrašo elementai yra šiek tiek pakabinami. Kadangi naudoju " placeholder" nuorodas , dauguma naršyklių nerodys nuorodų kaip spustelėjamų (pabrėžtos ir mėlynos spalvos). Jei į HTML kodą įklijuosite į tinklalapį, navigacija atrodys taip:
- Namai
- Produktai
- Paslaugos
- Susisiekite su mumis
Tai yra gana nuobodus ir neatrodo labai panašus į meniu. Tačiau, įtraukdami į sąrašą tik keli CSS stiliai, galite sukurti meniu, kuris didžiuojasi.
Vertikali navigacijos meniu
Vertikalios navigacijos meniu labai lengva parašyti, nes jis rodomas taip pat, kaip įprastas sąrašas: aukštyn ir žemyn.
Sąrašo elementai rodomi puslapio vertikaliai žemyn.
Kai aš stiliaus meniu, man patinka pradėti iš išorės ir dirbti. Šiuo būdu aš turiu galvoje, kad aš pirmą kartą sukūriau ul # navigaciją ir tada pereikiu prie elementų li, tada nuorodų ir tt Taigi, šiame meniu, pirmiausia nustatysite meniu plotį. Tai užtikrins, kad net jei meniu elementai yra ilgi, jie nebespaudys likusio išdėstymo ar nesukels horizontalaus slinkimo.
ul # navigacija (plotis: 12em; }
Kai aš nustatysiu plotį, galėsiu žaisti su sąrašo elementais. Tai leidžia man nustatyti tokius dalykus kaip (atsikratyti kulkų), fono spalvos, sienos, teksto derinimas ir maržos.
ul # navigation li {
sąrašo stilius: nėra;
fono spalva: # 039;
border-top: solid 1px # 039;
text-align: left;
marža: 0;
}
Nustatę pagrindinius sąrašo elementus, kuriuos galite pradėti žaisti, kaip meniu atrodo nuorodos srityje. Pirmasis stilius UL # navigacija LI A, tada A: nuoroda, A: aplankyta, A: hover ir A: aktyvus (jei norite juos). Dėl nuorodų, man patinka, kad nuorodos būtų blokinis elementas (o ne pagal nutylėjimą eilutėje). Tai priverčia juos užimti visą LI erdvę, ir jie veikia labiau kaip pastraipa, todėl juos lengviau stilizuoti kaip meniu mygtukus. Kitas dalykas, kurį aš visada daro, yra pašalinti pabraukimą (teksto apdaila: nėra;), nes taip mygtukai man atrodo labiau kaip mygtukai.
Bet, žinoma, jūsų dizainas gali būti skirtingas.
ul # navigacijos li a {
ekranas: blokas;
teksto apdaila: nėra;
padding: .25em;
border-bottom: solid 1px # 39f;
parašas border-right: solid 1px # 39f;
}
Atkreipkite dėmesį, kad su ekranu: blokuoti; ant nuorodų, visas meniu elemento laukelis yra spustelėjamas, o ne tik raides. Tai taip pat naudinga naudojimui. Jei norite, kad jie skirtųsi nuo numatytos mėlynos, raudonos ir violetinės spalvos, būtinai nustatykite nuorodų spalvas (nuoroda, aplankyta, užveskite pelę ir aktyvus).
a: link, a: visited {color: #fff; }
a: Hover, a: active {color: # 000; }
Aš taip pat norėčiau šiek tiek daugiau dėmesio skirti slinkimo būsenai , pakeisdamas fono spalvą.
a: užveskite pelę {fono spalva: #fff; }
Jei norite gauti daugiau vertikalių meniu pavyzdžių, žr. Žemiau pateiktą sąrašą.
- Styled vertikalus meniu
- Pagrindinis vertikalus meniu šablonas
- Suplanuotas vertikalus meniu su jumis čia
- Pagrindinis vertikalus meniu šablonas, kuriame esate čia
Horizontalusis navigacijos meniu
Horizontalių navigacijos meniu kūrimas yra šiek tiek sudėtingesnis nei vertikalios navigacijos meniu, nes jūs turite kompensuoti tai, kad HTML sąrašai pageidauja rodyti vertikaliai. Kaip ir horizontaliuoju meniu, pirmiausia sukurkite navigacijos meniu sąrašą :
Norėdami sukurti horizontalų meniu, atlikite tą patį, kaip ir vertikaliuoju meniu. Pradėkite nuo lauko ir dirbkite. Kadangi noriu, kad mano navigacija prasidėtų kairiajame kampe, aš nustatiau ją su 0 kairiuoju kraštu ir užpildu, o aš jį plaukiu į kairę. Jūs taip pat turėtumėte įsivaizduoti, kaip nustatyti pločio plotį, kad jūsų meniu nepatektų daugiau ar mažiau vietos nei planuojate. Dėl horizontalių meniu tai paprastai yra visas dizaino plotis. Aš taip pat pridėjo fono spalvą visam sąrašui, kad būtų lengviau skaityti.
ul # navigation {
plūdė: kairė;
marža: 0;
padding: 0;
plotis: 100%;
fono spalva: # 039;
}
Tačiau horizontalaus navigacijos meniu paslaptis yra sąrašo elementuose. Paprastai sąrašo elementai yra blokiniai elementai, o tai reiškia, kad jie turi naują eilutę prieš ir po kiekvieno. Perjungiant ekraną iš bloko į inline, jūs priverčiate sąrašo elementus horizontaliai prilyginti vienas kitam.
ul # navigation li {display: inline; }
Aš elgtis su nuorodomis būtent taip, kaip juos išvalydavau vertikalioje navigacijos meniu su tokiomis pačiomis spalvomis ir teksto apdaila. Pridėjus viršutinę sritį, aš pridėjau mygtukus. Vienintelis dalykas, kurį pašaliniau, yra ekranas: blokas; nes tai sugrąžins naujus ženklus ir sunaikins horizontalų meniu.
ul # navigacijos li a {
teksto apdaila: nėra;
padding: .25em 1em;
border-bottom: solid 1px # 39f;
border-top: solidi 1px # 39f;
parašas border-right: solid 1px # 39f;
}
a: link, a: visited {color: #fff; }
ul # navigacija li a: užveskite {
fono spalva: #fff;
spalva: # 000;
}
Jūs esate čia Informacija apie vietą
Kitas HTML aspektas yra jūsų identifikatorius. Jei norite pakeisti savo meniu, norėdami nurodyti dabartinę savo naudotojų vietą, tiesiog naudokite šį ID, norėdami nustatyti kitą fono spalvą ar kitą stilių. Perkelkite šio ID atributą į teisingą meniu elementą kituose puslapiuose, kad dabartinis puslapis būtų visada paryškintas.
ul # navigacija ## yourehere {fono spalva: # 09f; }
Jei į savo puslapį pridėsite šiuos stiliaus elementus, galėsite sukurti horizontalią ar vertikalią meniu juostą, kuri dirbs su svetaine, bet greitai ją atsisiųsite ir kurią galėsite lengvai atnaujinti ateityje. Naudojant XHTML + CSS jūsų sąrašai paverčiami labai galingu dizaino įrankiu.
Jei norite gauti daugiau horizontaliųjų meniu pavyzdžių, pasitarkite su šiais klausimais.
- Stumdytas horizontalus meniu
- Pagrindinis horizontalusis meniu šablonas
- Styled Horizontalusis meniu su jumis čia
- Pagrindinis horizontalusis meniu šablonas, kuriame esate čia