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 ID
tu esi čia. 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, aš norėčiau pradėti iš išorės ir dirbti. Šiuo būdu aš turiu galvoje, kad aš pirmą kartą stiliaus
ul # navigacija ir tada pereikite prie
li elementai, tada nuorodos ir pan. Taigi, šiame meniu pirmiausia nustatote 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. Pirmas stilius UL # navigacija LI Air tada Nuoroda, A: aplankyta, A: užveskite pelę, 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ą erdvę Li- ir jie veikia labiau kaip pastraipa, dėl kurios 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 panašūs į mygtukus. 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 ekranas: blokas; 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šą. 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š blokuoti į inline, jūs priverčiate sąrašo elementus horizontaliai šalia vienas kito. 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 pašalintas buvo 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;} Kitas HTML aspektas yra identifikatorius tu esi čia. Jei norite pakeisti savo meniu, norėdami nurodyti dabartinę jūsų naudotojų vietą, tiesiog naudokite šią funkciją ID nustatyti kitą fono spalvą ar kitą stilių. Perkelti šį atributą ID į 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.
Horizontalusis navigacijos meniu
Jūs esate čia Informacija apie vietą
