Meniu derulant timp de cinci minute ca exemplu de aplicație CSS
În acest caz, facem un meniu derulant de tipul cunoscut pentru toate meniurile complexe. Toată complexitatea lor consta tocmai în problema compatibilității diferitelor browsere - pentru Netscape a fost scrisă vechea parte a scenariului, pentru Explorer - altul. Pentru suporterii CSS din volumul "standard" al browserelor, același efect poate fi atins prin metode mult mai simple.
De ce avem nevoie pentru efectul "drop-down"? Trebuie să schimbăm proprietățile unor blocuri, astfel încât atunci când mutați mouse-ul peste o anumită secțiune a aceluiași bloc sau pe linkul "control", aceleași blocuri devin vizibile. Acest lucru este oarecum simplist, dar esența a ceea ce se întâmplă o descrie complet.
În acest exemplu, toți să fie „colectate“, prin utilizarea proprietăților overflow. De ce această proprietate? Vă reamintesc, verflow proprietate controlează comportamentul unității atunci când acesta este „plin“ - un bloc sau întinsă, montate în toate conținutul, sau este o dimensiune dată „tăierea“ conținut suplimentar, sau unitate de preaplin ne oferă posibilitatea de a derula conținutul bara de defilare care apare. Nu este toate caracteristicile acestei proprietăți, dar acest lucru este destul de mult.
Simpla idee de a "trage" imediat - sau vom vedea tot conținutul blocului, sau vom vedea doar partea superioară a acestuia cu tema, totul este tăiat. Trebuie doar să descriem cu exactitate cele două stări ale blocului și să ne schimbăm unul după altul după cum este necesar. Imediat vă avertizez - acest efect poate fi obținut prin utilizarea proprietății clipului, dar nu ne permite să salvăm cadre când schimbăm. În plus, Opera 5 nu suportă overflow. Da, și clip. în general, de asemenea.
Să facem, de exemplu, două meniuri drop-down. De ce avem nevoie de producție? Trebuie să decideți despre poziționare. Dacă lăsăm blocurile noastre mutabile în fluxul documentului principal, redimensionarea acestora va afecta întregul document. Pagina va fi "cârnați". Prin urmare, blocurile de meniu sunt derivate din fluxul general, poziționăm "absolut".
Primul costum:
BODY <
MARGIN: 0px;
PADDING: 0px;
fundal-culoare: # A8C228;
>
bărbați rămași: 10%;
top: 30px;
fundal-culoare: # A8C228;
frontieră: 1px solid # 000;
lățime: 20%;
înălțime: 18px;
overflow: ascuns;
text-aliniere: stânga;
>
bărbați1 stânga: 10%;
top: 30px;
fundal-culoare: #ffffff;
frontieră: 1px solid # 000;
lățime: 20%;
înălțime: auto;
overflow: vizibil;
text-aliniere: stânga;
>
bărbați2 stânga: 31%;
top: 30px;
fundal-culoare: # A8C228;
frontieră: 1px solid # 000;
lățime: 20%;
înălțime: 18px;
overflow: ascuns;
text-aliniere: stânga;
>
bărbați 22 rămași: 31%;
top: 30px;
fundal-culoare: #ffffff;
frontieră: 1px solid # 000;
lățime: 20%;
înălțime: auto;
overflow: vizibil;
text-aliniere: stânga;
>
#cont left: 10%;
top: 50px;
fundal-culoare: # A8C228;
frontieră: 1px solid #fff;
lățime: 80%;
înălțime: 400px;
text-aliniere: stânga;
>
Culoarea fundalului A.m: #fff;
lățime: 100%;
înălțime: auto;
culoare: # 000000;
font-familie: Verdana, sans-serif;
FONT-DIMENSIUNE: 10px;
text-decoration: nici unul;
text-aliniere: stânga;
padding: 3px;
>
A.m: hover <
afișare: bloc;
fundal-culoare: # 005CC0;
culoare: #fff;
>
Și pe pagină scriem:
oooooo
>
Culoare albastră
Culoare albastră
Culoare albastră
Culoare albastră
Culoare albastră
Culoare albastră
>
Culori galbene
Culori galbene
Culori galbene
Culori galbene
Culori galbene
Culori galbene
Culori galbene
Culori galbene
Culori galbene
Ce am făcut:
Pentru primul meniu am atribuit două clase - bărbați și bărbați1
Pentru al doilea meniu - clasele men2 și men22
Să luăm în considerare toate exemplele primului meniu.
Clasa bărbați descrie meniul în starea "pasivă". Acordați atenție supraîncărcării: ascunse; - În această descriere, blocul este "tăiat" la dimensiunea pe care am setat-o, în acest caz - înălțimea: 18px; Când plasați mouse-ul peste bloc, clasa se schimbă la men1, în care înălțimea: auto; overflow: vizibil; Înălțimea blocului este setată în funcție de conținut, întregul bloc este vizibil. Managementul este facut "fraza"
Fiți atenți! Schimbarea clasei apare atunci când plasați mouse-ul pe bloc, și nu pe link-ul!
În plus, am înregistrat în mod clar indică referințele conținute în meniu, atribuindu-le o .m clasă separată În plus, ar trebui să acorde o atenție la ordinea de ieșire a blocurilor de poziționare absolute - ca unitate de CONT, destinat pentru conținutul paginii, pozitionat absolut, aceasta deducem mai întâi. Mai precis, pentru a se asigura că meniurile noastre sunt poziționate pe partea de sus a blocurilor de poziționare absolute, noi trebuie să „se retragă“ le pe pagina în ultimă instanță, în satul descrierile lor le-am pus mai jos.
.bărbați rămași: 50px;
top: 30px;
fundal-culoare: # A8C228;
frontieră: 1px solid # 000;
lățime: 200px;
înălțime: 18px;
overflow: ascuns;
text-aliniere: stânga;
voce-familie: ""> "";
voce-familie: moștenire;
lățime: 198px;
>
html> corp .menDIV <
lățime: 198px;
>
men1 stânga: 50px;
top: 30px;
fundal-culoare: #ffffff;
frontieră: 1px solid # 000;
lățime: 200px;
înălțime: auto;
overflow: vizibil;
text-aliniere: stânga;
voce-familie: ""> "";
voce-familie: moștenire;
lățime: 198px;
>
html> corp .men1DIV <
lățime: 198px;
>
men2 stânga: 260px;
top: 30px;
fundal-culoare: # A8C228;
frontieră: 1px solid # 000;
lățime: 200px;
înălțime: 18px;
overflow: ascuns;
text-aliniere: stânga;
voce-familie: ""> "";
voce-familie: moștenire;
lățime: 198px;
>
html> corp .men2DIV <
lățime: 198px;
>
.men22 stânga: 260px;
top: 30px;
fundal-culoare: #ffffff;
frontieră: 1px solid # 000;
lățime: 200px;
înălțime: auto;
overflow: vizibil;
text-aliniere: stânga;
voce-familie: ""> "";
voce-familie: moștenire;
lățime: 198px;
>
html> corp .men22DIV <
lățime: 198px;
>
#cont left: 10%;
top: 50px;
fundal-culoare: # A8C228;
frontieră: 1px solid #fff;
lățime: 80%;
înălțime: 400px;
text-aliniere: stânga;
>
Culoarea fundalului A.m: #fff;
lățime: 198px;
înălțime: auto;
culoare: # 000000;
font-familie: Verdana, sans-serif;
FONT-DIMENSIUNE: 10px;
text-decoration: nici unul;
text-aliniere: stânga;
padding: 3px;
voce-familie: ""> "";
voce-familie: moștenire;
lățime: 192px;
>
html> corp A.m <
lățime: 192px;
>
A.m: hover <
afișare: bloc;
fundal-culoare: # 005CC0;
culoare: #fff;
>
Ce am schimbat:
Am pus toate dimensiunile în pixeli, inclusiv locația blocurilor, "ajustat" dimensiunile pentru citirea corectă în Netscape șasea.
În clasa bloc "inactiv", am adăugat:
voce-familie: ""> "";
voce-familie: moștenire;
lățime: 198px;
>
html> body .menDIV <
lățime: 198px;
>
Lățimea blocului 198 la noi a fost generată din lățimea setată de 200 minus la un pixel de la fiecare margine pe un cadru, cu o grosime de 1 pixel.
Relativ puternic, am schimbat descrierea stilurilor de link-uri:
FONT-DIMENSIUNE: 10px;
text-decoration: nici unul;
text-aliniere: stânga;
padding: 3px;
voce-familie: ""> "";
voce-familie: moștenire;
lățime: 192px;
>
html> corp A.m <
lățime: 192px;
>
Acordați atenție formării dimensiunilor - lățimea blocului de referință este formată din lățimea blocului de 200 minus cadrul și minus umplutura: 3px pe ambele părți. Ca rezultat, am obținut 192 și dimensiunea fontului am setat la 10 pixeli, cu o lățime de „inactive“ în meniul 18 și s-au retras la referințe în mărime de 3 pixeli este mai potrivit. Dacă este nevoie să măriți dimensiunea fontului din meniu, va fi necesar să măriți înălțimea meniului inactiv.
Așa se face. Explorer totul funcționează perfect în Netscape a șasea posibilă o „încetinire“ la sfârșitul acestui meniu, se pare că a citit foi de stil în cascadă, în Netscape, deși dă rezultatul corect, dar există un pic diferit.
Ce altceva puteți spune despre acest subiect.
Puteți utiliza, de exemplu, o schemă similară pentru a produce un meniu simplu de lățime fixă cu "iluminare din spate".
Puteți utiliza întregul design aproape neschimbat și faceți tipul de meniu "cascadă". În acest caz, puteți să nu poziționați ele însele blocurile de meniu, ci pur și simplu să le aranjați în partea stângă a paginii. Blocați conținutul principal pentru a fi amplasat câțiva pixeli în partea dreaptă a meniului.
Apropo, acest exemplu poate fi folosit ca un șablon gata pentru paginile site-ului. O descriere interesantă poate fi un bloc poziționat complet cu lățimea textului: auto; Cu acest stil, blocul va avea o lățime care vă permite să țineți maximum conținutul și să nu depășiți marginea ecranului.
Articole similare