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

Da bi v celoti razumeli, kaj se dogaja v članku, se je potrebno malo seznaniti 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-razred ": lebdenje" se lahko dodeli kateremu koli Oznaka 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 lebdite kazalec miške na katero koli oznako njegova vsebina postane rdeča. Treba je omeniti, da ta pseudo-razred pomeni še neizkrivljeno postavko. Mimogrede, ": hover" je povezal podobne elemente. Ampak s tem psevdonimom bomo ustvarili spustni meni CSS.

Navodila

• Ustvarite postavitev našega menija. Če želite to narediti, bomo naredili oznako HTML. Ustvarite gnezdeni seznam :. 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, uporabljamo slogovne liste, določite naslednjo lastnost: ul ul {display: none;} To bo odstranilo elemente drugega seznama z zaslona.
• Ustvarite meni v spustnem meniju CSS z glavnega seznama. V kaskadnih listih slogov pišemo naslednje pravilo: ul li: hover ul {display: block-}. Ta vnos pomeni, da ko miško premikate nad elementom li na seznamu ul, se na zaslonu prikaže ul (ugnezdeni). 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 med oznake
• vsebino. Na seznamu lahko spremenite število elementov.

Dekorativne spremembe

Takoj, ko je postavitev glavnega menija pripravljena, lahko nadaljujete s svojo zasnovo. Verjetno se mnogi na prvem mestu ž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 {list-style-type: none;}. Nato lahko vstavite okvir in naredite 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; na vrhu: 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 treba omeniti zasnovo postavitve menija. V tem primeru dodelite pravila CSS, uporabite vgnezdene vrednosti, na primer ul ul. Če imate v dokumentu druge podobne modele, potem lahko pride do velikih težav. V takih situacijah morate uporabiti bolj specifičen namen, na primer, selektorje ali id-identifikatorje. Postavitev spustnega menija v izdelku je namenjena seznanjanju s splošnim dizajnom. Preostanek dela je na ramenih.