Simplu și spectaculos CSS3 meniul drop-down și jquery
Foarte des puteți găsi în șabloanele drop jos elemente de navigare. Dezvoltatorii folosesc acest tip pentru a afișa meniul ascuns de link-uri ascunse suplimentare, tematic legate de punctul principal. Puteți găsi exemple de panouri fly-out sau meniuri în stilul unui acordeon, care pune în aplicare acest principiu de navigare.
În primul rând vom construi un șablon de bază HTML5. Ai nevoie de cea mai recentă versiune de jQuery. vom obține de la API-ul Google. De asemenea, adăugați fișierul stilurile styles.css. care vor fi prezentate mai jos:
Acum ne uităm la structura, care se bazează pe o lista neordonata, în partea de sus a paginii. Întreaga listă este plasat în elementul HTML5
Structura codului este destul de simplu. Fiecare element din listă include un efect de selecție atunci când cursorul mouse-ului este în ea. Toate elementele interioare UL sunt conținute în elementul de lista inițială, astfel încât accentul să nu se pierde în cazul în care vă mutați în elementele de meniu drop-down.
navigare stiluri
O foaie de stil conține valori reinițializa proprietățile codului implicite. Mulți dezvoltatori includ fișier de la Eric Meye. dar în cazul nostru este prea greoaie. În plus, codul este stocat pe un server diferit, care, în sine, este o decizie proastă în acest caz.
În codul există o proprietate interesantă -webkit-font-netezire. Acesta este destinat pentru a netezi fonturile atunci când codul se execută în browser-ul rulează Mac OS X sau iOS.
Ne întoarcem acum la meniul nostru.
Adăugarea de selectare ul #ddmenu pentru selectarea tuturor elementelor interne din fiecare element din listă, deoarece este important pentru ei să determine distanța cu ajutorul de poziționare absolută. De asemenea, se adaugă tranziția liniară pentru toate link-urile care apare atunci când treceți peste ele.
Acum ia în considerare stabilirea pointerul membru superior. Acesta este format utilizând proprietatea de rotație și universale cadre cu fundal închis pentru umbră. Cu poziționare de compensare un element al structurii noastre este poziționat deasupra celuilalt, și generează o reprezentare vizuală a cursorului pe meniul drop-down.
Cea de a doua parte a codului comite toată acțiunea magică. Adăugăm o tratare a evenimentului pentru a procesa mouseover pe elementul listă. Handler se va opri animația activă curentă și va afișa un nou alineat folosind .slideDown (). Am stabilit, de asemenea, o scurtă întârziere pentru a răspunde numai la selecția reală element.
Prin obținerea de informații de la două canale (vedere si auz) eficacitatea instruirii de învățare departe superioare de cărți. O temele pentru acasă și teste on-line vă va permite să se gândească în mod constant în limba țintă și imediat verifica cunoștințele!
Dacă doriți o lungă perioadă de timp pentru a studia modul în HTML, mi-ai, pentru ai vesti bune!
Dacă ați învățat deja HTML și doresc să avanseze, următorul pas va fi de a studia tehnologia CSS.
Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!