Turinys

• Žengti
• 1 dalis iš 2: HTML rašymas
• 2 dalis iš 2: CSS rašymas
• Patarimai

Išskleidžiamajame meniu sukursite aiškią ir hierarchinę visų svarbių puslapio dalių ir puslapio poskyrių apžvalgą. Jūs tiesiog turite perkelti pelę ant pagrindinių skyrių, kad būtų rodomi poskyriai. Galite sukurti išskleidžiamąjį meniu naudodami tik HTML ir CSS.

Žengti

1 dalis iš 2: HTML rašymas

1. Sukurkite savo naršymo skyrių. Paprastai visos svetainės naršymo juostai naudojate „nav>“, mažesnėms nuorodų sekcijoms, susietoms su puslapiu, antraštę> arba „div>“, jei atrodo, kad netinka jokia kita parinktis. Įdėkite tai į elementą „div>“, kad galėtumėte koreguoti konteinerio ir paties meniu stilių.
   • div>
   • nav>
   • / nav>
   • / div>
2. Suteikite kiekvienai sekcijai klasės atributą. Vėliau naudosime klasės atributą, norėdami modifikuoti šių elementų stilių naudodami CSS. Tiek konteineriui, tiek meniu suteikite savo klasės atributą.
   • div>
   • nav>
   • / nav>
   • / div>
3. Pridėkite meniu elementų sąrašą. Nesutvarkytame sąraše (ul>) yra pagrindinio meniu elementai (sąrašo elementai li>). Jei vartotojas perkelia pelę ant jo, jis mato išskleidžiamuosius meniu. Pridėkite klasę „clearfix“ prie savo sąrašo elemento; mes tai aptarsime vėliau CSS skaičiuoklėje.
   • div>
   • nav>
   •       ul>
   •          li> Pradžia / li>
   •          li> Darbuotojai
   •          li> Kontaktai
   •          / li>
   •       / ul>
   • / nav>
   • / div>
