meniu cross-browser orizontal simplu, folosind css

Deci, aici vom merge. Creați o listă cu numele meniului nostru. Let-le să fie, cum ar fi numele de locuri: „Acasă“, „News“, „Produse“, „Servicii“, „Parteneri“, „contact“. Creați un fișier nou numit menu.html. de exemplu, prin programul Dreamweawer sau folosind un notebook obișnuit. În locul său între etichetele body meniul nostru. Acesta este de obicei marcat cu o listă de elemente li ul. Desigur, fiecare element de meniu, se face referire, în cazul în care în loc de a introduce un URL #. Utilizarea programului Photoshop va crea o dimensiune de 3x30 imagini px cu gradient de umplere așa cum se arată în figura de mai jos. Fișierele sunt stocate în format GIF. Sună-l bg.gif. Această cifră va servi ca imagine de fundal pe meniul nostru.

Iată conținutul menu.html fișier:

Acum, creați un fișier foaie de stil separat numit main.css. listarea lui completă de mai jos.

Pentru a rezuma. Rezultatul este un meniu orizontal complet krosbrauzernoe, care arata la fel, nu numai în toate browserele moderne, dar, de asemenea, rarități, cum ar fi IE 5.5 și IE 6.0. Toate elementele de meniu sunt prezentate ca elemente de nivel bloc și au aceleași dimensiuni în 30px înălțime lățime și 100 px. Ca element de înregistrare element al blocului de meniu separator cu un drept de frontieră în alb 1px gros. Aceasta este, practic, cel mai simplu mod de a pune în aplicare bara de meniu orizontal. Desigur, acesta poate fi modificat, dacă se dorește, să facă o mai frumoasă și funcțională, utilizând proprietățile fantezie css și elemente grafice suplimentare. Ei bine, meniul nostru orizontal arata ca acest lucru:

Avantajele acestei soluții:
Ușor de punere în aplicare
cod simplu
Nu există tabele și j # 097; vascript
Compatibilitate cross-browser: meniul în toate browserele arata la fel
Folosit doar o singură imagine
Codul de cel puțin pagina menu.html
cod, cel puțin pentru punerea în aplicare a stilurilor în main.css

Fișierele utilizate în acest exemplu, puteți descărca menu.zip arhiva [1,94 Kb]

Știri asociate: