Rotate colțuri în elementele de meniu din CSS
Din nou, atingeți subiectul meniului, titlul articolului vorbește de la sine ce va fi discutat astăzi. Există mai multe moduri de a implementa elemente de meniu cu colțuri rotunjite. Dar în acest articol vom vorbi despre cum să facem acest lucru fără a folosi scripturi, ci folosind imagini (de la ele nu puteți scăpa). Cred că ar trebui să spunem la început principiul că, în viitor, ar fi clar ce vom implementa. În acest exemplu, un meniu orizontal va fi luat în considerare când treceți peste un element, care va apărea ca un fundal cu muchii rotunjite. Iată un exemplu. La prima vedere, nu pare nimic complicat, doar pune imaginea dorită sub elementul de meniu cu proprietatea de fundal și totul. În principiu, da, dar majoritatea artiștilor de layout intră într-o stupoare când numărul de caractere din elementele de meniu este semnificativ diferit. Și cum să vă asigurați că indicele din stânga și din dreapta de pe marginile imaginii de bază sunt aceleași pentru lungimi diferite. Mai întâi vine ideea de a pune o imagine separată pentru fiecare element de meniu, dar acestea sunt imagini suplimentare, cod suplimentar și că este foarte trist, nu o soluție dinamică deloc. Soluția este destul de simplă. Și ceea ce este cel mai plăcut, avem nevoie de o singură fotografie. Și așa ... Imaginea ar trebui să arate astfel:
Da, este așa de lungă, poate că veți avea nevoie de ea mai mult.
Meniul va fi reprezentat de o listă orizontală (ul), iar în punctele de legătură din meniul nostru vom adăuga o etichetă mică
Deși eticheta XHTML nu permite etichetele imbricate, eticheta este o excepție. Puteți să o lipiți în sigurantă în etichetă , rezultatul va fi valid și validat.
over.gif este imaginea noastră lungă. Arătăm că sa dovedit în cele din urmă - REZULTATUL. Codul este complet valabil, sunt atașate pictogramele corespunzătoare. E atât de simplu și fără ca JS să rezolve problema cu colțurile rotunjite ale elementelor de meniu.
În același mod, puteți selecta elemente de meniu active. Atribuiți un link activ la o clasă (de exemplu, clasa = "activă") și la această clasă stilurile corespunzătoare, nu voi da un exemplu, cred că veți înțelege.
oaspete
Nu, desigur, o țin departe de ochii curioși.
Evguny
În general, m-am gândit la faptul că acesta este doar un exemplu. În practică, sarcinile sunt de obicei mai dificile, dar dacă nu cunoașteți cele mai simple, atunci va fi foarte greu să vă apropiați de unul dificil.
Diablo
Elementul inactiv atribuie o clasă și prescrie stiluri pentru această clasă.
Articole similare
Trimiteți-le prietenilor: