Cascading Style Sheets (CSS) este un nume folosit pentru a descrie modul în care este formatat un document Hyper Text Markup Language (HTML) sau Extensible Markup Language (XML). Poate fi folosit pentru orice tip de document XML, dar cel mai des este folosit cu pagini web scrise în HTML. CSS poate fi folosit pentru a crea meniuri drop-down pe paginile web. Meniurile derulante CSS au un singur element de text afișat până când vizitatorul folosește mouse-ul pentru a trece cu mouse-ul peste meniu, moment în care este afișată întreaga listă de elemente. Meniul este creat folosind identificarea CSS și etichetele de clasă.
Meniurile derulante CSS încep cu selectorul ID. Acest selector arată ca #. Este urmat de numele ID-ului. Puteți numi ID-ul orice, dar ar trebui să fie descriptiv, astfel încât alții să vă poată citi codul. De exemplu, un meniu drop-down poate folosi codul #drop1.
Creați clasa pentru primul articol din meniul derulant utilizând selectorul de clasă, care arată ca o perioadă. Clasa va face parte din elementul listă HTML. Elementul de listă este desemnat prin caracterele „li”. Creați clasa de nivel superior tastând „li.top”. Descrierea clasei este cuprinsă între două acolade.
Următorul exemplu arată întregul cod CSS pentru primul articol din listă:
#drop1 li.top {font-family: Verdana, Geneva, san-serif;
dimensiunea fontului: 100%;
culoare: #FF00FF;}
Apoi, creați o clasă pentru elementele care vor fi ascunse sub primul element din meniul CSS. Clasa va descrie lista HTML neordonată, care este desemnată cu caracterele „ul”. Descrierea va arăta în esență la fel cu elementul de meniu de nivel superior, cu adăugarea cuvintelor „display:none#59” la începutul descrierii. Aceasta indică faptul că elementele din lista neordonată vor fi ascunse până când cursorul trece peste meniul derulant CSS.
Următorul este un exemplu al acestei porțiuni a codului CSS:
#drop1 ul.link {
display:none#59
font-family: Verdana, Geneva, san-serif;
dimensiunea fontului: 100%;
culoare: #FF00FF;}
Veți dori ca meniul derulant CSS să apară peste restul documentului HMTL. În caz contrar, atunci când vizitatorul trece cu mouse-ul peste meniu, va împinge restul documentului în jos pe pagină pentru a face loc listei. Setarea elementului de poziție la absolut, va face acest lucru.
Codul pentru a seta poziția este:
#drop1{poziție:absolut;}
Acesta este tot ceea ce este necesar pentru porțiunea CSS a meniului drop-down. Restul meniului derulant CSS este creat în documentul HTML folosind elementele „div”, „id”, „class”, „li” și „ul”. Eticheta „div” separă porțiunea de meniu a documentului. Tip
Când deschideți documentul într-un browser web, meniul derulant CSS va apărea ca un singur element pe pagină. Când mutați mouse-ul peste elementul de sus, va apărea restul meniului. Restul textului de pe pagină nu se va muta, dar o porțiune va fi ascunsă de meniu.