Kaskadiniai stiliaus lapai (CSS) yra pavadinimas, naudojamas apibūdinti hiperteksto žymėjimo kalbos (HTML) arba išplėstinės žymėjimo kalbos (XML) dokumento formatavimą. Jis gali būti naudojamas bet kokio tipo XML dokumentams, tačiau dažniausiai naudojamas su HTML parašytais tinklalapiais. CSS galima naudoti kuriant išskleidžiamuosius meniu tinklalapiuose. Išskleidžiamajame CSS meniu rodomas vienas teksto elementas, kol lankytojas nenaudoja pelės, kad užvestų pelės žymeklį virš meniu, tada rodomas visas elementų sąrašas. Meniu sukuriamas naudojant CSS identifikavimo ir klasės žymes.
Išskleidžiamieji CSS meniu prasideda ID parinkikliu. Šis parinkiklis atrodo kaip #. Po jo nurodomas ID pavadinimas. ID galite pavadinti bet kuo, bet jis turi būti aprašomasis, kad kiti galėtų perskaityti jūsų kodą. Pavyzdžiui, išskleidžiamajame meniu gali būti naudojamas kodas #drop1.
Sukurkite klasę pirmam elementui išskleidžiamajame meniu naudodami klasės parinkiklį, kuris atrodo kaip taškas. Klasė bus HTML sąrašo elemento dalis. Sąrašo elementas žymimas simboliais „li“. Sukurkite aukščiausio lygio klasę įvesdami „li.top“. Klasės aprašymas yra tarp dviejų garbanotų petnešėlių.
Šiame pavyzdyje parodytas visas pirmojo sąrašo elemento CSS kodas:
#drop1 li.top {šriftų šeima: Verdana, Ženeva, san-serif;
šrifto dydis: 100%;
spalva: #FF00FF;}
Tada sukurkite elementų, kurie bus paslėpti po pirmuoju CSS meniu elementu, klasę. Klasėje bus aprašytas HTML netvarkingas sąrašas, kuris žymimas simboliais „ul“. Aprašymas iš esmės atrodys taip pat, kaip aukščiausio lygio meniu elementas, aprašymo pradžioje pridėjus žodžius „display:none#59“. Tai rodo, kad netvarkingo sąrašo elementai bus paslėpti, kol žymeklis nenuves virš išskleidžiamojo CSS meniu.
Toliau pateikiamas šios CSS kodo dalies pavyzdys:
#drop1 ul.link {
display:none#59
šriftų šeima: Verdana, Ženeva, san-serif;
šrifto dydis: 100%;
spalva: #FF00FF;}
Norėsite, kad išskleidžiamasis CSS meniu būtų rodomas likusioje HMTL dokumento dalyje. Priešingu atveju, kai lankytojas užves pelės žymeklį virš meniu, likusią dokumento dalį jis nustums žemyn, kad būtų vietos sąrašui. Tai padarys pozicijos elemento nustatymas į absoliutų.
Padėties nustatymo kodas yra:
#drop1{pozicija:absoliutus;}
Tai viskas, ko reikia išskleidžiamojo meniu CSS daliai. Likusi išskleidžiamojo CSS meniu dalis sukuriama HTML dokumente naudojant „div“, „id“, „class“, „li“ ir „ul“ elementus. Žyma „div“ atskiria dokumento meniu dalį. Tipas
Kai atidarote dokumentą žiniatinklio naršyklėje, išskleidžiamasis CSS meniu bus rodomas kaip vienas puslapio elementas. Kai perkeliate pelės žymeklį virš viršutinio elemento, pasirodys likusi meniu dalis. Likusi teksto dalis puslapyje nejudės, bet dalis meniu bus paslėpta.