4. Pridėti nuorodas. Jei šie aukščiausio lygio meniu elementai taip pat nukreipia į savo puslapius, dabar galite įterpti nuorodas. Susiekite su neegzistuojančiu inkaru (pvz., „#!“). Net jei jie nieko ir nesieja, vartotojo žymeklis atrodys kitaip. Šiame pavyzdyje kontaktas niekur neveda, bet kiti du meniu punktai:
   • div>
   • nav>
   • ul>
   • li>a href = "/">Namai/ a>/ li>
   • li>a href = "/ Darbuotojai">Personalas/ a>
   • / li>
   • li>a href = "#!">kontaktas/ a>
   • / li>
   • / ul>
   • / nav>
   • / div>
5. Sukurkite išskleidžiamųjų elementų antrinius sąrašus. Sukūrus stilių, šie sąrašai sudaro išskleidžiamąjį meniu. Įdėkite sąrašą į sąrašo elementą, kurį vartotojas užves. Pridėkite klasės atributą ir nuorodą, kaip ir anksčiau.
   • div>
   • nav>
   • ul>
   • li> a href = "/"> Pagrindinis / a> / li>
   • li> a href = "/ Darbuotojai"> Darbuotojai / a>
   •          ul>
   •             li> a href = "/ borsato"> Marco Borsato / a> / li>
   •             li> a href = "/ titulaer"> Chriet Titulaer / a> / li>
   •          / ul>
   • / li>
   • li> a href = "#!"> Kontaktai / a>
   •          ul>
   •             li> a href = "mailto: [email protected]"> Pranešti apie problemą / a> / li>
   •             li> a href = "/ support"> Klientų aptarnavimas / a> / li>
   •          / ul>
   • / li>
   • / ul>
   • / nav>
   • / div>

2 dalis iš 2: CSS rašymas

1. Atidarykite savo CSS stiliaus lapą. Jei nuoroda dar nėra, HTML dokumento antraštės skiltyje paskelbkite nuorodą į savo CSS stilių lentelę. Šiame straipsnyje nenagrinėsime CSS pagrindų, tokių kaip šrifto ir fono spalvos nustatymas.
2. Pridėti aiškų pataisos kodą. Pamenate, kaip į meniu sąrašą įtraukėte klasę „clearfix“? Paprastai išskleidžiamojo meniu elementai turi skaidrų foną, kuris leidžia perkelti kitus elementus. Paprastas pritaikymas CSS gali išspręsti šią problemą. Čia yra gražus, greitas sprendimas, nors jis neveiks „Internet Explorer 7“ ir ankstesnėse versijose:
   • .clearfix: po {
   • turinys: "";
   • rodyti: lentelę;
   • }
3. Sukurkite pagrindinį dizainą. Naudodami šį kodą galite įdėti savo meniu puslapio viršuje ir paslėpti išskleidžiamojo meniu elementus. Tai labai paprasta tikslu, kad galėtume sutelkti dėmesį į atitinkamą kodą. Vėliau galite jį modifikuoti naudodami papildomą CSS kodą, pvz., Užpildymą ir paraštę.
   • .nav-wrapper {
   • plotis: 100%;
   • fonas: # 008B8B;
   • }
   •  
   • .nav meniu {
   • padėtis: giminaitis;
   • ekranas: inline-block;
   • }
   •  
   • .sub meniu {
   • pozicija: absoliuti;
   • rodyti: nėra;
   • fonas: # 555;
   • }
4. Padarykite išskleidžiamojo meniu elementus rodomus, kai užveskite pelės žymeklį ant jų. Elementai išskleidžiamajame sąraše dabar nustatyti taip, kad jie nebūtų rodomi. Štai kaip padaryti, kad visas antrinis sąrašas būtų rodomas iškart, kai užveskite pelės žymeklį virš „tėvų“:
   • .nav-menu ul li: užveskite pelės žymeklį> ul {
   • rodyti: blokuoti;
   • }
   • Pastaba - jei išskleidžiamajame meniu esančiuose meniu elementuose yra paslėpti papildomi meniu, čia pridėtos ypatybės bus taikomos visiems meniu. Jei norite, kad stilius būtų taikomas tik pirmajam išskleidžiamųjų meniu lygiui, vietoj jo naudokite „.nav-menu> ul“.
5. Rodykle nurodykite, kad yra išskleidžiamasis meniu. Interneto dizaineriai paprastai rodo rodyklę žemyn, kad elementas atidaro išskleidžiamąjį meniu. Šis kodas prideda tą rodyklę prie kiekvieno jūsų meniu elemento:
   • .nav meniu> ul> li: po {
   • turinys: „ 25BC“; / * išvengta „unicode“ rodyklės žemyn * /
   • šrifto dydis: .5em;
   • rodyti: blokuoti;
   • pozicija: absoliuti;
   •    }
   • Pastaba - koreguokite rodyklės padėtį savybėmis viršuje, apačioje, dešinėje arba kairėje.
   • Pastaba - jei ne visi jūsų meniu elementai turi išskleidžiamuosius meniu, nekeiskite viso klasės naršymo meniu išvaizdos. Vietoj to, prie kiekvieno li elemento, kur norite rodyklės, pridėkite kitą klasę (pvz., Išskleidžiamąjį meniu). Nurodykite tą klasę aukščiau esančiame kode.
6. Sureguliuokite užpildymą, foną ir kitas savybes. Meniu turėtų veikti dabar, tačiau jis dar nėra labai gražus. Naudodami CSS ypatybes galite tinkinti, kaip atrodo kiekviena klasė ar elementas ir kur jie yra.

Patarimai

• Jei norite pridėti išskleidžiamąjį meniu prie formos, tai labai lengva HTML5 naudojant elementą pasirinkite>.
• Nuoroda „a href =" # "> slenka į puslapio viršų, o nuoroda, nukreipianti į neegzistuojantį inkarą, pvz.,„ Href = "#!">, „Neslinko“. Jei tai atrodo pernelyg aplaistyta, galite pakeisti žymeklio išvaizdą naudodami CSS.
• Nukopijavę ir įklijuodami kodo pavyzdį, pašalinkite visas kulkas.