Hvordan lage en rullegardinmeny i HTML ved hjelp av CSS?

En rullegardinmeny er en måte å la brukeren utforske forskjellige alternativer tilgjengelig for ham/henne når hun bruker et nettsted. Dette er noe en nødvendig widget når du designer et nettsted. CSS lar deg lage flotte rullegardinmenyer som gjør det samlet sett å øke brukeropplevelsen og forskjønne utseendet på nettstedet ditt. Dette innlegget består av å gi:

1. Opprette en rullegardinboks
2. Opprette en rullegardinmeny

La oss begynne

Opprette en rullegardinboks

Ofte må du ha sett at når du tar med musemarkøren over et tekststykke eller en knapp på et nettsted, vises en rullegardinboks. Slik gjør det.

Eksempel

Dette eksemplet demonstrerer opprettelsen av en rullegardinboks.

Html

Ta med musen hit

Klikk på meg

For å lage en rullegardinboks, lagde vi først en div container for å plassere innholdet i rullegardinboksen inni den, for å åpne rullegardinboksen har vi brukt et element.

CSS

.fall ned
Posisjon: relativ;
Display: Inline-block;

"Rullegardin" -klassen er tildelt den første div -containeren som hekker hele innholdet. Vi har satt sin posisjon til relativt slik at når rullegardinmenyen åpnes, plasseres den rett under knappen.

CSS

.rullegardininnhold
Display: Ingen;
bakgrunnsfarge: Whitesmoke;
Bredde: 100%;
polstring: 15px;

DIV-containeren som inneholder rullegardininnholdet har fått tildelt "rullegardinstyring" -klassen ". Vi har satt displayet til ingen, dessuten, gitt det litt bredde og polstring.

CSS

.Rullegardin: Hopp .rullegardininnhold
Display: Block;

For å gjøre rullegardinmenyen til, tildelte vi det: Hoverstatus og satte skjermen til å blokkere slik at den vises under knappen.

Og til slutt har vi stylet på knappen vår også etter vårt ønske.

knapp
polstring: 5px;
Bakgrunnsfarge: Hvete;
Font-Family: Lucida Sans;

Produksjon

Det er opprettet en rullegardinboks. La oss nå flytte til å lage en rullegardinmeny.

Opprette en rullegardinmeny

En rullegardinmeny består av en liste over alternativer, og den åpnes bare når en bruker bringer musemarkøren over den. Du kan opprette rullegardinmeny på nettstedet ditt ved hjelp av CSS. Følg eksemplet nedenfor.

Html

Meny

Kontakt oss
Om oss
Annen

Her la vi til ankerkoder for å gi flere alternativer i rullegardinmenyen.

CSS

.dropBtn
bakgrunnsfarge: laks;
Farge: Hvit;
Bredde: 100px;
polstring: 18px;
Grense: 0;
Font-størrelse: 17px;

For det første vi gir vår knapp litt stil ved å bruke forskjellige CSS -egenskaper.

CSS

.fall ned
Posisjon: relativ;
Display: Inline-block;
Bredde: 160px;

Som allerede forklart ovenfor, har vi satt posisjonen til DIV med "rullegardin" -klassen til slektning, slik at når rullegardinmenyen åpnes, plasseres den rett under knappen.

CSS

.rullegardininnhold
Display: Ingen;
bakgrunnsfarge: Whitesmoke;
Bredde: 100%;

Her bruker vi noen grunnleggende CSS -egenskaper for å style vårt rullegardininnhold.

CSS

.rullegardininnhold a
Display: Block;
farge svart;
polstring: 12px;
Tekstdekorasjon: Ingen;

I ovennevnte CSS -kode styler vi koblingene som er til stede i rullegardinmenyen. Vi har satt skjermen for å blokkere slik at hver lenke vises på en ny linje.

CSS

.Rullegardin: Hopp .dropBtn
Bakgrunnsfarge: Sandybrown;

.rullegardin-innhold A: Hopp
Bakgrunnsfarge: Lightgrey;

.Rullegardin: Hopp .rullegardininnhold
Display: Block;

Her styler vi hoverseffektene for meny -knappen og rullegardinmenyen.

Produksjon

Slik kan du lage en rullegardinmeny.

Konklusjon

En rullegardinmeny gir en bruker forskjellige alternativer tilgjengelig for ham/henne når hun bruker et nettsted. Du kan opprette disse rullegardinmenyene ved hjelp av forskjellige CSS -egenskaper. For å lage en grunnleggende rullegardinboks kan du bruke en DIV -beholder og plassere rullegardininnholdet inne i den, dessuten kan du bruke CSS -egenskaper, du kan gi det litt stil. Når du har lært hvordan du lager en grunnleggende rullegardinboks, kan du bruke lignende teknikker for å lage en rullegardinmeny. Denne guiden lærer deg hvordan du lager en rullegardinmeny ved hjelp av et passende eksempel.