Calculatoare, Software-ul
Cum sa faci un drop-down meniuri CSS
Astăzi, vom lua în considerare întrebarea „Cum pot crea un drop-down meniuri CSS?“. Ar trebui să spun imediat că acest element se va face fără a conecta orice fonduri suplimentare. Aceasta este, meniul va fi creat doar cu CSS si HTML.
pregătire
Pentru a înțelege pe deplin ceea ce este în el în articol, ai nevoie de un pic pentru a se familiariza cu materialul teoretic. Dar dacă sunteți familiarizați cu pseudo-clase, puteți sări peste acest paragraf. Deci, pentru a crea un drop-down meniuri CSS pe verticală, avem nevoie de un element ca «: Hover». Pseudo «: Hover» pot fi atribuite la orice etichetă HTML. Acesta vă permite să definiți momentul în care un element Treceți cu mouse-ul. De exemplu, am numit proprietate: «a: hover {color: red;}». Această intrare înseamnă că atunci când treceți cu mouse - ul se colorează în roșu pe conținutul oricărui etichetă. Este demn de remarcat faptul că acest element pseudo este, de asemenea, inactivată. Apropo, «: Hover» are legătură elemente similare. Dar din aceasta vom crea meniul drop-down pseudo CSS.
instrucție
În primul rând, trebuie să înțelegem ce este un meniu drop-down. În conformitate cu această definiție devine o mulțime de metode diferite pentru construirea diferite aspecte. În acest caz, vom analiza o structură formată din mai multe elemente vizibile în mod constant și mai multe suplimentare (ascunse). Să terminăm cu teoria și să înceapă să practice.
- Vom crea structura meniului nostru. Pentru a face acest lucru, etichetarea HTML-cod. Creați o listă imbricată:
-
- < / ul>. Ceva de genul asta ar trebui să arate ca meniul drop-down. CSS pentru a interveni mai târziu. În acest caz, lista principală constă din trei domenii principale și două închise.
- Ascundeți submeniul. Pentru aceasta folosim un stylesheet, definiți următoarele proprietăți: ul ul {display: none;} Aceasta va elimina elementele din a doua listă de pe ecran.
- Crearea unui meniu CSS, drop-down din lista principală. Foile de stil în cascadă a scrie următoarea regulă: ul li: hover ul {display: block;}. Această intrare înseamnă că, atunci când mouse-ul este deasupra li elementul, care se află în lista ul apare pe ecran ul (atașat). La prima vedere, un astfel de sistem poate părea complicat și confuz. Dar, de fapt, totul este foarte simplu.
- Utilizați acest aspect le prin introducerea tag-uri
- conținutul. Puteți modifica numărul de elemente din listă.
schimbări decorative
De îndată ce aspectul meniului principal este gata, puteți trece la înregistrare. Probabil, mulți, în primul rând doresc să scape de markeri care indica elementul din listă. Acest lucru se face folosind un singur CSS proprietate, și anume lista de stil-tip. Trebuie să adăugați următoarea mențiune: Li {list-style-type: none;}. Apoi , aveți posibilitatea să inserați rama și să facă fundal. Granița și fundal vă ajuta cu acest lucru. Poate că unii nu vor ca meniul vertical va apărea ca o listă suplimentară, împingând la aceleași elemente de bază. Pentru a remedia acest lucru, îl puteți poziționa. Pentru a face acest lucru, foi de stil în cascadă a scrie următoarea intrare: ul ul {position: absolute; stânga: 15px; dreapta: 15px; top: 15px; bottom: 15px;}. Desigur, valorile pe care le va folosi propria. În funcție de locul unde doriți să vedeți meniurile derulante, CSS va oferi mai multe caracteristici care pot adăuga diverse efecte și decorați listele noastre.
concluzie
Încă o dată, este demn de remarcat construirea aspectul meniului. Pentru a atribui regulile CSS folosite în această valoare caz încorporat, de exemplu, UL ul. Dacă sunteți în document pentru a satisface alte structuri similare, pot exista probleme mari. În aceste situații, trebuie să utilizați un anumit scop, de exemplu, selectoare sau id-ID-uri. Meniul drop-down articol aspect de mai sus este conceput pentru a familiariza design-ul general. Restul lucrării se bazează pe umeri.
Similar articles
Trending Now