Meniul drop-down Css jquery la clic. Deschidere ușoară a meniului folosind jQuery. Meniu de navigare derulant
După ce am primit mai multe solicitări, am decis să scriu un articol despre cum să faci un meniu derulant. Cel mai bun și mai ușor mod de a crea un astfel de meniu este să te bazezi pe jQuery.
Să ne uităm mai întâi la marcajul HTML
Meniu derulant simplu bazat pe jQuery Meniu derulant simplu
- Acasă
- Produse
- Servicii
- Contactaţi-ne
Conţinut
Există o listă simplă neordonată de ul , etichetele sale li stau la baza meniului de navigare. Apoi, adăugați codul de mai jos la eticheta li corespunzătoare, aceasta va structura lista derulantă.
Dacă ești atent, vei observa două lucruri:
1. Eticheta li are o clasă drop-down.
2. Link-ul părinte are clasa ddIcon.
Clasa drop-down este folosită în jQuery pentru a afișa/ascunde un meniu drop-down. A doua clasă, ddIcon, este folosită pentru a afișa un indicator către meniul drop-down.
Nu este nimic special în ceea ce privește stilurile de meniu - stilurile obișnuite sunt:
Container ( lățime: 960px; margine: 0 automat; padding-top: 50px; ) .container h1 (dimensiune font: 30px; culoare: #666; margin-bottom: 1em; ) .container nav (border-radius: 4px; culoare de fundal: #fff; înălțime: 37px; ) .container nav ul li (poziție: relativ; float: stânga; ) .container nav ul li a ( dimensiunea fontului: 12px; text-decor: niciunul; greutatea fontului: bold; text-transform: majuscule; culoare: #545454; umplutură: 13px 15px; afișare: bloc; chenar-dreapta: 1px solid #f9f9f9; ) .container nav ul li a.ddIcon ( fundal: transparent url("dd.png") ") no-repeat 86% 52%; padding: 13px 25px 13px 15px; ) .container nav ul li a:hover ( background-color: #cc333f; color: #fff; ) .container nav ul li.active a ( fundal -culoare: #cc333f; culoare: #fff; ) .container nav ul li:first-child a (border-radius: 4px 0 0 4px; ) .container nav ul li .subNav (poziție: absolut; fundal-culoare: # cc333f; umplutură: 15px 15px 20px; lățime: 172px; stânga: 0px; sus: 38px; afișare: niciunul; ) .container nav ul li .subNav .navSection ( padding: 5px 0; ) .container nav ul li .subNav h4 ( margin-bottom: 0,5em; ) .container nav ul li .subNav h4 a ( font-size: 11px; culoare: #edc951; text-transform: capitalize; border-bottom: 1px solid #D33B47; umplutură: 7px 10px; ) .container nav ul li .subNav h4 a:hover (culoare: #edc951; ) .container nav ul li .subNav h4 a span (float: dreapta; font-size: 10px; culoare : #fff; -moz-transition: culoare 0.5s ease 0s; ) .container nav ul li .subNav h4 a span:hover (culoare: #390206 ) .container nav ul li .subNav a ( float: none; border: none ; afișare: blocare; text-transform: capitalize; culoare: #fff; padding: 7px 15px; -moz-transition: culoare 0,5s ease 0s; line-height: 1,3; ) .container nav ul li .subNav:hover (color : #390206; ) .container .section ( clar: ambele; umplutură: 10px; ) .container .section articol p ( font-size: 16px; culoare: #488fb8; line-height: 1,3; ) .container .section articol antet p ( padding-top: 20px; font-size: 20px; culoare: #333; line-height: 1,3; margin-bottom: .4em; )
Acum trebuie să reînviam meniul derulant. Cea mai simplă funcție jQuery ne va ajuta în acest sens.
$(function())( $("li.dropdown").hover(function() ( daca ($("this:has(div.subNav)"))( $(".subNav").css(( " display":"none")); $(".subNav", this).css(("display":"block")); $("nav ul li").css(("poziție":" relativă ", "z-index":"1001")); $(this).addClass("activ"); ) ), function())( $(".subNav").css(("afișare": "niciunul ")); $(this).removeClass("activ"); $("nav ul li").css(("poziție":"relativ", "z-index":"1")); )) ; ));
Pentru fiecare element de listă, este posibil să vă creați propriul meniu derulant: în interiorul elementului li, plasați un bloc cu clasa .subnav și, de asemenea, atribuiți clasa .dropdown li-ului însuși.
În acest tutorial, vă vom arăta cum să creați un meniu drop-down din bara laterală pentru a face site-ul dvs. și mai ușor de navigat. Acest tip de meniu este o tendință populară în designul web modern. Multe site-uri web folosesc acest tip de meniu. Cu ajutorul acestuia, poți scăpa de haosul de pe paginile proiectului, îl poți face mai lizibil, concentrând atenția utilizatorilor asupra conținutului principal.
Aceasta este o modalitate excelentă de a atinge minimalismul fără distrageri. Astăzi vom crea singuri un astfel de meniu.
Pentru a crea un meniu de navigare, să aruncăm mai întâi o privire asupra setărilor:
Demo animație meniu
Mai întâi, trebuie să descărcați Normalize.css și să configurați stilurile implicite de browser, asigurându-vă că meniul arată la fel în toate browserele. Pentru a afișa o săgeată în fața elementelor de meniu cu sub-articole, vom folosi FontAwesome . Pentru a schimba clasele din meniu, încărcați jQuery și mutați tot codul jQuery personalizat în script.js. Ultimul link este tabelul principal pentru proiectul web.
Pictograma HamburgerPictograma hamburger este un atribut comun al navigării pe site. Este adesea creat folosind un font de pictogramă precum FontAwesome, dar în acest tutorial vom adăuga niște animații, așa că o vom crea de la zero. Pictograma noastră hamburger este o etichetă span care conține trei clase div, redate ca dungi orizontale.
Stilurile arată astfel:
Buton de comutare (poziție: fix; lățime: 44 px; înălțime: 40 px; umplutură: 4 px; tranziție: .25 s; index z: 15; ) .toggle-button:hover (cursor: indicator; ) .toggle-button .meniu -bară (poziție: absolut; rază-chenar: 2px; lățime: 80%; tranziție: .5s; ) .toggle-button .menu-bar-top ( chenar: 4px solid #555; chenar-jos: niciunul; sus: 0; ) .toggle-button .menu-bar-middle (înălțime: 4px; fundal-culoare: #555; margin-top: 7px; margin-bottom: 7px; sus: 4px; ) .toggle-button .menu-bar -bottom ( chenar: 4px solid #555; chenar-sus: niciunul; sus: 22px; ) .button-open .menu-bar-top ( transform: rotate(45deg) translate(8px, 8px); tranziție: .5s; ) .button-deschide .menu-bar-middle ( transform: translate(230px); tranziție: .1s ease-in; opacitate: 0; ) .button-deschide .menu-bar-bottom ( transform: rotate(-45deg) translate(8px, -7px); tranziție: .5s; )
Pictograma are o poziție fixă și nu se modifică la derularea paginii. De asemenea, are un z-index de 15, ceea ce înseamnă că va fi întotdeauna deasupra altor elemente. Constă din trei bare, fiecare dintre ele împărtășind alte stiluri. Deci vom muta fiecare bară în class.menu-bar. Mutăm stilurile rămase în clase separate. Magia se întâmplă atunci când adăugăm o altă clasă la eticheta span, care este publică. Il adaugam cu folosind jQuery in felul urmator:
$(document).ready(function() ( var $toggleButton = $(".toggle-button"); $toggleButton.on("clic", function() ( $(this).toggleClass("button-deschidere" ); ) ); ) );
Pentru cei care nu sunt familiarizați cu jQuery, inițializam o variabilă cu $toggleButton care conține pictograma noastră. Îl stocăm într-o variabilă fără a fi nevoie de JavaScript. Apoi creăm un ascultător de evenimente care ascultă clicurile pe pictogramă. De fiecare dată când utilizatorul face clic pe pictograma hamburger, ascultătorul evenimentului declanșează funcția toggleClass(), care comută class.button-open.
Odată adăugată clasa .button-open, o putem folosi pentru a schimba modul în care sunt afișate elementele. Folosim funcțiile CSS3 translate() și rotate() pentru a face barele de sus și de jos să se rotească cu 45 de grade și banda de mijloc s-a mutat la dreapta și a dispărut. Iată animația pe care o puteți personaliza:
Meniu de navigare derulantAcum că aveți pictograma hamburger, să o facem utilă și să creăm un meniu drop-down când faceți clic pe el. Iată cum arată aspectul meniului:
Acum nu vom intra în detaliu despre fiecare stil pentru acest meniu, ci ne vom concentra pe câteva Puncte importante. În primul rând, există clasa div și .menu-wrap. Uită-te la stilurile lui:
Meniu-wrap (culoare de fundal: #6968AB; poziție: fix; sus: 0; înălțime: 100%; lățime: 280px; margine-stânga: -280px; dimensiunea fontului: 1em; greutatea fontului: 700; overflow: automat ; tranziție: .25s; indicele z: 10; )
Poziția este fixă, astfel încât meniul rămâne întotdeauna în aceeași poziție la derularea paginii. O înălțime de 100% permite meniului să ocupe tot spațiul vertical de pe pagină. Rețineți că marginea stângă este setată la un număr negativ, egal cu lățimea meniului. Aceasta înseamnă că meniul va dispărea din fereastra de vizualizare. Pentru a-l face vizibil din nou, creăm o altă clasă de comutare cu jQuery. Al nostru Fișier JavaScript va arata asa:
$(document).ready(function() (var $toggleButton = $(".toggle-button"), $menuWrap = $(".menu-wrap"); $toggleButton.on("clic", function() ( $(this).toggleClass(„buton-deschidere”); $menuWrap.toggleClass(„meniu-arată”); ) ); ) );
Adăugăm o altă variabilă $menuWrap, care conține învelișul meniului. Utilizați același handler de evenimente pe care l-am creat mai devreme. Doar că de această dată schimbăm două clase: una pentru buton și una pentru shell-ul meniului. Valoarea marginii din stânga a class.menu-show este 0, aceasta va adăuga un efect de umbră.
Afișare meniu ( margine-stânga: 0; casetă-umbră: 4px 2px 15px 1px #B9ADAD; )
Submeniuri și link-uriEste posibil să observați că unul dintre elementele listei are un class.menu-item-has-children, care conține un submeniu. În plus, imediat sub link există o etichetă span cu class .sidebar-menu-arrow.
span are un pseudo-element ::after și conține o săgeată FontAwesome. În mod implicit, submeniul este ascuns și va fi vizibil doar când dați clic pe săgeată. Iată cum o putem face cu jQuery:
$(document).ready(function() ( var $sidebarArrow = $(".sidebar-menu-arrow"); $sidebarArrow.click(function() ( $(this).next().slideToggle(300); ) ); ) );
Când facem clic pe săgeată, apelăm o funcție, care, la rândul ei, vizează următorul element imediat după interval (în cazul nostru, submeniul) și îl face vizibil. Funcția pe care o folosim este slideToggle. Face să apară și să dispară un element. Funcția din exemplul nostru are un parametru - durata animației.
Elementele de meniu din exemplu au un efect de hover. Este creat folosind pseudo-element ::after. Codul arată astfel:
Bara laterală de meniu li > a::după ( conținut: ""; afișare: bloc; înălțime: 0,15 em; poziție: absolut; sus: 100%; lățime: 102%; stânga: 50%; transformare: traducere (-50% ); imagine de fundal: gradient liniar (la dreapta, transparent 50,3%, #FFFA3B 50,3%); tranziție: poziția fundalului .2s .1s ease-out; dimensiunea fundalului: 200% automat; ) .menu-sidebar li > a:hover::după (poziția de fundal: -100% 0; )
Pseudo-elementul ::after conține un element la nivel de bloc în partea de jos a fiecărei legături cu o lățime și o înălțime completă de 0,15 em. Totul arată ca o subliniere. Lucrul special este că nu aplicăm doar culoarea de fundal pe linie, ci folosim funcția linear-gradient() pe imaginea de fundal. Deși această funcție este concepută pentru a crea degrade de culoare, putem schimba culoarea specificând procentele dorite.
Bara laterală de meniu li > a::after ( imagine de fundal: gradient liniar (la dreapta, transparent 50,3%, #FFFA3B 50,3%; )
Jumătate din linie de aici este transparentă, iar cealaltă jumătate este galbenă. Făcând dimensiunea fundalului 200%, dublem lățimea blocului nostru. Acum partea transparentă ocupă întreaga lățime a legăturii, iar partea galbenă se deplasează spre stânga și devine invizibilă. Schimbăm poziția de fundal la trecerea cursorului la -100%. Acum partea galbenă devine vizibilă, iar partea transparentă este ascunsă.
În locul părții transparente, puteți folosi orice altă culoare. Puteți experimenta și cu gradienți.
Fiecare dintre elementele pe care le-am considerat funcționează ca un singur întreg. Puteți crea un astfel de meniu folosind orice design de site din colecția TemplateMonster. După cum puteți vedea, acest lucru este mai ușor de făcut decât vă puteți imagina. Mult succes în crearea de site-uri web profesionale și ușor de utilizat!
Astăzi aș dori să fac o selecție a unei generații relativ noi de navigare pentru site - meniuri pe ecran complet. Ele sunt folosite în cazurile în care nu există navigare în sine pe pagină, există un singur buton, când se face clic, se deschide un meniu. Un principiu similar poate fi observat și în cadrul -cadru: atunci când bara de navigare nu se mai potrivește, blocul cu lista de elemente de meniu este pur și simplu ascuns. În locul său apare un buton cu o imagine de, de regulă, trei dungi. Se stinge când este apăsat meniu complet. În multe site-uri web moderne, meniul este întotdeauna ascuns, chiar și pe ecrane mari. Acest lucru a fost făcut pentru a nu încărca pagina. Deși acum nu ar trebui să faci asta pentru toate proiectele tale. Dacă meniul are o importanță secundară, îl puteți ascunde, dar dacă aveți un site mare cu o structură complexă, este mai bine să nu utilizați această opțiune. Asa de. CU principiu general munca s-a rezolvat, dar acest tip Meniul este destul de standard, vreau ceva nou. Nu cu mult timp în urmă, am început să observ site-uri în care navigarea nu se oprește, ci se deschide complet pe ecran complet într-o fereastră pop-up. Ceva asemănător cu panourile glisante populare, dar toată chestia asta ocupă întreaga zonă a zonei de lucru. În spatele site-urilor au început să apară pluginuri jQuery separate și soluții css3, despre care este de fapt acest subiect.
Personal, îmi place foarte mult această implementare a meniului de navigare, deoarece este convenabilă pentru utilizatorii cu dispozitive mobile și arată foarte impresionant pe monitoare mari. Apar tot mai multe site-uri cu meniuri pe tot ecranul, gratuit. Pluginuri jQuery devine tot mai mare și conceptul devine treptat un trend.
Asa de. Vă aducem la cunoștință 20 de plugin-uri jQuery pentru meniuri pe ecran complet într-o fereastră pop-up.
Un plus foarte frumos la designul ferestrei este pictograma SVG animată. În mod implicit, arată ca trei bare, dar atunci când se dă clic, pictograma se transformă într-o săgeată, ceea ce arată că meniul poate fi ascuns.Navigație animată rotunjită Un alt unul foarte tare script jquery navigare pe ecran complet de la aceiași dezvoltatori ca și pluginul de mai sus. Acest script are un efect de aspect foarte cool și neobișnuit. Când faceți clic pe butonul de meniu, un val emană din pictogramă folosind css3 pe întregul monitor, care crește în fundalul elementelor de meniu. Același efect de ascundere.
Această navigare funcționează grozav pe dispozitivele mobile, dar având în vedere că efectul de aspect este destul de greu, cred că totul va fi lent pe telefoanele mai vechi (nu am testat-o, așa că mă bucur dacă vei scrie experiența ta în comentarii) .
Din păcate, pe telefoane mobile nu funcționează corect: dacă există o mulțime de elemente de meniu și nu se potrivesc pe ecran, atunci derularea verticală nu apare și navigarea este pur și simplu întreruptă.
În acest articol vom dezvolta un meniu derulant simplu folosind jQuery. Mai întâi, aruncați o privire la fișierul demo. Sperăm că știți măcar puțin despre jQuery și CSS de bază. Aspectele cheie ale creării acestui meniu drop-down sunt utilizarea Opțiuni CSS: poziție, sus, stânga, z-index.
Folosind acești parametri, putem fi siguri că meniul nostru va apărea exact sub linkul peste care a trecut cursorul și va acoperi cu exactitate toate celelalte elemente. De asemenea, vom face ca meniul să apară la trecerea cursorului și să dispară atunci când cursorul este mutat. Pentru a implementa aceste evenimente, vom folosi funcțiile jQuery: mouseenter și mouseleave. Și asta este tot ce avem nevoie pentru a crea un meniu drop-down!
Fișier demonstrativ al rezultatului final și link de descărcare
cod HTML
Consultați codul HTML pentru meniul derulant:
După cum puteți vedea, aici vom folosi liste neordonate pentru a implementa elementele de meniu. Fiecărui link de meniu i se atribuie o clasă de meniu derulant, iar meniul derulant în sine este acoperit de o clasă de sublink. Numele claselor vor fi folosite de jQuery pentru a determina ce meniu să fie afișat.
Cod CSS
Consultați codul CSS:
/* CSS pentru meniul derulant Start */
ul
{
list-style:none;
umplutură: 0px;
margine: 0px
}
ulli
{
display:inline;
plutește la stânga;
}
ulli a
{
culoare:#ffffff;
fundal:#990E00;
margine-dreapta:5px;
greutate font: bold;
dimensiunea fontului: 12px;
font-family:verdana;
text-decor:niciuna;
display:bloc;
lățime: 100px;
înălțime: 25px;
înălțimea liniei: 25px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
chenar: 1px solid #560E00;
}
ul li a:hover
{
culoare:#cccccc;
fundal:#560E00;
greutate font: bold;
text-decor:niciuna;
display:bloc;
lățime: 100px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
chenar: 1px solid #000000;
}
ul li.sublinks a
{
culoare:#000000;
fundal:#f6f6f6;
chenar-jos:1px solid #cccccc;
font-weight:normal;
text-decor:niciuna;
display:bloc;
lățime: 100px;
text-align:center;
margine-sus: 2px;
}
ul li.sublinks a:hover
{
culoare:#000000;
fundal:#FFEFC6;
font-weight:normal;
text-decor:niciuna;
display:bloc;
lățime: 100px;
text-align:center;
}
ul li.sublinks
{
afisare:niciuna;
}
/* CSS pentru meniul dropdown Sfârșit */
Majoritatea codului CSS este folosit pentru a formata meniuri (puteți da aspect meniu la propria discreție), dar există și câteva puncte importante aici:
1 – Eliminarea filelor folosind list-style:none;
2 – Știm că listele sunt elemente de bloc și sunt întotdeauna afișate în ordine verticală. Pentru a le face să se poziționeze orizontal, le dăm parametrul elemente inline și le aliniem la stânga folosind codul:
display:inline;
plutește la stânga;
3 – În mod implicit, linkurile sunt elemente inline. Le convertim în elemente bloc folosind display:block (deci acum le putem da o valoare a lățimii).
4 – Ascunderea întregului meniu folosind:
Ul li.sublinks
{
afișaj: niciunul;
}
jQuery
Imaginați-vă vremurile când meniurile drop-down erau implementate folosind cod javascript brut și mult cod inutil. Dar astăzi tot ce avem nevoie este jQuery:
$(funcție())(
Submeniu.css((
poziție: „absolut”,
zIndex:1000
});
Submeniu.stop().slideDown(300);
$(this).slideUp(300);
});
});
});
Un lucru foarte interesant și simplu. Să vă explicăm cum funcționează. Pentru a începe, și ca de obicei, împachetăm codul nostru într-un controler jQuery:
$(funcție())(
...
});
Codul nostru este activat atunci când cursorul mouse-ului este plasat (funcția mouse-enter) peste un element căruia îi este atribuită clasa meniului drop-down ($(".dropdown"). În cazul nostru, acesta este un link din meniu:
$(funcție())(
$(".dropdown").mouseenter(funcție())(
........
});
});
Să ne asigurăm că le ascundem (ascunde ()) pe toate cele anterioare meniuri deschiseînainte ca cursorul mouse-ului să sară la următorul link:
$(".sublinks").stop(fals, true).hide();
Rețineți caracteristica de oprire, care ne ajută să afișăm un singur meniu derulant atunci când cursorul mouse-ului se deplasează peste diferite linkuri din meniu. Dacă nu folosim această funcție, atunci fiecare meniu derulant va rămâne deschis până când vom îndepărta complet cursorul mouse-ului din meniu. Acest lucru va crea o suprapunere, așa că ar trebui să evităm acest lucru. În continuare, luăm meniul derulant extins în prezent și îl atribuim unei variabile:
Submeniu Var = $(this).parent().next();
Iată ce se va întâmpla în codul HTML:
Când cursorul mouse-ului este plasat peste o legătură cu clasa drop-down, ne întoarcem folosind parent() și ne oprim la „li”, apoi folosind next(), ne găsim în meniul drop-down dorit și „li” va fi deja cu legăturile de subclasă (sublinkuri). În acest fel, jQuery ne face mai ușor să găsim ce meniu drop-down să afișăm atunci când mouse-ul este plasat peste un anumit link.
Submeniu.css((
poziție: „absolut”,
sus: $(this).offset().top + $(this).height() + "px",
stânga: $(this).offset().left + „px”,
zIndex:1000
});
Codul este foarte important deoarece asigură că meniul drop-down este afișat exact sub linkul specific. Dacă poziția este setată la absolut, putem poziționa elementul în orice zonă a paginii noastre. Apoi, determinăm poziția superioară a linkului folosind $(this).offset().top (aceasta se referă la elementul de meniu plasat în prezent) și îi adăugăm o valoare de înălțime, astfel încât meniul să apară exact sub link. Facem ceva similar cu parametrul stânga. Apoi folosim z-index pentru a ne asigura că meniul nostru apare deasupra altor elemente.
Submeniu.stop().slideDown(300);
Desigur, puteți utiliza alte opțiuni de animație, cum ar fi fadeIn, animație folosind propriile stiluri și așa mai departe.
Acum trebuie să ne îndepărtăm de conceptul de afișare a unui meniu derulant și să îl ascundem. Avem nevoie de această bucată de cod:
Submeniu.mouseleave(funcție())(
$(this).slideUp(300);
});
Pentru a ascunde un meniu derulant, folosim slideUp, antonimul lui slideDown. Rețineți că submeniul este o variabilă pe care am creat-o pentru a defini un anumit meniu drop-down.
Astfel, avem un meniu derulant atractiv pe un singur nivel în jQuery.
De asemenea, dacă cineva este interesat, vă puteți uita la metoda anterioară cu folosind CSS care este descris în articol -
Acum la obiect. Ca și în ultimul articol, în primul rând, să scriem codul HTML pentru meniul nostru. Codul este același ca în articolul respectiv, astfel încât să nu existe confuzii și să fie mai de înțeles. Meniu cu două elemente și ambele au submeniuri.
- paragraful 1
- Elementul derulant 1
- Elementul derulant 2
- Elementul derulant 3
- punctul 2
- Elementul derulant 1
- Elementul derulant 2
- Elementul derulant 3
Dacă aveți o astfel de linie sau una similară care a inclus deja biblioteca înainte, atunci nu ar trebui să faceți acest lucru din nou.
jQuery(document).ready(function($)( $("#slow_nav ul li").hover(function () ( $("ul", this).stop().slideDown(400); ), function ( ) ( $("ul", aceasta).stop().slideUp(400); )); ));
În a doua linie a scriptului indicăm ID-ul meniului nostru. Dacă utilizați aceasta metodaîn propriul dvs. meniu, apoi schimbați, în mod natural, numele în al dvs. În acest caz, este #slow_nav.
De asemenea, puteți regla timpul de animație. În acest script, valoarea pentru deschidere și închidere este de 400 de milisecunde, adică 0,4 secunde. Dacă doriți, îl puteți schimba la o valoare mai mare sau mai mică.
Ultimul pas este adăugarea stilurilor. Sunt foarte asemănătoare cu stilurile din articolul precedent, doar că lipsesc Proprietăți CSS animaţie.
#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: niciunul; text-align:center; top:15px; font-size:15px; left:0; margin:0; padding:0; display:none; ) #slow_nav li ul li( background-color:#333; border- jos: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; chenar-jos-culoare:#333; stânga:10px; sus:-10px; )
De asemenea, la stiluri este unul linie nouă, cu care scriptul funcționează corect. Pentru elementul - #slow_nav li ul proprietatea display:none; . Dacă nu îl adăugați, meniul derulant va fi vizibil inițial și va dispărea numai după ce veți muta cursorul peste el. Toate celelalte stiluri sunt aceleași ca în articolul precedent.
La fel ca metoda anterioară, aceasta poate fi aplicată nu numai meniurilor scrise de sine stătătoare, ci și acelorași meniuri dinamice care sunt create de sistemele de management al conținutului, cum ar fi 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ă :)
Asta e tot, mulțumesc pentru atenție. 🙂