Kako napraviti padajući CSS izbornika

Danas ćemo razmotriti pitanje „Kako mogu stvoriti padajući CSS izbornika?”. To bi trebao reći odmah da je ovaj predmet će biti bez spajanja dodatnih sredstava. To je, meni će biti stvoren samo s CSS i HTML.

trening

Da biste u potpunosti razumjeli što je u njemu u članku, morate malo da se upoznaju sa teorijskim materijala. Ali, ako ste upoznati s pseudo-klase, možete preskočiti ovaj stavak. Dakle, stvoriti vertikalnu padajući CSS izbornici, potrebna nam je element kao «: hover». Pseudo «: hover» može se dodijeliti svakom HTML oznake. To vam omogućuje da definiraju trenutak kada predmet postavite pokazivač miša. Na primjer, mi smo imenovani nekretnine: «A: hover {color: red;}». Ovaj unos znači da kada prelazite mišem ona pocrveni na sadržaj bilo koje oznake Ra. Važno je napomenuti da je ovaj pseudo-element također inaktivira. Usput, «: hover» je u vezi sa sličnim elementima. No, od toga ćemo stvoriti pseudo CSS padajući izbornik.

instrukcija

Prvo, neka je shvatiti što je padajući izbornik. Prema ovoj definiciji dobiva mnogo različitih načina konstruiranja različitih izgleda. U ovom slučaju, mi ćemo analizirati strukturu koja se sastoji od nekoliko stalno vidljivih stvari i nekoliko dodatnih (skriven). Završimo s teorijom i početi vježbati.

• Mi stvaramo izgled našeg izbornika. Da biste to učinili, HTML-kod označavanja. Stvaranje ugnežđeni popis:
  • • < / ul>. Nešto kao ovo bi trebao izgledati vaš padajućeg izbornika. CSS intervenirati kasnije. U ovom slučaju glavni popis sastoji od tri glavna područja i dvije zatvorene.
    • Sakrij podizbornik. Za to koristimo stil, definirati sljedeća svojstva: ul ul {display: none;} Ovo će ukloniti elemente druge liste od ekrana.
    • Napravite CSS izbornika, padajući iz glavnog popisa. U CSS napisati sljedeće pravilo: ul Li: hover ul {display: block;}. Ovaj unos znači da kada je miš iznad element Li, koja se nalazi u ul popisu se pojavljuje na Ul ekrana (u prilogu). Na prvi pogled, takva shema može se činiti komplicirano i zbunjujuće. Ali, u stvari, sve je vrlo jednostavno.
    • Koristite ovaj izgled sami umetanjem oznake
    • sadržaja. Možete promijeniti broj lista elemenata.

    ukrasni promjene

    Čim izgleda glavnog izbornika je spreman, možete nastaviti do registracije. Vjerojatno su mnogi na prvom mjestu spremni da biste dobili osloboditi od markera koji ukazuju na stavku popisa. To je učinjeno pomoću jednog vlasništvu CSS, naime popis-style-type. Morate dodati sljedeći unos: li {list-style-type: none;}. Tada možete umetnuti okvir i napraviti pozadinu. Granica i pozadine će vam pomoći s ovim. Možda neki ne sviđa padajući izbornik će se pojaviti kao dodatni popis, guranje na istim osnovnim elementima. Da biste to ispravili, možete ga smjestiti. Da biste to učinili, CSS pisati sljedeći unos: ul ul {pozicija: apsolutna; lijevo: 15px; Pravo: 15px; vrh: 15px; Dno: 15 piksela;}. Naravno, vrijednosti koje će koristiti svoj vlastiti. Ovisno o tome gdje želite vidjeti padajućih izbornika, CSS će ponuditi mnogo više mogućnosti da se može dodati razne efekte i ukrasite naše liste.

    zaključak

    Još jednom je napomenuti izgradnju Izgled izbornika. Za dodjeljivanje pravila CSS koji se koriste u ovom slučaju ugrađeni vrijednosti, na primjer, ul ul. Ako ste u dokumentu se zadovoljili drugu sličnu strukturu, postoji svibanj biti veliki problemi. U tim situacijama morate koristiti određenu namjenu, na primjer, selektora ili ID-evima. Gornji članak izgleda padajući izbornik je napravljen da se upoznate opći dizajn. Ostatak rada počiva na ramenima.