Računalniki, Programska oprema
Kako narediti spustni meni CSS
Danes bomo obravnavali vprašanje »Kako ustvariti spustni meni CSS?«. Takoj je treba reči, da bo ta element izdelan brez kakršnega koli dodatnega sredstva. To pomeni, da bo meni ustvarjen samo s CSS in HTML.
Priprava
Če želite v celoti razumeti, kaj se dogaja v članku, potrebujete vsaj malo seznanjenost s teoretičnim gradivom. Ampak, če ste seznanjeni s psevdo-razredi, lahko preskočite ta odstavek. Torej, če želite ustvariti navpični spustni meni CSS, potrebujemo element, kot je ": hover". Pseudo-class ": hover" se lahko dodeli katerikoli oznaki HTML. Omogoča vam, da določite, kdaj miškin kazalec kaže na element. Na primer, dodelili smo lastnosti: "a: hover {color: red;}". Ta vnos pomeni, da ko se pomaknete nad katero koli oznako , se njegova vsebina obarva rdeče. Treba je omeniti, da ta pseudo-razred pomeni še neizkrivljeno postavko. Mimogrede, ": hover" je povezal podobne elemente. Toda s pomočjo tega pseudo-razreda bomo ustvarili spustni meni CSS.
Navodila
Najprej je treba razumeti, kaj je spustni meni. Po tej definiciji obstaja veliko različnih načinov izdelave različnih modelov. V tem primeru bomo razstavili konstrukcijo, sestavljeno iz več nenehno vidnih predmetov in nekaj dodatnih (skritih) elementov. Končajmo s teorijo in spravimo v prakso.
- Ustvarite postavitev našega menija. Če želite to narediti, bomo naredili oznako HTML.
- / Ul>. To bi moralo izgledati kot vaš spustni meni. CSS bo začel delovati malo kasneje. V tem primeru je glavni seznam sestavljen iz treh glavnih elementov in dveh vgrajenih.
- Skrij dodatni meni. Če želite to narediti, uporabimo slogovne liste in določimo naslednjo lastnost: ul ul {display: none;} To bo odstranilo elemente drugega seznama z zaslona.
- Ustvarite meni v CSS-u, izstopite iz glavnega seznama. V kaskadnih listih slogov pišemo naslednje pravilo: ul li: hover ul {display: block;}. Ta vnos pomeni, da ko miškin kazalec premaknete nad elementa li, ki je na seznamu ul, se na zaslonu prikaže ul (nested). Na prvi pogled se lahko takšna shema zdi preveč zapletena in zmedena. Toda v resnici je vse zelo preprosto.
- To postavitev uporabite sami in vstavite svojo vsebino med oznake
- . Na seznamu lahko spremenite število elementov.
Dekorativne spremembe
Takoj, ko je postavitev glavnega menija pripravljena, lahko nadaljujete s svojo zasnovo. Verjetno se mnogi v prvi vrsti želijo znebiti markerjev, ki označujejo element seznama. To se naredi z enim samim CSS znamenjem, in sicer s tipom seznama. Ta vnos morate dodati: li {seznam-style-type: none;}. Nato lahko vstavite okvir in ustvarite ozadje. Značilnosti meje in ozadja vam bodo pomagale. Morda nekaterim ne bo všeč, da se spustni meni prikaže kot dodaten seznam in hkrati razširi glavne elemente. Če želite to popraviti, jo lahko postavite. Če želite to narediti, v kaskadnih listih slogov vnesite naslednji vnos: ul ul {položaj: absolutno; Levo: 15px; Desno: 15px; Vrh: 15px; Spodaj: 15px;}. Seveda, vrednosti, ki jih boste uporabili sami. Glede na to, kje želite videti spustni meni, bo CSS ponudil veliko več lastnosti, ki lahko dodajajo različne učinke in okrasijo naše sezname.
Zaključek
Še enkrat je vredno omeniti zasnovo postavitve menija. V tem primeru dodelite pravila CSS, uporabite vgnezdene vrednosti, na primer ul ul. Če imate v dokumentu druge podobne modele, lahko pride do velikih težav. V teh situacijah morate uporabiti bolj specifičen namen, na primer, selektorje ali id-identifikatorje. Postavitev spustnega menija, prikazanega v članku, je namenjena seznanjanju s splošnim dizajnom. Preostanek dela je na ramenih.
Similar articles
Trending Now