Kaip padaryti išskleidžiamąjį CSS meniu

Instrukcijos

Visų pirma verta suprasti, koks yra išskleidžiamasis meniu. Pagal šį apibrėžimą yra daug skirtingų įvairių maketų sudarymo metodų. Šiuo atveju mes išardysime konstrukciją, susidedančią iš kelių nuolat matomų elementų ir kelių papildomų (paslėptų) elementų. Baigkime teorija ir pradėkime praktikai.

• Sukurkite mūsų meniu išdėstymą. Norėdami tai padaryti, mes padarysime HTML žymėjimą. Sukurkite įterptą sąrašą:
  • / Ul>. Tai turėtų atrodyti kaip išskleidžiamasis meniu. CSS pradės veikti šiek tiek vėliau. Šiuo atveju pagrindinis sąrašas susideda iš trijų pagrindinių elementų ir dviejų įdėklų.
  • Slėpti papildomą meniu. Norėdami tai padaryti, mes naudojame stilių lenteles, apibrėžiame šią nuosavybę: ul ul {display: none;} Iš ekrano bus pašalinti antrojo sąrašo elementai.
  • Sukurkite meniu CSS, išbraukiant iš pagrindinio sąrašo. Kaskadinių stilių lapuose rašome tokią taisyklę: ul li: hover ul {display: block;}. Šis įrašas reiškia, kad, kai užveskite pelę virš li elemento, esančio ul sąraše, ekrane pasirodo ul (nesusieta). Iš pirmo žvilgsnio tokia schema gali atrodyti pernelyg sudėtinga ir paini. Bet iš tikrųjų viskas yra labai paprasta.
  • Savaime naudokite šį išdėstymą, įterpdami turinį tarp
  • žymių. Galite pakeisti sąraše esančių elementų skaičių.

  Dekoratyviniai pokyčiai

  Kai tik pagrindinis meniu išdėstymas bus paruoštas, galite tęsti savo dizainą. Tikriausiai dauguma iš pradžių nori atsikratyti žymeklių, kurie žymi sąrašo elementą. Tai atliekama naudojant vieną CSS nuosavybę, ty stiliaus stilių. Jums reikia pridėti šį įrašą: li {list-style-type: none;}. Tada galite įterpti rėmelį ir sukurti foną. Sienos ir fono ypatybės jums padės. Galbūt kai kurie nepatinka, kad išplečiamasis meniu pasirodys kaip papildomas sąrašas, o pagrindiniai elementai bus išplėsti. Norėdami išspręsti šią problemą, galite jį išdėstyti. Norėdami tai padaryti, pakopinio stiliaus lapuose rašykite tokį įrašą: ul ul {position: absolute; Kairysis: 15 px; Dešinėje: 15 pikselių; Viršus: 15 pikselių; Bottom: 15px;}. Žinoma, vertės, kurias naudosite savo. Priklausomai nuo to, kur norite pamatyti išskleidžiamąjį meniu, CSS pasiūlys daugybę kitų savybių, kurios gali papildyti skirtingus efektus ir papuošti mūsų sąrašus.

  Išvada

  Dar kartą verta paminėti meniu išdėstymą. Tokiu atveju priskiriant CSS taisykles naudojate įterptąsias vertes, pvz., Ul ul. Jei dokumente yra kitų panašių dizainų, gali kilti didelių problemų. Tokiose situacijose jums reikia naudoti konkretesnį tikslą, pvz., Selektorius ar ID identifikatorius. Šiame straipsnyje pateiktame išskleidžiamajame meniu išdėstymas skirtas susipažinti su bendru dizainu. Likusi darbo dalis yra ant pečių.