Hvordan opretter man en rullemenu i CSS? Sådan placeres listeelementer vandret.

Hej kære læsere af min blog! Dagens artikel vil være meget nyttig for begyndere layoutdesignere. For i dag vil vi skabe enkle vandret menu. Før vi går direkte videre til layoutet, vil jeg sige et par ord om, hvorfor jeg besluttede at vælge netop dette emne til artiklen.

Faktisk er alt ret simpelt, da jeg tænkte på emnet for den næste lektion for webstedet, begyndte jeg at huske og analysere min erfaring med at studere layout, hvad jeg skulle beskæftige mig med på indledende fase etablere mig som layoutdesigner, hvilket var mest uforståeligt for mig, da jeg studerede dette område mv. Jeg stillede mig selv alle disse spørgsmål for bedre at forstå, hvad der kunne være interessant for en person, der starter sin karriere som layoutdesigner. Og personligt, så snart jeg begyndte at studere layout, opstod de fleste spørgsmål vedrørende layoutet af forskellige menuer, især når det kommer til menu på flere niveauer. Og så i dag vil vi tale om menuen, og mere specifikt om den horisontale menu. Så lad os begynde!

Lad os begynde at lægge vores horisontale menu ud!

Som du sikkert har gættet, er den første ting, vi skal gøre, at oprette en HTML-side med standardmarkering og forbinde en stilfil til den. Jeg vil ikke gå i detaljer om dette trin, for jeg håber stadig, at du ikke er sådan en nybegynder, at jeg skal fortælle dig i detaljer, hvad krop og hoved er, og hvordan stilarter hænger sammen. Lad mig bare sige det ud over stilarterne til vores menu i css fil Jeg vil skrive den enkleste nulstilling for at nulstille stilene og opnå den samme visning af indrykning i alle browsere. Sådan ser min enkleste nulstilling faktisk ud:

Vi vil ikke sige noget detaljeret om nulstilling af stilarter endnu, da dette i det væsentlige er et emne for en anden artikel, er det eneste du behøver at vide om ovenstående kode, at takket være denne kode Alle sideelementer, som vi vil skrive, vil have margin og polstring nulstillet. Dette skal gøres for at vores side skal se ens ud i alle browsere.

Så hvad har vi i os? på dette tidspunkt? Vi har html side med standard markup:

Vandret menu

Og vi har en stilfil forbundet til denne side (for mig er det style.css), med følgende indhold:

Næste skridt bliver skabe html opmærkning til vores menu.

Oprettelse af markup til menuen

I vores opmærkning vil vi bruge nyt tag, som dukkede op i HTML5, besluttede jeg mig for straks at vænne dig til nye tags for så at sige at følge trenden og standarden På trods af at de nye HTML 5-tags ikke understøttes af ældre browsere, anbefaler jeg stadig at bruge dem. i dit layout, da det er tidligt eller senere, skal du stadig skifte til dem, ligesom layoutdesignere på et tidspunkt skiftede fra tabellayout til bloklayout, dette er virkeligheden, det er bedre at følge trenden!

Og da vi allerede taler om at støtte nye html tags 5, for at vi ikke skal have problemer med dette i ældre browsere, skal vi inkludere et særligt bibliotek i vores dokument - html5shiv. Dette gøres ved at indsætte i
hovedafsnittet på din side med følgende kode:

Alle tags efter dette (og andre tags relateret til HTML5) vil normalt blive opfattet af ældre browsere.

Lad os vende tilbage direkte til vores opmærkning. Dernæst skal vi indsætte en punktopstilling i vores tag, for mig ser det sådan ud:

hjem
Om os
Portefølje
Blog
Kontaktpersoner

Så vi ser ud til at være færdige med opmærkningen, det er tid til at begynde at skrive stilarter, da vores menu nu mildest talt ikke ser særlig godt ud:

Skrivestile til vores horisontale menu

Og så, den første ting, vi skal gøre, når vi lægger menuen ud, er at fjerne listemarkørerne, vi har åbenbart ikke brug for dem, vi gør det sådan her:

Ul( liste-stil: ingen; )

Herefter vil vores menu se således ud:

Jeg kan ikke rigtig godt lide, hvordan vores menu sidder fast i kanterne af browseren, lad os rette op på det:

