Meniu dinamic. Meniu derulant dinamic. Schimbarea unei clase de meniu folosind jQuery
Rezumat: Scop. Învață să aplici elemente HTML(liste și hyperlinkuri) și Proprietăți CSS(model de afișare, hyperlink pseudo-clase) pentru a forma un sistem de navigare pe o pagină web.
Plasarea unui meniu cu un set de hyperlink-uri pe o pagină este una dintre sarcinile importante în practica unui web designer. Pentru a nu obosi atenția utilizatorului prin vizualizarea întregului set, linkurile sunt de obicei grupate pe categorii, iar în meniul principal sunt incluse doar categorii. Numai atunci când selectați o categorie ar trebui să fie afișate linkurile (sau subcategoriile) corespunzătoare.
De regulă, astfel de meniuri dinamice sunt create de obicei folosind Limbajul Javascript, care vă permite să efectuați manipulări cu elemente ale unei pagini web de orice complexitate. Cu toate acestea, există și o soluție CSS - destul de simplă și frumoasă, deși nu împlinește imaginația fiecărui designer. Să ne uităm la asta pas cu pas.
- Mâncăruri populare
- Bucatarie italiana
- Gustări
- Gustări
- Dulciuri
- Fructe
- Cadouri de sarbatoare
- Aniversări
- Pentru copii
- Zi de nastere
- Felicitări!!!
- Alegerea după preț
- Mai puțin de 1000 de ruble.
- De la 1000 la 1500 de ruble
- De la 1500 la 2000 de ruble
- De la 2000 la 3000 de ruble
- Scump
- Fructe si legume
- Fructe uscate și nuci
- Coșuri cu fructe
- Munți de fructe
- Mancare sanatoasa
- Fara pesticide
- Flori
- Flori naturale
- flori de gradina
- Flori „vorbitoare”.
- Cadouri corporative
Vino cu numele link-urilor și categoriilor. Este important ca atributul id lista externă avea valoarea MainMenu - atunci i se va atribui un stil special pe baza acestui identificator).
#MainMenu > li ( float: stânga; list-style-type: none; )
Monitorizați modificările aduse afișajului documentului prin împărțirea ferestrei editorului într-o vizualizare cod sursași designer. După aplicarea regulii de stil specificată, elementele exterioare ale listei ( li ) au fost poziționate orizontal (datorită împachetării):
Orez. 7.1.
#MainMenu li:hover ul ( display:block; )
Salvați documentul pe care îl dezvoltați, deschideți-l într-un browser și asigurați-vă că meniul funcționează corect.
- Atribuiți ancorele oricărui nivel de imbricare din meniu (regula #MainMenu a ) culoarea (culoarea), caracterul (font) dorite și, de asemenea, eliminați sublinierea (decorarea textului).
- Atribuiți elemente din listă categoriilor (regula #MainMenu > li ) culoare de fundal(fundal), căptușeală(căptușeală) și un cadru în dreapta (chenar-dreapta).
- Dați elementelor din lista de linkuri imbricate (regula #MainMenu li li ) aceeași culoare de fundal ca și lista de categorii și mică adâncimeși un cadru dedesubt. De asemenea, eliminați marcajele listei (list-style-type ).
- Eliminați marginile și umplutura din lista de linkuri (regula #MainMenu li ul ).
O mică problemă este că unele elemente din lista de categorii cresc în lățime atunci când treceți cu mouse-ul peste ele. Acest lucru se datorează faptului că lățimea unui element de listă este determinată de lățimea întregului conținut - inclusiv lista imbricată. Cu toate acestea, dacă aruncați lista imbricată din fluxul normal și o poziționați absolut, atunci lățimea ei nu va mai afecta lățimea element părinte. Prin urmare, specificați pentru lista de link-uri poziționare absolută, iar pentru elementele listei de categorii - relativ. Verificați în browser. Apoi rafinați poziția sublistei în raport cu containerul său setând proprietățile din stânga și de sus (nu coborâți lista derulantă prea jos, altfel va dispărea când încercați să selectați un link în ea).
De ce a fost necesar să poziționăm relativ elementele din lista de categorii? Eliminați regula corespunzătoare și totul va deveni clar pentru dvs.
Rezultatul final ar trebui să fie similar cu următorul.
Probabil ați văzut meniuri dinamice și animate pe unele site-uri web care se modifică pe măsură ce derulați în jos. Minimizând meniul principal de navigare, lăsați mai mult spațiu pentru conținut. În acest tutorial, vă vom explica cum puteți crea singur un meniu folosind HTML5, CSS3 și puțin jQuery.
Dacă doriți o atenție deosebită asupra conținutului site-ului, precum și să vă permiteți să creați o navigare mai mare și mai impresionantă atunci când un utilizator vizitează pentru prima dată site-ul, atunci acest tip de meniu este perfect pentru dvs. Puteți să vă prezentați perfect marca sau logo-ul și, după o privire inițială pe site, să reduceți unele elemente, permițând utilizatorului să se concentreze asupra conținutului dvs.
Există mai multe moduri de a face acest lucru. În acest tutorial, vom explica cum să creați un meniu fix, cu lățime completă, care se redimensionează în înălțime împreună cu logo-ul dvs., creând o versiune miniaturizată a originalului. Dacă doriți, puteți înlocui sigla cu o altă opțiune, cum ar fi inițiale sau o pictogramă, dar rețineți că consecvența este foarte importantă aici, astfel încât utilizatorul să înțeleagă cum s-a schimbat elementul și ce este obiectivul principal este încă navigarea pe site.
Creare structură de bazăîn HTML5
Vom începe prin a crea codul HTML de bază de care vom avea nevoie. Pentru început, ne vom ține de o structură HTML5 foarte simplă.
Acum că este scris codul HTML inițial, vom adăuga codul pentru meniu, precum și alte detalii pentru antetul fișierului nostru HTML.
Cum se creează un meniu animat | Revista WebDesign 
- Acasă
- Articole
- Acesta este un site foarte tare!
Derulați în jos și vedeți cum se modifică meniul
Toate! Am ajuns!
În: Am adăugat o metaetichetă pentru autor pentru a indica creatorul documentului, după care am inclus faimoasa „resetare CSS” a lui Eric Meyer, care va reseta aproape fiecare element din fișierul HTML, oferindu-vă un document mai curat și mai ușor de lucrat cu. Și din moment ce vom folosi JQuery mai târziu, pe ultima linie a elementului nostru principal îl vom importa prin CDN-ul JQuery.
În eticheta noastră, am folosit elementul HTML5 implicit. Al nostru va fi pe toată lățimea paginii și va fi responsabil pentru modificările între versiunile mari și mici ale meniului. Oferim clasei noastre numită „mare”, astfel încât să putem schimba unele proprietăți specifice în CSS pentru a transforma meniul într-o versiune mai mică. Acesta este meniul nostru container care conține o imagine a siglei site-ului nostru web și o listă simplă neordonată de meniuri cu trei link-uri.
Deoarece nu avem niciun conținut aici, acesta va fi folosit pentru a extinde pagina și a forța derularea să aibă efect.
Și asta este tot pentru partea HTML. Acum trebuie să stilăm elementele folosind CSS și să facem meniul dinamic.
Stilizarea meniurilor și paginilor
/* Importă fontul Amaranth */ @import url(//fonts.googleapis.com/css?family=Amaranth); /* Stil principal */ body( culoarea fundalului: #ebebeb; ) ul( float: right; ) li( display: inline; float: left;) img.logo(float: left;) /* Dimensiunea meniului și centrarea * / nav( lățime: 960px; margine: 0 automat;)
Un pic din acest CSS va face meniul nostru lat de 960 px în centru, în timp ce ne organizăm meniul în dreapta și logo-ul în stânga. De asemenea, vom importa fontul Amaranth din Google Web Fonts pentru a le folosi pentru textul nostru de pe pagină.
Section.stretch( float: stânga; înălțime: 1500px; lățime: 100%; ) section.stretch p( font-family: „Amaranth”, sans-serif; font-size: 30px; culoare: #969696; text-align: centru; poziție: relativă; margine-sus: 250px; ) section.stretch p.bottom( sus: 100%; )
Aici pur și simplu facem întinderea paginii pentru a încuraja derularea și poziționăm textul pentru a indica începutul și sfârșitul conținutului.
Antet( fundal: #C7C7C7; chenar-jos: 1px solid #aaaaaa; float: stânga; lățime: 100%; poziție: fix; z-index: 10; ) antet a( culoare: #969696; text-decor: niciunul; familie de fonturi: „Amaranth”, sans-serif; text-transform: majuscule; dimensiunea fontului: 1em; ) antet a.active, antet a:hover( culoare: #3d3d3d; ) antet li( margine-dreapta: 30px; ) /* Dimensiuni pentru un meniu mai mare */ header.large( înălțime: 120px; ) header.large img( lățime: 489px; înălțime: 113px; ) header.large li( margin-top: 45px; )
Aici terminăm stilul de bază al antetului nostru. va servi drept recipient pentru meniul nostru. Acesta va conține elementul nostru și va servi ca element în care definim culoarea de fundal, înălțimea meniului, stilul meniului link și multe altele. Se va adapta la lățimea ecranului cu proprietăți de lățime: 100% și va rămâne fix peste alte elemente de pe site. Este important să rețineți să setați indexul z, astfel încât elementul să se suprapună cu restul paginii, precum și poziția:fixed pentru a face div-ul ancorat în partea de sus, astfel încât să rămână în aceeași poziție în timp ce utilizatorul derulează prin site-ul web. După cum puteți vedea, pe lângă setarea stilurilor pentru anteturi, am setat și câteva stiluri specifice pentru clasa „mare” folosind header.large. Starea inițială a meniului nostru va fi mare și, prin urmare, definim aici doar stilurile necesare pentru a-l face să arate așa cum ne dorim atunci când utilizatorul intră inițial pe pagină.
Redimensionarea dinamică a meniului
Meniul nostru este gata și stilat, dar vrem totuși să lucrăm pentru a-l menține minim. Pentru a crea această „stare”, vom crea o nouă clasă CSS numită „small” care va fi responsabilă de modificarea proprietăților pe care trebuie să le modificăm. Am definit deja un meniu mare, așa că acum trebuie doar să facem meniul mai scurt, imaginea mai mică proporțional și (marginea de sus) pe care o folosim în elementele noastre.
/* Dimensiuni pentru meniul mai mic */ header.small( înălțime: 50px; ) header.small img( lățime: 287px; înălțime: 69px; margin-top: -10px; ) header.small li( margin-top: 17px; )
Deci, după cum puteți vedea, aceste stiluri sunt aproape identice cu cele din meniul mai mare, doar am schimbat clasa „mare” în „mic” și am schimbat valorile pe care le-am folosit cu altele mai mici. Folosim margini negative pe imagine pentru a o centraliza în container, deoarece imaginea are o umbră subțire și este mai înaltă decât scrisul pentru a o acomoda. Acum avem toate stilurile necesare pentru a personaliza meniul de redimensionare, iar dacă încercați să îl schimbați în , veți vedea în browser că meniul va deveni mai mic. Dar avem nevoie să fie dinamică.
Schimbarea clasei de meniu când Ajutor jQuery
Cu toate stilurile noastre la locul lor, trebuie doar să adăugăm ceva JavaScript pentru a comuta între clasele „mari” și „mici”. Deoarece dorim să schimbăm acest lucru pe baza derulării utilizatorului, vom folosi funcția .ScrollTop() în jQuery. Această funcție ne va permite să obținem sau să setăm poziția de defilare în pixeli. Poziția de defilare este numărul de pixeli care au fost deja derulați în fereastra browserului. În acest caz, trebuie doar să știm câți pixeli a derulat utilizatorul, astfel încât să putem apela codul și să comutăm între clase:
$(document).on(„scroll”,function())( if($(document).scrollTop()>100)( $(„header”).removeClass(„mare”).addClass(„mic”) ; ) else( $("header").removeClass("small").addClass("mare"); ) ));
Dacă utilizatorul a derulat mai mult de 100 de pixeli, atunci clasa „mare” creată de noi va fi eliminată și noua noastră clasă „mică” va fi adăugată. În acest fel, meniul se va redimensiona așa cum am definit anterior în CSS. Încercați, ar trebui să funcționeze până acum, dar poate ați observat că tranzițiile între clase par foarte abrupte.
Tranziții CSS pentru animația meniului
Pentru a comuta fără probleme între clase în meniul nostru, vom folosi tranziții CSS. Folosește doar această bucată de cod lângă restul CSS-ului tău.
Header,nav, a, img, li( tranziție: toate cele 1; -moz-transition: toate cele 1; /* Firefox 4 */ -webkit-transition: toate cele 1; /* Safari și Chrome */ -o-tranziție: toate 1s; /* Opera */ )
Aici am definit tranziții pentru toate proprietățile CSS pentru. Și
I-a placut:
26
Nu mi-a plăcut: 12
În acest articol, vă voi arăta cum să scrieți un plugin jQuery simplu care va construi un meniu dinamic frumos din marcaj HTML obișnuit. Primul lucru cu care vom începe este să decidem ce anume va face pluginul și care este scopul nostru. Asa de:
Acum să stabilim ce fișiere trebuie create pentru a testa funcționarea exemplului în cauză. Aici sunt ei:
2. jquery.dynamenu.js - codul pluginului plasat într-un fișier separat.
3. dynamenu.css - stilul meniului nostru. Am pus tot CSS-ul aici
Aceste fișiere cu meniu de lucru pot fi găsite în arhiva atașată articolului. La sfârșitul articolului există o demonstrație live a modului în care funcționează meniul nostru. Vă rugăm să rețineți că în demo, apelul pluginului este plasat în același loc cu codul pluginului în sine. Acest lucru se datorează doar faptului că mecanismul de demonstrație live pe care îl folosim necesită plasarea codului JavaScript într-un cadru separat.
Să începem să scriem un plugin. Merge!
1. Pregătiți marcarea paginii HTMLSă setăm cel mai simplu marcaj pentru meniul nostru. Să fie acestea mai multe elemente de meniu pentru viitorul nostru site web:
Noutăți site Tutoriale Photoshop Pensule Photoshop Fonturi frumoase
Totul este simplu aici - 4 elemente div, fiecare cu o clasă dynamenu, pentru ca apoi să-l transmitem ca selector viitorului nostru plugin. În interiorul fiecărui div există un hyperlink cu numele elementului de meniu.
2. Setați stiluri CSSPentru a stila meniul nostru, folosim doar două stiluri CSS. Cu ajutorul lor, vom face fundalul fiecărui element de meniu gri, lățimea meniului de 300 de pixeli cu margini externe și interne de 5 pixeli și toate linkurile de meniu negre:
a.mlink ( color:#000; text-decoration:none; ) .dynamenu (culoare de fundal: #aaaaaa; lățime:300px; margin:5px; padding:5px; font-family: „Tahoma”; font-size: 9pt;)
3. Scriem „cadru” pluginuluiÎn primul rând, să definim cadrul pluginului nostru. Acest cadru este preluat parțial de pe site-ul oficial jQuery și conține așa-numitele „Best Practices” (cele mai bune practici și tehnici - de la dezvoltatorii limbajului jQuery). În general, un cadru similar se aplică aproape tuturor pluginurilor jQuery. Dacă vă amintiți și înțelegeți cum funcționează acest cadru, atunci veți putea scrie pluginuri dintr-o singură mișcare. Arata cam asa:
(function($) ( // lista de metode ale pluginului nostru var methods = ( init: function(options)) ( // inițializarea pluginului poate fi plasată aici. în cazul nostru // pentru simplitate nu va fi nimic aici ), glisând: function () ( // metoda de glisare a pluginului nostru va construi direct meniul ) ); // „înregistrați” pluginul nostru în spațiul de nume jQuery. $.fn.dynamenu = function(method) ( // aici numim cel dorit metoda din interiorul pluginului ) ))(jQuery) ;
După cum puteți vedea, nu este nimic complicat în cadru. Dar conține informații utile. Primul punct important de înțeles în cadru este că colectăm toate metodele adăugate la pluginul nostru (init, sliding) într-un singur obiect - metode. Acest lucru vă permite să evitați înfundarea spațiului de nume $.fn cu funcții inutile. Specificarea spațiului de nume corect pentru pluginul nostru este o parte foarte importantă a procesului de dezvoltare a pluginului în sine. Utilizarea unui spațiu de nume asigură că pluginul nostru este mai puțin probabil să fie suprascris de alte plugin-uri sau coduri situate pe aceeași pagină HTML. Spațiile de nume ușurează viața, deoarece... vă ajută să urmăriți mai bine metodele, evenimentele și datele.
Folosiți întotdeauna metoda ascunsă în interiorul pluginului, de exemplu într-un obiect de metode. Pe lângă faptul că este un stil de programare bun, această tehnică vă va ajuta să evitați conflictele cu alte biblioteci și pluginuri terță parte și, de asemenea, vă va ajuta să evitați poluarea spațiului de nume jQuery
Următorul punct care merită să acordați atenție este designerul pluginului nostru. Aceasta este linia $.fn.dynamenu = funcția (metoda) (...). După cum puteți vedea, constructorul preia un parametru - metodă. Ca valoare pentru parametru, vom trece un șir care conține numele metodei în interiorul obiectului metode, pe care urmează să-l numim. Să populăm constructorul cu următorul cod:
$.fn.dynamenu = function(method) ( if (metode) ( methods.init.apply(this, arguments); return methods[ method].apply(this, Array.prototype.slice.call(arguments, 1)) ; ) else ( $.error ("Metoda" + metoda + " nu există!"); ) )
Să ne dăm seama ce am făcut. Mai întâi verificăm dacă o metodă cu numele trecut în parametrul constructor există în obiect metode pluginul nostru. Dacă există o metodă, atunci apelăm mai întâi metoda init pentru a inițializa pluginul nostru, apoi apelăm metoda al cărei nume a fost trecut în parametrul constructor și îi transmitem toate argumentele rămase. Dacă nu există nicio metodă cu același nume, atunci vom emite o eroare și pluginul nu va mai funcționa.
În această etapă, s-au făcut deja multe! Acum putem accesa pluginul nostru și îi putem apela metodele, deși acestea nu efectuează încă nicio lucrare utilă. Recomand să puneți codul nostru de plugin într-un fișier separat și să îl numiți jquery.dynamenu.js. Plasarea codului pluginului într-un fișier separat este logică - la urma urmei, pluginul ar trebui să fie universal în esența sa și să ne permită nouă și altor dezvoltatori să-l conectăm gata făcut la site-ul lor.
Acum că cadrul nostru este plin de cod care poate apela metodele interne ale pluginului, este timpul să construim „carne” - adică să scriem codul care va transforma direct blocurile noastre div într-un meniu dinamic frumos. Să începem...
4. Scriem codul care creează un meniu dinamic în jQueryTot codul util al pluginului nostru va fi plasat în funcție alunecare, care este o metodă internă a pluginului și se află în obiect metode. Să descriem pe scurt secvența de acțiuni pentru transformarea marcajului static cu blocurile noastre div într-un meniu dinamic în jQuery:
Aceasta este, de fapt, toată logica. Acum să vedem cum să implementăm acest lucru:
returnează this.each(function() ( $(this).css((("opacitate":"0,4")); $(this).hover(function() ( $("a.mlink", this).css ((„greutate font”:„bold”)); $(this).animate(( opacitate:1, „margin-left”:”+=5” ), 100, „liniar”); ), function( ) ( $("a.mlink", this).css(("font-weight":"normal")); $(this).animate(( opacitate:0,4, "margin-left":"-=5 " ), 100, "liniar"); )); ));
Pentru orice eventualitate, o să explic ce se întâmplă. Deci, în prima linie vedem operatorul. Face următoarele: parcurge ceea ce este transmis funcției alunecare set de elemente (adică toate blocurile noastre div) și execută codul plasat în interior. După o astfel de rulare prin elemente, returnăm (instrucțiunea return) rezultatul efectuării operațiilor pentru fiecare element al mulțimii, din nou, sub forma unei mulțimi. Astfel, funcția noastră de glisare returnează un set de blocuri div trecute la „intrarea” funcției, doar procesate și deja transformate într-un meniu dinamic. Acest lucru implementează un concept jQuery important - abilitatea de a folosi pluginul nostru într-un lanț de apeluri. Pentru a înțelege mai bine ce este un lanț de apeluri, iată un exemplu:
$(".myelm").dynamenu("alunecare").css(("chenar": "1px roșu continuu"));
În fragmentul de cod de mai sus vedem ce este un lanț de apeluri: mai întâi selectăm toate elementele de pe pagină cu clasa myelm, apoi folosim pluginul nostru dynamenu și apoi din nou de-a lungul lanțului folosim metoda standard jQuery css() pentru a schimba stilul elementelor. Dacă nu am returna constructul return this.each(function() ( ... )) din metodă, atunci nu am mai putea folosi metoda css() în „lanț”.
Utilizați operatorul return this.each() pentru a sprijini înlănțuirea în plugin-uri și pentru a le face mai versatile.
Să mergem mai departe, în interiorul operatorului each(), unde trecem prin toate blocurile noastre div, există doar o setare inițială a proprietății „opacitate” a elementului la 0.4. punct. Valoarea maximă a opacității este 1 (100%), așa că setăm „opacitatea” la 40%. După aceasta, am setat doi handlere pentru „pasarea” mouse-ului și „mutarea” mouse-ului din zona blocului div. În primul handler, setăm titlul elementului de meniu la aldine și folosim metoda animate() pentru a face elementul de meniu „complet opac” și îl deplasăm la dreapta cu 5 pixeli. În gestionarea mouse-ului „părăsind” pur și simplu, readucem elementul la starea inițială - schimbăm fontul din nou la normal și îl deplasăm din nou la stânga cu 5 pixeli.
Asta e tot! Pluginul nostru este gata de utilizare. Deși este simplu, poate fi foarte util pentru crearea unui meniu dinamic pe site. Mai jos este o demonstrație a modului în care funcționează pluginul nostru. Pentru a vedea rezultatul pluginului, accesați fila Rezultat.
Succes la scrierea de plugin-uri bune! Comentariile, întrebările și feedback-ul sunt întotdeauna binevenite;)
Ați auzit vreodată afirmația că „nu puteți crea un meniu derulant dinamic folosind doar CSS în IE”? Sunt sigur că da. Deci, chiar crezi asta? Așa e, mai bine să nu crezi.
Scopul pe care vrem să-l atingem în acest articol
Scopul acestui articol este de a face un meniu drop-down pentru IE realizat în întregime în CSS. Începând cu această setare, am extins sarcina pentru a face ca un astfel de meniu să funcționeze în alte browsere cele mai cunoscute (din comentarii reiese că aceste browsere sunt Opera 7.x și cele mai recente versiuni de Firefox).
Scopul pe care dorim să-l atingem în acest articol este, în principiu, educațional mai mult sau mai puțin general, adică. dați o idee generală despre unele dintre funcțiile „ascunse” și rar utilizate ale browserelor.
De asemenea, cei care sunt deosebit de curioși pot găsi în acest articol câteva trucuri cu ajutorul cărora poți obține anumite rezultate nestandardizate. Ei bine, pentru dezvoltatori, acest articol poate deveni un motiv de gândire sau o sursă de idei noi.
Cum ne imaginăm nivelul cititorului?
De fapt, mă gândeam să etichet acest articol drept „avansat”. Dar sunt sigur că nici cei mai experimentați dezvoltatori nu vor înțelege bine ce scrie în articol. Pe scurt, cititorul trebuie pur și simplu să cunoască elementele de bază ale CSS și
HTML.
Prin ce este diferit acest meniu de toate celelalte?
Am petrecut mult timp căutând online meniuri care au fost făcute în CSS, dar nu am găsit o singură soluție care să funcționeze fără erori în IE. Totuși, am găsit multe idei interesante care m-au condus la rezultatul care va fi descris aici. Da, nici codul meu nu este perfect, dar pur și simplu nu am timp să repar toate erorile. Cea mai interesantă soluție alternativă pe care am văzut-o (care folosește CSS) se bazează pe utilizarea pseudoclasei hover pentru elemente LI. Dar nu m-am gândit niciodată că acest lucru este posibil și nici nu m-am gândit că este posibil chiar să faci un meniu derulant pentru IE fără scripturi...
Principala diferență dintre meniul meu și alte meniuri este că al meu rulează în IE. Toate soluțiile pe care le-am văzut folosesc elementul LI ca element principal pentru pseudo-clasa :hover, totuși Microsoft a decis că această pseudo-clasă poate fi folosită numai pentru
element A. Majoritatea site-urilor fac o rezervare că meniurile lor funcționează numai în browserele Opera 7.x sau Mozilla. Dar aceste browsere sunt folosite de doar cinci la sută dintre utilizatori! Da, astfel de meniuri sunt bune în aceste browsere, dar, din păcate, nu pot fi vizibile în majoritatea celor mai comune browsere. Acum vom corecta această neînțelegere.
Ce este un meniu creat doar cu CSS?
Acesta este un meniu dinamic care este creat folosind numai CSS și fără scripturi (de exemplu, scris în JavaScript).
Ce, nu-ți vine să crezi?
Să ne uităm la cod:
<
STYLE type
=
text
/
css id
=
"default"
title
=
"Mod implicit"
name
=
"default"
>
*::- moz - orice - link br ,*:- moz - orice - link br (
/*o soluție pentru mozilla*/
afișaj: niciunul;
}
div #meniu * (
cursor: pointer; /*deoarece IE afișează cursorul text
daca linkul este inactiv*/
}
Dezactivat (
culoarea rosie ! important ;
fundal: niciunul! important ;
}
Div #meniu (
fundal: #F5F5DC;
înălțime: 15px;
spatiu alb : nowrap ;
latime: 100%;
}
Div #meniu .a (
fundal: #F5F5DC;
chenar: 1px solid #F5F5DC;
culoare: #000000;
text - decor : nici unul ;
}
Div #menu .un tabel (
afisare: bloc;
font: 10px Verdana, sans-serif;
spatiu alb : nowrap ;
}
Div #menu table, div#menu table a (
afișaj: niciunul;
}
Div #menu .a:hover, div#menu div.menuitem:hover (
fundal: #7DA6EE;
chenar: 1px solid #000080;
culoare: #0000FF;
margine - dreapta :- 1px ; /*rezolvă o problemă cu Opera
nu se afișează chenarul drept*/
}
Div #menu .a:hover table, div#menu div.menuitem:hover table(
fundal: #FFFFFF;
chenar: 1px solid #708090;
afisare: bloc;
poziție: absolută;
spatiu alb : nowrap ;
}
Div #menu .a:hover table a, div#menu div.menuitem:hover table a (
chenar - stânga: 10px solid #708090;
chenar - dreapta: 1px alb continuu; /*rezolvă o problemă de salt*/
culoare: #000000;
afisare: bloc;
umplutură: 1px 12px;
text - decor : nici unul ;
spatiu alb : nowrap ;
indicele z: 1000;
}
Div #menu .a:hover table a:hover, div#meniu div.menuitem:hover table a:hover (
fundal: #7DA6EE;
chenar: 1px solid #000000;
chenar - stânga: 10px solid #000000;
culoare: #000000;
afisare: bloc;
umplutură: 0px 12px;
text - decor : nici unul ;
indicele z: 1000;
}
Td(
chenar - lățime : 0px ;
umplutură: 0px 0px 0px 0px;
}
articol din meniu (
plutește la stânga;
marginea : 1px 1px 1px 1px ;
umplutură: 1px 1px 1px 1px;
}
Articol din meniu*(
umplutură: 0px 0px 0px 0px;
}
#alte (
}
#moz(
}
#moz::-moz-cell-content(
inaltime: auto; vizibilitate: vizibil;
}
#other::-moz-cell-content(
înălțime: 1px; vizibilitate: ascuns;
}
#titular (
latime: 100%;
}
<
TABLE id
=
holder
>
<
TR
>
<
TD id
=
"other"
>
<
DIV id
=
"menu"
>
<
DIV
class=
"menuitem"
>
<
a
class=
"a"
href
=
"#"
>Fişier<
BR
>
<
TABLE
>
<
TR
>
<
TD
><
a href
=
#2>click pe mine
<
TR
>
<
TD
><
a href
=
#3>Salvați
<
TR
>
<
TD
><
a href
=
#4>Închide
<
DIV
class=
"menuitem"
>
<
A
class=
"a"
href
=
"#11"
>Ajutor<
BR
>
<
TABLE
>
<
TR
>
<
TD
><
a
class=
"disabled"
>..
<
TR
>
<
TD
><
a href
=
#13>Index
<
TR
>
<
TD
><
a href
=
"#14"
>Despre
<
TR
>
<
TD id
=
"moz"
>Meniu specific Mozilla!
<
DIV id
=
"menu"
>
<
DIV
class=
"menuitem"
>
<
a
class=
"a"
href
=
"#"
>Filezilla
<
TABLE
>
<
TR
>
<
TD
><
a href
=
#2>Deschis
<
TR
>
<
TD
><
a href
=
#3>Salvați
<
TR
>
<
TD
><
a href
=
#4>Închide
<
DIV
class=
"menuitem"
>
<
A
class=
"a"
href
=
"#11"
>Helpzilla
<
TABLE
>
<
TR
>
<
TD
><
a
class=
"disabled"
>..
<
TR
>
<
TD
><
a href
=
#13>Index
<
TR
>
<
TD
><
a href
=
"#14"
>Despre
<
BR
>
Ce se întâmplă, de ce funcționează totul?
Permiteți-mi să fac o rezervare imediat că în acest articol nu vă voi învăța cum să utilizați CSS. Prin urmare, trecem imediat la luarea în considerare a principiului de funcționare a meniului - la pseudoclasa „:hover”. Da, aceasta este exact clasa. Acestea. un selector poate moșteni un alt selector care include „:hover”. În cazul nostru, „A:hover TABLE” selectează „
