Computere, Software
Hvordan man laver en drop-down CSS menuer
I dag vil vi overveje spørgsmålet om "Hvordan opretter jeg en drop-down CSS menuer?". Det skal sige med det samme, at dette punkt vil blive foretaget uden at tilslutte nogen yderligere midler. Det vil sige, menuen vil blive oprettet kun med CSS og HTML.
uddannelse
For helt at forstå, hvad der er i det i artiklen, du har brug for en lille smule for at komme i nærkontakt med teoretisk materiale. Men hvis du er fortrolig med pseudo-klasser, kan du springe dette afsnit. Så for at oprette en lodret drop-down CSS menuer, vi har brug for et element som «: hover». Den pseudo «: hover» kan tildeles enhver HTML-tag. Det giver dig mulighed for at definere det øjeblik, hvor et element Kør musen. For eksempel har vi udnævnt ejendom: «a: hover {color: red;}». Denne post betyder, at når du svæver musen det bliver rød på indholdet på disse tag . Det er værd at bemærke, at denne pseudo-element også inaktiveres. Af den måde,: har «hover» relateret lignende elementer. Men fra dette vil vi skabe pseudo CSS drop-down menuen.
instruktion
Først, lad os forstå, hvad der er en drop-down menu. I henhold til denne definition får en masse forskellige metoder konstruere forskellige layouts. I dette tilfælde vil vi analysere en struktur, der består af flere hele tiden synlige elementer og flere andre (skjult). Lad os slutte med teorien og begynde at praktisere.
- Vi skaber layoutet af vores menu. For at gøre dette, HTML-kode mærkning. Opret en indlejret liste:
-
- < / ul>. Noget som dette skal se ud dit drop-down menuen. CSS til at gribe ind senere. I dette tilfælde den vigtigste liste består af tre hovedområder og to lukkede.
- Skjul undermenuen. Til dette bruger vi et stilark, definere følgende egenskaber: ul ul {display: none;} Dette vil fjerne elementerne i den anden liste fra skærmen.
- Opret en menu CSS, falde ned fra de vigtigste listen. De cascading style sheets skrive følgende regel: ul li: hover ul {display: block;}. Denne post betyder, at når musen er over det element li, som er beliggende i ul liste vises på skærmen ul (vedhæftet). Ved første øjekast, kan en sådan ordning virke kompliceret og forvirrende. Men i virkeligheden, alt er meget enkel.
- Brug dig selv dette layout ved at indsætte koderne
- dit indhold. Du kan ændre antallet af listeelementer.
dekorative ændringer
Så snart hovedmenuen layout er klar, kan du gå videre til registrering. Sandsynligvis, mange i første omgang villig til at slippe af markører angiver element på listen. Dette gøres ved hjælp af en enkelt ejendom CSS, nemlig listen-stil-typen. Du skal tilføje følgende post: li {list-style-typen: ingen;}. Derefter kan du indsætte rammen og gøre baggrunden. Grænsen og baggrund hjælpe dig med dette. Måske nogle vil ikke lide pull-down menu vises som en supplerende liste, skubber på de samme grundlæggende elementer. For at løse dette, kan du placere det. For at gøre dette, cascading style sheets skrive følgende oplysning: ul ul {position: absolut; venstre: 15px; højre: 15px; top: 15px; bottom: 15px;}. Selvfølgelig de værdier, du vil bruge din egen. Afhængigt af hvor du ønsker at se rullemenuerne, vil CSS tilbyde mange flere funktioner, der kan tilføje forskellige effekter og dekorere vores lister.
konklusion
Igen er det værd at bemærke, at opførelsen af menuen layout. For at tildele CSS regler, der anvendes i dette tilfælde embedded værdi, for eksempel, ul ul. Hvis du er i dokumentet for at møde andre lignende struktur, kan der være store problemer. I disse situationer, skal du bruge et bestemt formål, for eksempel selektorer eller id-id'er. Ovenstående artikel layout rullemenu er designet til at sætte den generelle design. Resten af arbejdet hviler på dine skuldre.
Similar articles
Trending Now