RačunariSoftver

Kako napraviti padajući meni CSS-a

Danas ćemo razmotriti pitanje "Kako kreirati padajući meni CSS-a". Treba odmah reći da će ovaj element biti napravljen bez povezivanja dodatnih sredstava. To jest, meni će se kreirati samo CSS i HTML.

Priprema

Da biste u potpunosti razumeli šta se događa u članku, potrebno je malo upoznati teoretski materijal. Ali, ako ste upoznati sa pseudo-klasama, možete preskočiti ovaj pasus. Dakle, da bi kreirali vertikalni CSS spustni meni, potreban nam je element poput ": lebdeći". Pseudo-klasa ": lebdeći" može se dodijeliti bilo kojoj HTML oznaci. Omogućava vam da odredite kada kursor miša pokazuje stavku. Na primjer, dodelili smo imovinu: "a: hover {color: red;}". Ovaj unos znači da kada se nalazite nad bilo kojom oznakom , njen sadržaj postaje crven. Vrijedi napomenuti da ova pseudo-klasa znači i dalje neotkrivenu stavku. Inače, ": lover" je povezao slične elemente. Ali pomoću ove pseudo-klase kreiramo padajući CSS meni.

Upute

Pre svega, vredi razumeti šta je padajući meni. Prema ovoj definiciji, postoji mnogo različitih načina izgradnje različitih mock-upa. U ovom slučaju, rastavljamo konstrukciju koja se sastoji od nekoliko stalno vidljivih predmeta i nekoliko dodatnih (skrivenih). Završimo sa teorijom i spustimo se u praksu.

  • Kreirajte izgled našeg menija. Da bismo to uradili, napravićemo HTML oznaku.
  • / Ul>. Ovo bi trebalo da izgleda kao padajući meni. CSS će stupiti u akciju malo kasnije. U ovom slučaju, glavna lista se sastoji od tri glavne stavke i dva ugnezdena.
  • Sakrij dodatni meni. Da bi to uradili koristimo tabele stilova, definišemo sledeću osobinu: ul ul {display: none;} Ovo će ukloniti elemente druge liste sa ekrana.
  • Kreirajte meni u CSS-u, napuštajući glavnu listu. U kaskadnim listovima stilova napišemo sledeće pravilo: ul li: hover ul {display: block;}. Ovaj unos znači da kada pritisnete mišem nad elementom li koji se nalazi na listi ul, ul (ugneženi) se pojavljuje na ekranu. Na prvi pogled, takva šema može izgledati previše komplikovana i zbunjujuća. Ali u stvari, sve je vrlo jednostavno.
  • Koristite ovaj izgled sami, ubacivanjem vašeg sadržaja između oznaka
  • . Možete da promenite broj stavki na listi.

Dekorativne promjene

Čim se pripremi glavni meni, možete nastaviti sa svojim dizajnom. Verovatno, mnogi na prvom mestu žele da se otarase markerima, koji označavaju element liste. Ovo se radi sa jednim CSS svojstvima, naime, tipom tipa liste. Morate dodati ovu stavku: li {list-style-type: none;}. Zatim možete umetnuti okvir i napraviti pozadinu. Imovina granice i pozadine će vam pomoći. Možda nekima neće dopasti da se padajući meni pojavljuje kao dodatna lista, dok se proširuju glavni elementi. Da biste to popravili, možete ga pozicionirati. Da biste to uradili, u kaskadnom listu listova upišite sljedeći unos: ul ul {položaj: apsolutno; Levo: 15px; Desno: 15px; Top: 15px; Dno: 15px;}. Naravno, vrijednosti koje ćete koristiti sami. U zavisnosti od toga gde želite da vidite padajući meni, CSS će ponuditi mnogo više osobina koje mogu dodati različite efekte i ukrasiti naše liste.

Zaključak

Još jednom, vredi napomenuti dizajn rasporeda menija. Da biste odredili CSS pravila u ovom slučaju, koristite ugnežene vrijednosti, na primjer ul ul. Ukoliko imate još sličnih dizajna u dokumentu, onda mogu postojati veliki problemi. U takvim situacijama, morate koristiti specifičniju svrhu, na primer, selektore ili id-identifikatore. Izgled padajućeg menija prikazan u članku je namenjen upoznavanju sa opštim dizajnom. Ostatak posla je na vašim ramenima.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 bs.unansea.com. Theme powered by WordPress.