Datamaskiner, Programvare
Hvordan lage en drop-down CSS menyer
I dag vil vi vurdere spørsmålet om "Hvordan oppretter jeg en rullegardin CSS menyer?". Det bør si med en gang at dette elementet vil bli gjort uten å koble noen ekstra midler. Det vil si at menyen vil bli opprettet kun med CSS og HTML.
trening
For å fullt ut forstå hva som er i det i artikkelen, trenger du litt å bli kjent med teoretisk materiale. Men hvis du er kjent med pseudo-klasser, kan du hoppe over dette avsnittet. Så, for å skape en vertikal rullegardin CSS menyer, trenger vi et element som «: hover». Pseudo «: hover» kan tilordnes til en HTML-kode. Den lar deg definere øyeblikk når et element Hold musen. For eksempel har vi utnevnt eiendom: «a: hover {color: red;}». Dette innlegget betyr at når du holder musen den blir rød på innholdet på tag . Det er verdt å merke seg at denne pseudo-element er også inaktivert. Forresten,: har «hover» relatert lignende elementer. Men fra dette vil vi skape pseudo CSS rullegardinmenyen.
instruksjon
Først, la oss forstå hva som er en drop-down menyen. Under denne definisjonen får en rekke forskjellige metoder konstruere forskjellige oppsett. I dette tilfellet vil vi analysere en struktur bestående av flere stadig synlige elementer og flere andre (skjult). La oss avslutte med teorien og begynne å øve.
- Vi skaper utformingen av vår meny. For å gjøre dette, HTML-kode merking. Lag en nestet liste:
-
- < / ul>. Noe sånt som dette skal se ut drop-down menyen. CSS for å gripe inn senere. I dette tilfellet hovedlisten består av tre hovedområder og to lukkede.
- Skjule undermenyen. Til dette bruker vi en stil, definere følgende egenskaper: ul ul {display: none;} Dette vil fjerne elementene i den andre listen fra skjermen.
- Lage en meny CSS, falle ned fra hovedlisten. De stilsett skrive den følgende regel: ul li: hover ul {display: block;}. Dette innlegget betyr at når musen er over elementet li, som ligger i ul listen vises på skjermen ul (vedlagt). Ved første øyekast kan en slik ordning virke komplisert og forvirrende. Men i virkeligheten er alt veldig enkelt.
- Bruk dette oppsettet selv ved å sette inn kodene
- innhold. Du kan endre antall listeelementer.
dekorative endringer
Så snart du hovedmenyoppsettet er klar, kan du gå videre til registrering. Sannsynligvis, mange i utgangspunktet villig til å kvitte seg med markører som indikerer listeelementet. Dette gjøres ved hjelp av en enkelt eiendom CSS, nemlig list-style-type. Du må legge til følgende oppføring: li {list-style-type: none;}. Deretter kan du sette rammen og gjør bakgrunnen. Grensen og bakgrunn hjelpe deg med dette. Kanskje noen ikke vil like rullegardinmeny vises som en ekstra liste, presser på de samme grunnleggende elementer. For å fikse dette, kan du plassere den. For å gjøre dette, Cascading Style Sheets skrive følgende oppføring: ul ul {position: absolute; venstre: 15px; høyre: 15px; top: 15px; bottom: 15 piksler;}. Selvfølgelig, de verdiene du vil bruke dine egne. Avhengig av hvor du ønsker å se rullegardinmenyene, vil CSS tilbyr mange flere funksjoner som kan legge ulike effekter og dekorere våre lister.
konklusjon
Igjen er det verdt å merke seg bygging av menyen layout. Å tilordne CSS-reglene som brukes i dette tilfellet embedded value for eksempel ul ul. Hvis du er i dokumentet for å møte andre lignende struktur, kan det være store problemer. I slike situasjoner må du bruke et bestemt formål, for eksempel velgere eller id-IDer. Ovennevnte artikkelen layout rullegardinmenyen er utformet for å lest den generelle design. Resten av arbeidet hviler på skuldrene.
Similar articles
Trending Now