Med denne kode indstillede vi bredden af vores menu, gav den 50px top- og bundmargener og placerede den i midten. Hvem ved ikke, om et blokelement har en bredde for at kunne positionere dette element strengt taget i centrum skal vi bare spørge ham margen(margin) til højre og venstre med værdien auto.

Næste trin er endelig at gøre vores menu vandret dette gøres ved at indstille elementerne

flyde: venstre

Menu li( float:venstre;)

Hele vores menu er nu blevet vandret.

Hvis du ikke forstår, hvad der præcist skete, og hvad float-egenskaben gør, anbefaler jeg at google information om denne ejendom og studere det grundigt, fordi
Ikke en eneste side med layout kan undvære det, det kan jeg med sikkerhed fortælle dig. Nå, okay, lad os fortsætte!

Menu li a( display:blok;/* Gør linket til et blokelement*/ padding:12px 20px;/* Indstil udfyldningen */ tekst-dekoration: ingen; /* fjern understregning*/ color:#fff;/* gør linkfarven hvid */ background:#444;/* gør baggrundsfarven mørk */ font:14px Verdana, sans-serif;/* indstil skriftstørrelse og navn */ )

Her er en af de mest vigtige regler- display:blok;. Faktum er, at links som standard er inline-elementer, og inline-elementer er indrykket forskellige browsere bruges på forskellige måder, så det er tilrådeligt at gøre linket til et blokelement og først derefter anvende de egenskaber, der er forbundet med eksterne eller interne indrykninger. Nu vil jeg ikke belaste dig med unødvendig information over tid. rigtige eksempler du vil selv forstå, hvorfor en sådan vægt lægges her.

Lad os se, hvad vi har, opdater browsersiden, og så er du klar!:

Som du kan se, ser det ikke dårligt ud, vi kan sige, at vores menu i princippet er klar. Det eneste, der stadig skal gøres, er at indstille lyset på linkene, når man svæver, og det ser ud til, at menuen vil se bedre ud med separatorer mellem punkterne.

Lad os starte med afgrænsningerne:

Menu li( border-left:1px solid #666; ) .menu li:first-child( border-left:none; )

Hvad har vi gjort her? Ja, alt er meget enkelt, vi sætter vores point (

) venstre kant af 1px størrelse og farve #666;. Hvad angår .menu li:first-child-vælgeren, bruger vi her en speciel pseudo-klasse, der giver os mulighed for at vælge det første underordnede element på listen. Jeg anbefaler også at læse om pseudo-klasser mere detaljeret på internettet, du vil lære en masse nyttige ting.

Lad os se, hvad vi fik igen:

Efter min mening er det meget bedre med afgrænsninger.

Menuen er a:hover(baggrund:#888;)

Igen ved at bruge en speciel pseudo-klasse, denne gang svæv, indstiller vi farven på linket, når vi svæver over det, se:

Jeg synes det er fedt :) Jeg håber du ender med samme menu som min.

Jeg slutter her denne lektion, Jeg håber virkelig, at det var nyttigt for dig, og nu ved du, hvordan du opretter en simpel vandret menu på ren html og css. Selvfølgelig lavede vi en menu på et niveau, det vil være lidt mere kompliceret med en menu på to niveauer (med en indlejret liste), men dette er et emne for en anden lektion, det er alt for mig. Kom igen, jeg bliver glad!!!

Opgave

Vis en punktopstilling vandret uden punkttegn.

Løsning

Bullet tag

lodret over hinanden. For at oprette navigationselementer er det i nogle tilfælde praktisk at vise listen vandret. Der er flere måder at opnå denne listevisning på.

Du bør allerede vide, at HTML har blok- og inline-elementer. Inline-elementer opretter ikke deres egne blokke. Et eksempel på sådanne elementer er tags eller . Blokelementer vises med ny linje og opret en rektangulær blok, et eksempel på sådanne tags eller
Så her er tagget
er også et blokelement.

At tagge

ikke opførte sig som et blokelement, kan du bruge CSS til at gøre det inline.

CSS-egenskabsvisningen bestemmer, hvordan elementet vil blive vist i dokumentet. Lad os overveje tre af dens betydninger (selvom der er flere):

blok - elementet vises som et blokelement.
inline - elementet vises som inline.
inline-block - block-line element, læs mere om denne type element nedenfor, vi vil bruge det.

Lad os først lave en vandret liste ved at omdanne dens punkttegn til inline-elementer. I CSS stil Lad os skrive en regel, hvor li-vælgeren er sat til egenskaben display med værdien inline .

List horisontalt ul.menu-top > li ( display: inline; /* Arranger elementer vandret */ listestil: ingen; /* Fjern listemarkører */ polstring: 5px; /* Marginer omkring tekst */ kant: solid 1px # 000000 baggrundsfarve: #fffff0;

Så denne stil fungerede, og vi fik et vandret arrangement af listeelementer:

Figur 1. Eksempel #1 på arbejde.

Denne metode har ulemper. Faktum er, at inline-elementer har nogle begrænsninger sammenlignet med blokelementer. For eksempel kan de ikke gives bredde og højde, men det kan blokere.

For eksempel skal det menuelement, vi laver, have en bredde på 150px og en højde på 40px. Lad os prøve at ændre stilen til følgende, det vil sige tilføje to regler, der angiver størrelsen på menupunktet:

ul.menu-top > li ( display: inline; /* Arranger elementer vandret */ listestil: ingen; /* Fjern listemarkører */ padding: 5px; /* Marginer omkring tekst */ kant: solid 1px #000000 ; baggrundsfarve: #fffff0 width: 150px;

Disse ændringer vil ikke føre til ændringer. For at menupunkter kan placeres vandret og for at kunne indstille deres bredde og højde, skal de indstille typen til inline-blok . Lad os ændre vores eksempelkode:

List horisontalt ul.menu-top > li ( display: inline-blok; /* Arranger elementer vandret */ listestil: ingen; /* Fjern listemarkører */ polstring: 5px; /* Marginer omkring tekst */ kant: fast 1px #000000 baggrundsfarve: #fffff0;

Denne kode virker, og ændringerne er synlige:

Figur 2. Eksempel nr. 2 i aktion.

Men der kan være forskellige varianter, for eksempel skal vi vise indlejrede lister i menuen:

Indlejret liste. ul.menu > li ( display: inline-blok; /* Arranger elementer vandret */ listestil: ingen; /* Fjern listemarkører */ padding: 5px; /* Marginer omkring tekst */ baggrundsfarve: #ffffff0 ; kant: 1px fast #000000;

Her er resultatet af denne kode:

Figur 3. Eksempel #3 på arbejde.

Vi ser, at blokkene ikke er justeret i højden, som vi gerne vil. Selvfølgelig kan du angive samme højde for alle blokke, men vi ved det ikke altid på forhånd præcise værdi, og det kan ændre sig.

Men hvorfor sker det egentlig?

Vores blokke har en display-egenskab med værdien inline-block . Det betyder, at de har kvaliteter af både blokelementer (evnen til at angive bredde og højde) og inline-elementer. Det, vi ser, er kvaliteten af de inline-elementer.

Lad os se på en streng med "A"-tegn i forskellige størrelser:

A A A A A A A

Vi ser, at alle bogstaver er lodret justeret langs den nederste linje. Mere præcist, langs grundlinjen, men lad os ikke komme ind i ukrudtet nu. Så det samme skete med vores blokke.

For at justere tekst lodret skal du bruge egenskaben vertikal-justering. I vores eksempel #3 skal vi bruge værdien top , som vil justere den øverste kant af elementet med toppen af selve elementet. højt element linjer.

Lad os nu anvende det på en streng med "A"-tegn i forskellige størrelser:

A A A A A A A

Bogstaverne ser ud til at "springe" lidt. Jeg indstillede CSS-kanten til det højeste bogstav for at vise, at der faktisk ikke er nogen hop, kun tom plads mellem den øverste kant (hvor justeringen forekommer) og det øverste punkt på "A".

Egenskaben vertikal-align skal anvendes på hvert inline-element, det nedarves ikke. Du kan læse mere om denne ejendom: vertikal-align .

Efter denne digression vil vi fortsætte med at placere listeelementerne vandret.

Anden vej

Du kan placere listeelementer vandret ved hjælp af float-egenskaben. Denne egenskab angiver, hvilken side elementet er justeret på, og har to positioner: venstre og højre .

Her er et eksempel med denne kode:

List horisontalt ul.menu-top > li ( float: venstre; /* placer listen vandret */ listestil: ingen; /* Fjern listemarkører */ polstring: 5px; margin: 2px; kant: 1px solid #000000; baggrund -farve: #fffff0;

Her er resultatet af koden:

Figur 4. Eksempel på arbejde.

Eksemplet ser ud til at virke. Men der er en advarsel ved at bruge denne ejendom. Nu vil vi se på det. Lad os for eksempel tage en kode, hvori der er to vandrette lister med på forskellige måder arrangement af elementer vandret: display og flyd:

Her er resultatet af koden:

Figur 5. Eksempel på arbejde.

I disse eksempler er listen containere

topliste

Ved første øjekast fungerer alt. Men lad os bytte vores lister. Lad os sætte listen med menu-1-klassen i koden før listen med menu-2-klassen (nu er den lavere).

Dette er, hvad vi får som resultat:

genstande nederste menu også omslutte toppen af menuen, fordi effekten af float-egenskaben ikke er blevet annulleret, og den gælder for alle efterfølgende elementer.

Hvordan løser man dette problem?

For at gøre dette skal du bruge clear-egenskaben, den annullerer elementets omvikling omkring et andet element, hvis det har float-egenskaben sat.

Her er et modificeret eksempel, der bruger egenskaben clear:

Det kan ses, at den nederste liste ikke længere vikler sig om den øverste, elementerne kolliderer ikke med hinanden. Men i den første liste er der tags

stadig er placeret uden for containeren

Derudover ved vi i arbejde ikke altid, hvilket element der vil følge elementet ved hjælp af float. Den ideelle mulighed ville være at lukke driften af float-ejendommen i den samme blok, hvor den er åben.

Dette gøres ved hjælp af et pseudo-element. Her er koden:

List horisontalt ul( kant: 1px fast rød; ) ul.menu-1 > li, ul.menu-2 > li ( liste-stil: ingen; /* Fjern listemarkører */ polstring: 5px; margin: 2px; kant: 1px solid #000000; baggrundsfarve: #fffff0; */ ul.menu-1::after( indhold: "."; /* indhold påkrævet */ display: blok; /* blok påkrævet */ clear: begge; højde: 0; /* for ikke at strække beholderen */ ) ul.menu-2 > li ( display: inline-blok; )

Nu har vi 100% fungerende kode.

Denne teknik med float-egenskaben bruges normalt i webstedslayout til at justere kolonner, der er oprettet af tags. På denne måde får vi en normal konstruktion af søjler med den nødvendige højdejustering. Når vi opretter en menu, er højden på blokkene i de fleste tilfælde ikke vigtig for os, den er næsten altid den samme. Derfor er det ganske berettiget at bruge reglen (display: inline-blok) i disse tilfælde.

Men for fuldstændigheden af emnet har vi gjort os bekendt med alle mulige muligheder. Selvom der kan være andre måder, for eksempel at bruge CSS-tabeller, anbefaler søgemaskiner på det kraftigste kun at bruge tabeller til deres tilsigtede formål, og ikke til at organisere navigationselementer eller noget andet.

Lav en vandret menu, hvis elementer har en vilkårlig hældning (fig. 1).

Ris. 1. Menuvisning med skrå punkter

Stilegenskaben transform er ansvarlig for at transformere elementet. SkewX-funktionen bruges som dens værdi, som sætter den ønskede hældning. Det er nemmere at indstille hældningsvinklen i grader, for eksempel er 30 grader 30º fra lodret. Transformation påvirker alt børneelementer, så teksten inde i elementet vil også være skrå, hvilket ikke er på den bedst mulige måde afspejles i dens læsbarhed og skønhed. Derfor er det vigtigt at anvende hældningen på teksten igen, men i den anden retning skal du blot ændre tegnet foran graderværdien.

Browsere understøtter transformationsegenskaben hovedsageligt med deres egne præfikser, så for universalitet i stilarter bør du gentage den flere gange med samme værdi, tilføje -moz- til Firefox, -webkit- til Safari og Chrome, -o- for Opera og -ms - Til Internet browser Explorer som vist i eksempel 1.

Eksempel 1: Menupunkt Vip

HTML5 CSS3 IE Cr Op Sa Fx

Menu li ( display: inline-blok; /* Line- blokelementer*/ baggrund: #CA181A; /* Baggrundsfarve */ margin-right: 3px; /* Afstand mellem menupunkter */ -webkit-transform: skewX(-30deg); /* For Safari og Chrome */ -moz-transform: skewX(-30deg); /* For Firefox */ -o-transform: skewX(-30deg); /* For Opera */ -ms-transform: skewX(-30deg); /* For IE */ transform: skewX(-30deg); /* CSS3 */ ) a ( farve: #fff; /* Linkfarve */ display: blok; /* Blokelement */ polstring: 5px 15px; /* Marginer omkring tekst */ tekst-dekoration: ingen; /* Fjern underscore */ -webkit-transform: skewX(30deg) /* For Safari og Chrome */ -moz-transform: skewX(30deg); -ms-transform: skewX(30deg /* For IE */ transform: skewX(30deg) li:hover (baggrund: #333; /* Baggrundsfarve ved svævning * / )

Joker
Pazuzu
Palpatine
Doktor Doom

I i dette eksempel en vandret menu oprettes ved hjælp af en punktopstilling. For at sikre, at listen er vandret, tilføjes en visningsegenskab med værdien inline-blok til li-elementet i typografierne. Til skævheden skal du bruge transformationsegenskaben med skewX-funktionen og værdien -30º. Denne egenskab anvendes også på links inde i listen, men med en positiv værdi på 30º sikrer dette, at bogstaverne vises korrekt i stedet for skråt.

Chrome-, Safari- og Firefox-browsere bruger transform-egenskaben til blok eller inline blokelementer, så linkene har deres display-egenskab sat til at blokere.

Lad os oprette en simpel vandret navigationsmenu til webstedet. For at gøre dette vil vi bruge simple teknikker, der vil resultere i den korrekte visning af vores menu i alle browsere.

Så lad os begynde. Lad os lave en liste med navnene på vores menu. Lad varenavnene være: "Hjem", "Nyheder", "Produkter", "Tjenester", "Partners", "Kontakter". Vi skaber ny fil kaldet menu.html, for eksempel ved hjælp af Dreamweawer eller ved at bruge en almindelig notesblok. I den, mellem kropsmærkerne, placerer vi vores menu. Dette er normalt punktliste ul med li-elementer. Vi gør selvfølgelig hvert menupunkt til et link, hvor vi i stedet for URL'en indsætter hash #. Ved brug af Photoshop program oprette et billede 3x30 px i størrelse, med gradientfyld som vist på billedet nedenfor. Filen vil blive gemt i GIF-format. Lad os kalde det bg.gif. Denne tegning vil fungere som baggrundsbillede af vores menu.

Her er indholdet af menu.html filen:

Simpel horisontal menu på tværs af browser

hjem
Nyheder
Produkter
Tjenester
Partnere
Kontaktpersoner

Lad os nu separat oprette en stilfil kaldet main.css. Dens liste er vist i sin helhed nedenfor.

Ul ( margin:0; /*nul polstring*/ polstring:0; /*nul polstring*/ float:venstre; /*juster listen til venstre*/ width:auto;/*indstil bredden af auto baseret på typen og indholdet af listen */ baggrundsbillede: url(bg.gif /*set); baggrundsbillede*/ background-repeat:repeat-x; /*gentag vores billede horisontalt*/ list-style:none; /*fjern listemarkører*/ baggrundsfarve:#4778c3; /*indstil baggrundsfarven for billedet*/ font-size:13px; /*indstil skriftstørrelsen*/ font-family:Arial, Helvetica, sans-serif; /*indstil skrifttypen*/ ) ul li ( float:venstre; /*juster listeelementerne til venstre*/ ) ul a ( display:blok; /*repræsenter menulinks som blokelementer*/ width:100px; /* sæt størrelsesblokken*/ height:30px /*og blokhøjde*/ text-align:center /*centered text*/ line-height: 2.1em; linjeafstand*/ tekst-dekoration: ingen; /*fjern understregning fra links*/ color:#fff; /*link tekstfarve - hvid*/ border-right:#fff solid 1px; /*grænse højre side blok (1px hvid linje)*/ ) ul a:hover ( farve:#ccc; /*link skifter farve, når det holdes over*/ )

Jeg mener, at der ikke skal være spørgsmål om indholdet af main.css-filen. Jeg skrev tipsene i kommentarerne tilstrækkeligt detaljeret og tydeligt, så jeg vil ikke gentage mig selv. Glem ikke at forbinde den til vores menu.html side ved hjælp af

Sammenfatte. Som et resultat fik vi en fuldstændig tværbrowser-vandret menu, der ser ens ud, ikke kun i alle moderne browsere, men også i sådanne sjældenheder som IE 5.5 og IE 6.0. Alle menuelementer præsenteres som blokelementer og har samme dimensioner på 100 px bredde og 30 px højde. Designet af et blokelement ved hjælp af højre kant bruges som separator for menupunkter. hvid 1px tyk. Dette er praktisk talt den enkleste måde at implementere en horisontal menu på. Selvfølgelig, hvis det ønskes, kan du ændre det, gøre det smukkere og mere funktionelt ved hjælp af fantasi, css-egenskaber og yderligere grafiske elementer. Nå, vores horisontale menu ser nogenlunde sådan ud:

Fordele ved denne løsning:
Let at gøre
Simpel kode
Ingen tabeller eller javascript
Cross-browser-kompatibilitet: Menuen ser ens ud i alle browsere
Der er kun brugt én tegning
Minimumskode på menu.html-siden
Minimumskode til implementering af stilarter i main.css

Filerne brugt i dette eksempel kan downloades i arkivet

God dag til alle, der læser nu denne udgivelse. I dag vil jeg fortælle dig om et af webstedsbygningsværktøjerne, som ingen webressource kan undvære. Dette er sitemenuen, eller som man også siger site map. I dag er der et ubegrænset antal typer og undertyper af menuer.

Udviklere af onlinebutikker, blogs, uddannelsestjenester og andre ressourcer eksperimenterer og skaber flere og flere nye og usædvanlige kort. Efter at have læst artiklen vil du lære, hvilke hovedgrupper alle typer navigationspaneler er opdelt i, du vil være i stand til at prøve hver af dem, og også lære at skrive menukode til et html-websted. Lad os nu gå i gang!

Der er flere måder at oprette en menu i opmærkningssprog. Deres grundlæggende koncept er at bruge en unummereret liste. I html 4, som er velkendt for os, skriver udviklere således tags på siden

Som anført i tidligere udgivelser, parelement

- et element på listen. For klarhedens skyld, lad os skrive koden enkel menu:

Navigation
Site navigation
- hjem
- Ugens nyheder
- Teknologiske fremskridt
- Snak
Men med fremkomsten af platformen blev markup-sproget genopfyldt med yderligere tags. Dette er grunden til, at menuen på moderne websteder er oprettet ved hjælp af et særligt tag< menu>. I brug adskiller dette element sig ikke fra punktopstillinger.

I stedet for en< ul>er ordineret< menu>. Der opstår dog væsentlige forskelle, når de bedømmes fra arbejdssiden. Så det andet eksempel fremskynder arbejdet søgeprogrammer og robotter i . Når de analyserer webstedsstrukturen, forstår de straks, at dette stykke kode er ansvarlig for webstedskortet.

Der er vandrette, lodrette og rullemenuer. Nogle gange er navigationslinjen designet som et billede. Siden teknologisegmentet er udvidet, bliver webtjenester gjort adaptive, dvs. Sidestrukturen tilpasser sig automatisk til enhedens skærmstørrelse. Lad os se på de listede menugrupper.
Lad os skabe en horisontal navigationsmodel
Denne type navigation er den mest populære. Når panelet er designet vandret, er alle menupunkter placeret i sidehovedet eller i "footeren" (nogle gange duplikeres navigationselementer, der vises samtidigt både øverst og nederst).

Som et eksempel vil vi oprette et vandret panel, hvis menupunkter vil blive stylet som css hjælp(cascading style sheets), eller rettere transformeret. Ja, alle sammen separat element vil være placeret i et affaset rektangel. fascineret?

Til transformation bruger vi en css-egenskab kaldet transform. For at specificere transformationen bruges den indbyggede skewX-funktion, som angiver skævvinklen i grader.

Desværre arbejder hver browser med denne egenskab på sin egen måde, på trods af de foreskrevne standarder. Derfor blev der oprettet specielle præfikser for at angive dette:
- -Frk- ( Internet Explorer)
- -o- (Opera)
- -webkit- (Chrome, Safari)
- -moz- (Firefox)
Lad os nu anvende den erhvervede viden til at skrive et eksempel.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 Vandret panel
hjem

Om virksomheden

Produkter

Kontaktpersoner

Vandret panel li (display: inline-blok; margin-højre: 6px; baggrund: #FF8C00; transform: skewX(-45deg); -webkit-transform: skewX(-45deg); -o-transform: skewX(-45deg) -ms-transform: skewX(-45deg) -moz-transform: skewX(40deg); li:hover (baggrund: #1C1C1C;)
hjem
Om virksomheden
Produkter
Kontaktpersoner

Til det andet program bruger vi den forrige kode som grundlag. Jeg ville have mine ting lodret menu var ikke skrå, men med afrundede hjørner.

Til dette brugte jeg en anden css ejendom grænse-radius.

I tidligere artikler har jeg allerede arbejdet med denne parameter, så jeg tror ikke, der vil være nogen vanskeligheder med at forstå dens funktion.

Lodret panel li( display: blok; margin: 13px; polstring: 13px; baggrund: #FF8C00; width:20%; text-align:center; font-size:20px; border-radius:10px; ) a ( farve: # fff;) li:hover (baggrund: #1C1C1C;)

hjem
Om virksomheden
Produkter
Kontaktpersoner

Som du allerede har bemærket, er hovedændringen i denne kode fraværet af displayet: inline-blokdeklaration, som faktisk var ansvarlig for det horisontale arrangement af navigationselementer.

Vi har set på hovedgrupperne navigationsbjælker, dog er der flere flere varianter, eller endnu bedre, tilføjelser.

Nogle gange opstår der situationer, hvor nogle af punkterne supplerer de vigtigste. I dette tilfælde kan du ikke undvære rullelister. De er skabt gennem transformationer ved hjælp af css-værktøjer.

Nedenfor har jeg vedhæftet koden til et lille program, der implementerer denne tilgang.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

Brødtekst på rullelisten ( padding-venstre: 30%; font-size: 18px; ) .m-menu ( margin: 0; padding: 9px; width:50%; text-align:center; kant: 3px solid #000; baggrund : #FF8C00; ) .m-menu > li (position: relativ; display: inline-blok; ) .m-menu a (display: blok; margin-venstre: -2px; polstring: 13px; farve: #fff; kant -venstre: 3px solid #fff; ) .m-menu a:hover (baggrund: #1C1C1C; ) .m-menu .s-menu (venstre: 10px; position: absolut; display: ingen; bredde: 155px; margin: 0; padding: 0; liste-stil: #FF8C00 .m-menu .s-menu a (kant: 1px solid #000;)

Brødtekst på rullemenuen ( padding-venstre: 30%; font-size: 18px; ) .m-menu ( margin: 0; padding: 9px; width:50%; text-align:center; kant: 3px solid #000; baggrund : #FF8C00; ) .m-menu > li (position: relativ; display: inline-blok; ) .m-menu a (display: blok; margin-venstre: -2px; polstring: 13px; farve: #fff; kant -venstre: 3px solid #fff; ) .m-menu a:hover (baggrund: #1C1C1C; ) .m-menu .s-menu (venstre: 10px; position: absolut; display: ingen; bredde: 155px; margin: 0; padding: 0; liste-stil: ingen: #FF8C00; .m-menu .s-menu a (kant: 1px solid #000;)

I dette eksempel opdelte jeg menuenhederne i to klasser:

m-menu
s-menu

Den første klasse er ansvarlig for hovedmenuen, og s-menuen er ansvarlig for undermenuen.

I koden kan du se en sådan teknik som .m-menu > li:hover eller .m-menu > li.

Så ved at bruge:hover angiver du, hvordan elementet vil opføre sig, når du svæver over det.

I dette tilfælde ændrer ">"-tegnet vælgeren, så kun objekter, der tilhører det øverste niveau, er blok-små bogstaver.

Undermenuen blev oprindeligt indstillet til at vise: ingen , som giver behandleren besked om at skjule sig denne genstand. Når du holder musemarkøren over et navigationselement med hover , ændres visningsegenskabsværdien til blok og åbner derfor rullelisten.

Som du kan se, er implementeringen af denne teknik meget enkel.

Nu har du styr på hovedtyperne af navigationspaneler og kan selv ændre, supplere og modernisere dem. Hvis du kunne lide min artikel, så abonner på blogopdateringer og del kilden til viden med venner og kolleger. Hej hej!

Med venlig hilsen Roman Chueshov

Læst: 1010 gange