Să punem în aplicare ideea noastră folosind cele mai obișnuite CSS. În articolul următor, dacă îmi amintesc, voi descrie același efect folosind jQuery. Dar deocamdată, să începem să analizăm această metodă. Dar mai întâi, vă voi sugera să vedeți ce se întâmplă până la urmă:
În primul rând, să scriem HTML codul nostru de meniu. Meniul va fi simplu. De exemplu, va avea 2 articole, fiecare dintre ele va avea o listă derulantă cu subarticole.
Cred că totul este clar aici, cel mai simplu meniu cu 2 niveluri. După cum am spus, meniul are două elemente principale, puteți adăuga câte doriți dacă este necesar. Apoi trebuie doar să adăugați stiluri care vor face toată magia :)
#slow_nav > ul( width: 500px; margin:25px auto 0; ) #slow_nav > ul > li( list-style: none; display: inline-block; position:relative; padding:0; ) #slow_nav a(text- decoration:none;) #slow_nav > ul > li > a( font-size:18px; padding:5px; background-color:#333; color:#fff; ) #slow_nav li ul( position:absolute; list-style: none; text-align: center-size: 15px margin: 0 /* Aceste linii sunt necesare pentru ca animația să funcționeze corect */ max-height: hidden; ; -moz-transition:max-height 0.4s linear /* end */ ) #slow_nav li:hover ul( max-height :300px; ) #slow_nav li ul li( background-color:#333; border-bottom: 1px solid #888; ) #slow_nav li ul li:last-child( border-bottom:none; ) #slow_nav li ul li a ( padding:5px 12px; color:#fff; display:block; ) #slow_nav li ul li :hover( background-color:#444; ) #slow_nav li ul li:first-child( margin-top:25px; position: relative; ) #slow_nav li ul li:first-child:before( conținut:""; poziție:absolut; lățime:1px; înălțime:1px; chenar:5px solid transparent; border-bottom-color:#333; stânga:10px; sus :-10px)
Codul CSS nu este mic, dar nu este în mod inerent complex. Dacă aveți abilități de aspect, vă puteți da seama cu ușurință ce și cum. Voi evidenția doar câteva puncte care sunt importante.
Primul lucru este animația în sine. Codul necesar este evidențiat în comentariile din cod - /* Aceste linii sunt necesare pentru ca animația să funcționeze corect */. Nu puteți șterge din, altfel animația nu va mai funcționa. În această bucată de cod, inițial am setat înălțimea la zero pixeli -
înălțime maximă: 0px;și setați proprietatea preaplin:ascuns; pentru a ascunde meniul nostru copil, adică meniul drop-down. Apoi am configurat o proprietate între browsere tranziție, care va realiza animația.
Webkit-tranziție: înălțime maximă 0.4s liniară; -moz-tranzitie:max-inaltime 0.4s liniar; tranziție:max-înălțime 0,4s liniară;
Aici puteți schimba doar timpul de animație. Timpul este setat în prezent la 0,4 secunde. Imediat după setarea animației, a fost adăugată o proprietate pentru a seta o nouă înălțime atunci când treceți cursorul peste elementele din meniul principal:
#slow_nav li:hover ul( max-height:300px; )
Iată o poză. Înălțimea este setată la un maxim fix, dacă înălțimea meniului derulant este mai mare, atunci modificați valoarea la una mai mare. În caz contrar, meniul tău va fi tăiat la 300 de pixeli în înălțime.
Această metodă poate fi aplicată nu numai meniurilor auto-scrise, ci și acelorași meniuri dinamice care sunt create de sistemele de management al conținutului, de exemplu WordPress. Pentru a face acest lucru, trebuie să modificați puțin stilurile și asta este tot. Adică, nu trebuie să utilizați primul cod HTML, ci doar stiluri. În stiluri, trebuie să înlocuiți numele ID #slow_nav cu ceea ce aveți și poate să modificați alte lucruri mici. Nu voi intra în detalii. Fiecare caz necesită o abordare personală, așa că scuzați-mă :) Am dat o idee și o metodă, și rămâne la latitudinea dvs. să decideți dacă o folosiți sau nu.
Asta e tot, mulțumesc pentru atenție. 🙂
Salutari! Dacă ești un designer de layout începător, atunci mai devreme sau mai târziu te vei confrunta cu faptul că vrei să-ți însufleți cumva paginile, fă-le măcar puțin interactive. Animațiile CSS vă pot ajuta în cel mai bun mod posibil aici. Dar trebuie să știi unde și cum să le folosești.
Astăzi vă voi spune cum să faci un meniu drop-down pe golCSSȘi cum să-i adaugi netezime folosind animație CSS. Dacă nu știți, atunci este timpul să vă familiarizați cu elementele de bază.
Meniul aspect HTML + CSS
În primul rând, pentru a avea ceva cu care să lucrăm, să creăm un meniu simplu cu un singur nivel. Să nu ne deranjam prea mult cu designul, pentru claritate, acesta va fi suficient:
Ce avem? Cea mai obișnuită listă nenumerată cu identificatorul „top_menu” și cu link-uri împachetate în elementele acestei liste. Totul este banal și simplu. Elementele din meniu își schimbă culoarea când treceți cu mouse-ul deasupra... știți deja acest lucru și înțelegeți cum să o faceți (sper).
Adăugarea unui meniu de al doilea nivel
Pentru a crea un meniu cu mai multe niveluri, trebuie să adăugăm o a doua listă nenumerată în prima. Cred că ai trecut prin asta undeva în lecțiile inițiale. Și, de asemenea, faptul că trebuie inserat nu doar în lista noastră, ci tocmai în interiorul elementului listă, adică eticheta „ li„, imediat după eticheta de închidere „a”.
Poziționăm liste imbricate absolut relativ la „ li”, în care sunt încorporate. Si tot " li» nivelul superior este poziționat în raport cu ( relativ). Pentru ca meniul drop-down să fie localizat Imediat după meniul nostru de nivel superior, acesta (meniul drop-down – „ meniul_interior" trebuie specificat
Poziție: absolută; sus: 100%;
Adică, decalajul față de marginea de sus a părintelui va fi egal cu înălțimea părintelui. Foarte logic, după părerea mea.
Pe lângă poziționare, trebuie să stilați meniul drop-down ca un meniu de nivel superior. Un măr dintr-un măr, cum se spune...
După cum puteți vedea, meniul nostru derulant nu pare încă a fi derulant, ci a fost abandonat și suspendat. Dar e în regulă, vom rezolva asta în curând.
Cum să faci un meniu dropdown într-adevăr dropdown
Nimic nu ar putea fi mai ușor! Pentru a face din lista noastră imbricată un meniu derulant, trebuie doar să o ascundeți! Și apoi deschideți numai când cursorul mouse-ului se deplasează peste elementul de meniu de nivel superior, care conține un meniu drop-down. Poate suna puțin complicat, dar de fapt poate fi rezolvat în doar câteva rânduri de cod.
Adăugați în meniul derulant:
Display: niciunul;
Și pentru a-l afișa, trebuie să scrieți:
#top_menu > li:hover > ul ( display: block; )
Ce ne spun toată această grămadă de selectori? Citim de la final. Setăm stiluri (vizibilitate) pentru lista de al doilea nivel, care se află în interiorul elementului de listă de primul nivel, dar aceste stiluri vor funcționa numai dacă trecem cu mouse-ul peste elementul „li" care conține lista noastră de al doilea nivel.
Sper că m-am clarificat. Dacă nu, încearcă să o citești de câteva ori. Mai bine, înțelegeți doar uitându-vă la cod. Să vedem ce avem:
Da, se pare că am realizat ceea ce ne-am dorit - am făcut un meniu derulant, un meniu derulant adevărat, nenorocitul! Dar îi lipsește ceva. Știi ce? Finete! La urma urmei, totul pare ca și cum meniul nu dispare, ci pur și simplu apare. Și foarte brusc, chiar instantaneu, aș spune.
Ei bine, hai să lucrăm mai multă magie asupra lui.
Meniu derulant neted, ușor
Deci haideți să facem un meniu derulant ușor folosind CSS pur. De ce să faci asta? Pentru că oamenilor le place când totul este neted și moale... și arată frumos. Va fi un plus pentru utilizarea site-ului dvs. Să mergem!
Rețineți că puteți anima doar valori matematice exacte, cum ar fi 50px și 300px, 0 și 100%, 0,5 și 1,0 și așa mai departe. În cazul nostru, nu vom putea anima cele două stări ale meniului nostru vertical ( afisare:niciuna;Și display:bloc;).
Dar le putem înlocui cu transparență - opacitate:0 și opacitate:1. Și setați timpul în care meniul nostru va apărea dintr-o stare transparentă. Da, într-adevăr va funcționa, dar nu este chiar efectul la care te-ai fi așteptat. Deci, haideți să facem totul un pic mai complicat. Dar merită, crede-mă.
Pentru a face animația mai lină și mai previzibilă, a trebuit să setăm o înălțime fixă elementelor din meniul derulant, deși ne-am fi putut descurca fără asta. Există o mulțime de metode, doar veniți cu combinații și rezolvați probleme.
După cum puteți vedea din cod, am animat înălțimea elementelor listei derulante și transparența acestora. Acest lucru a fost suficient pentru a crea o animație frumoasă și netedă a meniului derulant.
De ce ne trebuia pentru animație? Două stări ale elementelor noastre de meniu, precum și proprietatea de tranziție, care au interpolat aceste stări, adică au umplut toate valorile intermediare în perioada de timp alocată. Asta e tot!
Ar putea fi chiar mai ușor să faceți acest lucru folosind jQuery, dar am declarat mai întâi că vom lucra cu CSS pur astăzi. L-ați putea face și mai frumos adăugând curbe Bezier la animații, dar acest subiect este puțin dincolo de sfera de azi. Dar cu siguranță vom reveni la el mai târziu.
Concluzie:
Acum le puteți arăta prietenilor și familiei că știți cum să faceți un meniu drop-down în CSS pur. Aceasta este o abilitate cu adevărat utilă, care va fi utilă de mai multe ori. Ei bine, judecă singur, câte site-uri ai văzut cu un meniu static? Nu, majoritatea site-urilor au un meniu derulant.
Apropo, aceasta a fost prima mea lecție de CSS. Descrieți cum vă place? Ai explicat totul clar sau trebuie să explici mai detaliat? Și chiar merită să continui să scrii articole pe tema life hack-urilor în CSS?
Vă mulțumim pentru atenție și ne vedem curând!
Ai citit până la capăt?
A fost de ajutor articolul?
Nu chiar
Ce anume nu ți-a plăcut? A fost articolul incomplet sau fals?
Scrieți în comentarii și promitem să ne îmbunătățim!
Îmi doream de mult să scriu un articol despre cum să fac submeniu în CSS. Mulți oameni o fac JQueryși iese destul de bine, totuși, întregul principiu de bază al creației submeniu în CSS O voi preciza aici. Și apoi, pornind de la această bază, puteți îmbunătăți și mai mult submeniul.
il aduc imediat Cod CSS:
* html ulli (
plutește la stânga;
}
* html ulli a (
înălțime: 1%;
}
ul (
chenar-jos: 1px solid #000;
stil de listă: niciunul;
marja: 0;
umplutură: 0;
lățime: 100px;
}
ulli (
poziție: relativă;
}
ulli a (
afisare: bloc;
chenar: 1px solid #000;
chenar-jos: 1px;
umplutură: 5px;
text-decor: niciuna;
}
li ul (
afișaj: niciunul;
stânga: 99px;
poziție: absolută;
sus: 0;
}
li:hover ul (
afisare: bloc;
}
Cel mai important lucru aici este selectorul " li:hover ul". De fapt, arată conținutul meniului. În mod implicit, acesta " display: niciunul", iar când treceți cu mouse-ul peste un element de meniu, submeniul devine: " afisare: bloc", adică vizibil. Acesta este cel mai important lucru. Tot în primele două selectoare (care cu * ) vine Hack CSS Pentru I.E., altfel nimic nu va funcționa în acest browser fără el. Orice altceva este aspectul, care, desigur, poate fi schimbat.
aduc si cod HTML:
Acasă
Meniul 1
Submeniul 1
Submeniul 2
Submeniul 3
Meniul 2
Submeniul 4
Submeniul 5
Submeniul 6
Submeniul7
Submeniul 8
Dacă te gândești cu atenție la această structură, totul devine foarte clar. Etichetă ul- creează un meniu. Dacă ul este în interiorul altuia ul, atunci acesta este deja un submeniu. O etichetă li este responsabil pentru un anumit element de meniu.
Desigur, meniul este cel mai simplu, atât ca logică și structură, cât și ca design. Desigur, puteți folosi JQuery faceți o deschidere lină. De asemenea, puteți schimba designul, dar întregul principiu va rămâne același ca în acesta submeniu scris în CSS și HTML.
Salutare tuturor. Astăzi vom continua subiectul despre meniurile derulante și vom vorbi despre cum să o facem. Ca de obicei, un mod de vizualizare demonstrativ va fi disponibil pentru fiecare exemplu, precum și fișiere pentru descărcare.
Dacă ați ajuns din întâmplare pe acest site sau ați căutat altul, vă sfătuiesc să urmați link-ul, există multe meniuri diferite pentru site-ul adunate acolo.
Există destul de multe meniuri verticale pentru site-uri web, în acest tutorial vă voi arăta doar un meniu vertical vertical pe CSS la hover cu un drop-down la dreapta și la stânga, precum și meniuri derulante pe mai multe niveluri . Alte opțiuni pentru meniurile verticale pentru site vor fi descrise în următoarele lecții. Și așa vom călca.
Navigare în pagină:
Ca o introducere, cred că merită să spunem cum funcționează abandonurile în CSS.
Toate browserele care rulează de pe un computer sau laptop au proprietatea CSS disponibilă :planare(Ma înșel puțin aici, aceasta este o pseudo-clasă :) pe baza căreia puteți construi aproape orice meniu vertical vertical.
Dar ce să faci cu browserele mobile? - sau pe tablete întrebați.
Din fericire, dezvoltatorii de browsere mobile au oferit (din păcate nu peste tot) posibilitatea de a declanșa pseudo-clasa:hover la primul clic pe un link, dacă este descris în CSS. Datorită acestor eforturi, majoritatea utilizatorilor vor putea vedea meniul vertical CSS.
Câteva cuvinte despre beneficiile meniurilor derulante:
- puteți încadra meniuri foarte lungi într-un spațiu limitat;
- designul devine mai elegant;
- factorii comportamentali se îmbunătățesc parțial.
Meniu vertical vertical din dreapta
Vă prezint primul exemplu: un simplu meniu vertical vertical la dreapta la hover.
Vom începe să scriem meniul cu cod html și să-l facem universal pentru liste, opțiunea de răspuns este identică cu ceea ce returnează wordpress.
Html pentru meniul vertical
Cred că în ceea ce privește înțelegerea html-ului nu veți avea dificultăți, liste tipice cu etichete ul și li. Să ne uităm la cod:
Meniu pentru un site bazat pe liste: unele articole au blocuri drop-down, altele nu. Totul este extrem de simplu, cred că nu este nevoie de explicații.
Meniu vertical vertical CSS
Cu stilurile CSS problema este puțin mai complicată. Vă voi arăta doar codul meniului în sine și puteți vedea restul stilurilor când descărcați exemplul.
#menuVertical(lățime:100%;înălțime:auto;) #menuVertical ul( afișare:bloc; lățime:100%; înălțime:auto; margin:0px; padding:0px; list-style:none; poziție:relativ; ) # meniuVertical ul li(afișare:bloc; lățime:100%; înălțime:auto; poziție:relativ;) #menuVertical ul li a( poziție:relativ; afișare:bloc; lățime:100%; înălțime:auto; dimensiune casetă:bord -box; font-weight:bold-line-height:1px solid 236A92 ul li:first-child; ;) #menuVertical ul li a:hover, #menuVertical ul li:hover a( background:#0A3CC1; ) #menuVertical ul li ul( position:absolute; top:0px; left:100%; display:none; width:auto ; ) /******show dropdown on hover********/ #menuVertical ul li: hover ul(display:block;) #menuVertical ul li ul li a( white-space:nowrap; text-transform:none padding:5px 20px ) #menuVertical ul li ul li a:hover( background:#75C1D4; culoare:#0A3CC1; )
Iată această linie de CSS
#menuVertical ul li:hover ul(display:block;)
Responsabil pentru cădere. Afișează un bloc derulant la trecerea cu mouse-ul. Stilurile rămase sunt necesare pentru a stila meniul în sine, precum și pentru plasarea corectă a listelor/elementelor de meniu.
Puteți vedea ce am obținut în acest exemplu pe piele:
Puteți vedea mai jos cum funcționează un meniu vertical CSS în modul demonstrativ sau descărcând un exemplu:
Iată un exemplu simplu de meniu derulant cu care am venit.
Să presupunem că trebuie să creați un meniu derulant la trecerea cursorului cu un meniu derulant din stânga. Pe baza exemplului unei căderi la dreapta, acum o vom implementa.
Meniu vertical din stânga în CSS
Lăsăm codul HTML la fel, nu are rost să-l schimbăm. Cu excepția cazului în exemplul în sine, va trebui să schimb blocurile din stânga și din dreapta, pentru claritatea exemplului. (veți vedea descărcând exemplul de la sfârșit)
Stilurile CSS vor fi ușor diferite, deși nu dramatic. În exemplul meu simplu, este suficient să corectezi o valoare. Îl voi eticheta în comentarii.
Pentru meniuri mai complexe, va trebui să mai faceți câteva modificări. Să ne uităm la stiluri:
#menuVertical(lățime:100%;înălțime:auto;) #menuVertical ul( afișare:bloc; lățime:100%; înălțime:auto; margin:0px; padding:0px; list-style:none; poziție:relativ; ) # meniuVertical ul li(afișare:bloc; lățime:100%; înălțime:auto; poziție:relativ;) #menuVertical ul li a( poziție:relativ; afișare:bloc; lățime:100%; înălțime:auto; dimensiune casetă:bord -box; font-weight:bold-line-height:1px solid 236A92 ul li:first-child; ;) #menuVertical ul li a:hover, #menuVertical ul li:hover a( background:#0A3CC1; ) #menuVertical ul li ul( position:absolute; top:0px; right:100%;/*schimbat aici*/ display :none; width:auto; ) /********show dropdown on hover ******** / #menuVertical ul li:hover ul(display:block;) #menuVertical ul li ul li a ( white-space:nowrap; text-transform:none; padding:5px 20px; ) #menuVertical ul li ul li a:hover( background:#75C1D4; culoare:#0A3CC1; )
Asta e tot. Am ajuns cu acest meniu. În stânga este o piele pe care se poate face clic, în dreapta este o demonstrație și un link pentru a descărca exemplul:
Meniu vertical pe mai multe niveluri
În viața reală, meniurile verticale cu mai multe niveluri care se derulează la trecerea cursorului sunt destul de rare. Am vrut să arăt câteva exemple din depozitul meu, dar, din păcate, nu le-am putut găsi. va trebui sa o fac :) Nu este nimic complicat în aceste meniuri pentru site, CSS tipic pentru un drop-down.
Sa incepem. Să începem cu codul HTML. Vom adăuga mai multe liste ul li pentru următoarele niveluri ale site-ului. Exemplul meu va avea 3 submeniuri derulante, deci codul html va fi astfel:
Fiți atenți, doar al treilea element de meniu are un meniu derulant pe mai multe niveluri, eu nu am făcut restul, pentru a nu aglomera codul HTML și există atât de mult.
#menuVertical(lățime:100%;înălțime:auto;) #menuVertical ul( afișare:bloc; lățime:100%; înălțime:auto; margin:0px; padding:0px; list-style:none; poziție:relativ; ) # meniuVertical ul li(afișare:bloc; lățime:100%; înălțime:auto; poziție:relativ;) #menuVertical ul li a( poziție:relativ; afișare:bloc; lățime:100%; înălțime:auto; dimensiune casetă:bord -box; font-weight:bold-line-height:1px solid 236A92; :0px;) #menuVertical ul li a:hover, #menuVertical ul li:hover a( background:#0A3CC1; ) #menuVertical ul li ul( position:absolute; top:0px; left:100%; display:none; width :150px; ) /******show dropdown on hover********/ #menuVertical ul li:hover > ul(display:block;) #menuVertical ul li ul li a( text-transform :none; padding:5px 20px ) #menuVertical ul li ul li a:hover, #menuVertical ul li ul li:hover > a( background:#75C1D4; culoare:#0A3CC1; )
Acestea sunt stiluri pentru crearea unui meniu vertical vertical pe mai multe niveluri la dreapta la trecerea cursorului. Opțiunea cu o picătură la stânga va fi puțin mai departe. Haideti sa vedem mai jos ce am obtinut in poza (skin pe care se poate face clic).
Poate fi creat fără JavaScript și/sau jQuery. Pentru a-l crea, utilizați afișarea proprietăților CSS, padding, pseudo-class:hover. Este posibil un meniu de lucru (faceți clic pe „Fork” dacă doriți să proiectați meniul HTML în felul dvs.). Durata videoclipului ~12 min. Nota este destinată designerilor de layout începători și dezvoltatorilor web care fac primii pași pentru a învăța elementele de bază ale HTML și CSS; pentru cei care au studiat cursul „Basele HTML5 și CSS3”.
Crearea unui meniu derulant simplu
Pentru a crea un meniu site-ul folosește de obicei o structură de bloc Element de navigare HTMLȘi lista nenumerata. Într-unul dintre elementele listei, o altă listă este încorporată astfel încât să nu fie inclusă în hyperlink. Ar fi posibil să plasați ul în interiorul a, dar în opinia mea aceasta nu este o idee foarte bună, deoarece pseudo-class:hover funcționează și cu elemente li!
În cazul nostru, nu luăm în considerare opțiunea când lista verticală Există, de asemenea, liste imbricate - această sarcină nu este dificilă în sine, dar va cauza dificultăți pentru un designer de layout începător. De asemenea, rețineți că construirea unui meniu se poate face prin găsirea sau scrierea JavaScript-ului adecvat.
Pentru comoditatea de a lucra cu marcaj (deodată vom întâlni o altă navigare), vom adăuga o clasă CSS la elementul nostru de navigare structurală; Vom face cioturi de hiperlinkuri, dar puteți scrie http://site în loc de # :)
Marcare HTML pentru un meniu cu un submeniu drop-down
Principalul lucru în CSS: ștergerea valorilor implicite pentru elementele HTML incluse în meniu; ascunderea viitoarei subliste derulante ( submeniu) și afișarea acestuia atunci când treceți cu mouse-ul peste elementul HTML părinte - folosind pseudo-clasa: hover
Reguli CSS pentru un meniu drop-down.menu ul li( padding: 10px; ) .menu ul > li:hover( background-color: #f96; ) .menu ul ul > li:hover( background-color: #69e; ) . meniu ul li, .menu ul( display: inline-block; ) .menu ul( poziție: relativă; margine: 0; umplutură: 0; culoare de fundal: #f63; ) .menu ul ul( afișare: niciunul; poziție: absolut; culoare de fundal: #369 margin-top: 10px margin-left: -10px ) .menu ul a( culoare: #fff; text-decor: none; .menu ul a( culoare: #fff ; text -decor: niciunul ) .menu li:hover ul( display: block; ) .menu li:hover li( display: block; )
Meniul creat nu este perfect și poate fi îmbunătățit (gândește-te cum). Succes în dezvoltarea ta și poate că crearea unor astfel de meniuri nu va fi niciodată dificilă!
Se încarcă...