În primul rând, desenați două imagini:
Acestea sunt două părți dintr-o singură filă de meniu. Dreptul este făcut atât de mult încât, cu dimensiunea fontului selectată, imaginea trebuie să conțină cel mai lung cuvânt din întreaga listă de secțiuni. Ei bine, de exemplu, "supermegakulforforumnblinse!". Fiecare dintre imagini are două părți, una sub cealaltă. Partea superioară este starea inițială, partea inferioară este starea activă, atunci când mouse-ul se află în mișcare.
Principiul este destul de simplu și elegant: în foaia de stil vom aloca diferite coordonate stărilor diferite ale imaginii. Adică, imaginea este încărcată în întregime, dar pe pagină am văzut inițial numai partea de sus. Când aducem mouse-ul la buton, partea inferioară "sare".
Deci, imaginile sunt gata. În foaia de stil, vom scrie următorul cod:
#menu lățime: 860px;
înălțime: 39px;
marja: 0 auto;
fundal: # 69c;
font: 90% "Comic Sans MS", Verdana, Arial, sans-serif;
linia-înălțime: 1,8;
clar: ambele;
>
#menu ul de umplere: 5px 10px 0 30px;
listă: nu există;
>
#menu li display: inline;
>
#menu a float: left;
fundal: url (imagini / tableft.gif) no-repeat stânga sus;
umplutură: 0 0 0 4px;
>
#menu un float span: stânga;
fundal: url (imagini / tabright.gif) nu-repeta dreapta sus;
umplutura: 4px 20px 5px 10px;
culoare: #fff;
>
#menu a: Culoarea spanului: # FF9834;
>
#menu a: poziționați poziția fundalului: 0% -42px;
>
#menu a: poziția spate a fundalului-poziția: 100% -42px;
>
# float li.active: stânga;
culoare: # FF9834;
fundal: url (imagini / tableft.gif) no-repeat stânga sus;
pozitie fundal: 0% -42px;
umplutură: 0 0 0 4px;
>
#menu li.activ float span: stânga;
fundal: url (imagini / tabright.gif) nu-repeta dreapta sus;
umplutura: 4px 20px 5px 10px;
pozitie fundal: 100% -42px;
>
Să analizăm înregistrarea în detaliu. Lățimea blocului de meniu este de 860 de pixeli, înălțimea de 39 pixeli, alinierea automată în centrul monitorului, fundalul albastru și curățarea de pe ambele fețe, astfel încât nimic extra să nu mai poată ieși din cale.
Apoi, specificați lista câmpurilor ul și dezactivați afișarea marcatorilor. Prin urmare, lista este numită fără marcaj.
Apoi, vom arăta elementele din lista li în linie, altfel în mod prestabilit, browserele le vor adăuga întotdeauna în coloană.
Dar următoarele două reguli sunt foarte interesante. Ambele au stiluri pentru afișarea de link-uri, dar în al doilea a apărut un cuvânt straniu. Pentru ce?
Faptul este că trebuie să legăm imaginile butoanelor noastre de etichete sub forma unui fundal. În acest caz, avem o singură etichetă - . Puteți lega fundalul numai la eticheta de început. K deja nu poți lega nimic. Prin urmare, am introdus o etichetă de span suplimentară. Este de asemenea numit neutru. deoarece poate fi folosită peste tot și, prin ea însăși, nu suportă nici o sarcină semnificativă.
Deci, am legat prima imagine (ca fundal) de o etichetă. iar al doilea să se întindă. Și pentru prima a indicat locația din stânga de mai sus și a interzis repetarea, iar a doua - în partea dreaptă sus și, de asemenea, fără o repetare.
Câmpurile de aici nu sunt de asemenea specificate. Mai întâi am specificat imaginea din stânga pentru a trece de la marginea din stânga la 4 pixeli, adică doar lățimea imaginii. Dacă acest lucru nu este făcut, atunci imaginea dreaptă, care este cu siguranță mai largă, pur și simplu "mănâncă" stânga, pentru că numele secțiunilor pe care le avem, la urma urmei, nu sunt prea lungi.
În ceea ce privește câmpurile pentru imaginea din dreapta, le-am setat astfel încât în dreapta numelui secțiunii să existe același spațiu ca și stânga (în caz contrar, browserul va "apăsa" cuvântul "sângerare"). În general, experimentați și vedeți. )
Pentru referințe setați o culoare albă (alb pe verde - ador eu pur și simplu!). Și pentru activ - portocaliu pe alb.
Următoarele două reguli comandă doar fotografiile noastre să ascundă partea de sus și să afișeze partea de jos când se deplasează peste ele cu ajutorul mouse-ului. Acest lucru se face cu ajutorul poziționării. Pentru imaginea din stânga, am indicat poziția la 0% (adică poziția extremă stângă) și minus 42 pixeli. Asta este, pur și simplu "am scos" partea de sus de la ea. Și din moment ce imaginea este încărcată inițial pe pagină complet, ea ne va arăta partea de jos. Pentru imaginea corectă am indicat poziția de 100% (extrema dreaptă) și, de asemenea, minus 42 de pixeli.
Se pune întrebarea: de ce nu vedem întreaga imagine de pe pagină în același timp? Dar pentru că, la început, pentru blocul nostru de meniuri, am stabilit o înălțime de doar 39 pixeli (și poate fi 42, dar din moment ce browserele de pe diferite linii de numărare, atunci suntem puțin reasigurați). Ceva ca o fereastră. Amintiți-vă filmele sovietice despre Sherlock Holmes? Acolo, la început, există titluri vicioase sub forma unui întreg câmp de bukovok? Acestea sunt ghidate de un șablon negru cu sloturi și se obțin cuvinte semnificative. Este vorba de același principiu și meniul nostru. E simplu. )
Celelalte două reguli pe care le-am scris pentru partiția activă. Acest lucru este de asemenea de înțeles - secțiunea activă nu ar trebui să fie o legătură, ci ar trebui să demonstreze în mod clar că este activă în acest moment. Asta este, arata ca un mouse click pe link. Aici, de asemenea, ordonăm fotografiile să pară șiretlic cu partea de jos, dar ele nu sunt fixate pe tagurile legăturilor, ci pe tagurile liniilor de listă - li.
Nu uitați să specificați peste tot fluxul din stânga (float: left;). În caz contrar, erorile sunt inevitabile.
Asta pare a fi tot. Dar IE este încă un browser cu un personaj, iar meniul nostru frumos denaturează într-un fel urât. (Această lecție nu este vizibilă, ci pe întreaga pagină colectate primește un fel de leșie între meniu și unitatea principală. Se întâmplă pentru că IE (spre deosebire de alte browsere) în propria sa calculează dimensiunea câmpurilor și marjele. Într-un astfel de ultraj viclean designeri web au venit cu nici un hack mai viclean numit-șurub Asta este, condimente pentru IE în foaia de stil este un post scriptum (de multe ori indică versiunea de IE) „... la acest pagani arăta menyuhu mele genial ca aceasta: (și apoi o regulă suplimentară) ...“..
Un astfel de hack poate fi introdus în foaia principală de stiluri și puteți atașa o foaie separată, oferindu-i link-ul corespunzător. Vom face asta și vom fixa un alt css pe pagină. numindu-l pur și simplu ie.css. În ea scriem următoarele:
#menu o inserție de span: 4px 20px 4px 10px;
>
#menu li.activ spad padding: 4px 20px 4px 10px;
>
După cum puteți vedea, spre deosebire de foaia principală, aici am specificat câmpul inferior cu un pixel mai mic (4 în loc de 5). Acesta este tot trampul.
Ei bine, în cele din urmă, codul paginii în sine (aici numai meniul, toate celelalte, plasate pentru etichetele paginii, sunt omise):
Articole similare
Trimiteți-le prietenilor: