Gør-det-selv vandret rullemenu ved hjælp af CSS og HTML. Smuk vandret menu fuld bredde Strækmenu fuld bredde css

Et ret almindeligt layout for en webstedsmenu, når beholderen med den optager hele den tilgængelige bredde på siden. I dette tilfælde støder det første element op til venstre kant, og det sidste støder op til højre, og afstanden mellem alle elementer er ens. I dag vil vi fortælle dig, hvordan dette gøres.

Vi tilbyder dig et eksempel på implementering af en gummimenu ved hjælp af CSS til din ressource. I denne menu vil emnerne være placeret på én linje. Javascript vil ikke blive brugt. Indholdet af menuen vil blive vedlagt en almindelig liste. Hovedtræk ved en sådan menu er dens alsidighed, som kommer til udtryk i det faktum, at både antallet og længden af varer kan være enhver.

Hvordan implementerer man dette?

Hver programmør kan tilbyde sin egen måde at løse et givent problem på. Det hele afhænger af hans fantasi, niveau af professionalisme og evner. Den mest almindelige løsning på dette problem er at bruge en tabel. Mange vil også foreslå at bruge javascript. Dem, der ville foreslå at bruge visningsegenskaben med værdien bord eller tabel-celle- Jeg skynder mig at skuffe. Denne metode er ikke tilstrækkelig cross-browser-kompatibel.

Vores løsning

Vores tilbud vil blive bygget på et solidt fundament af HTML5 og CSS3 viden.

Essensen af processen er baseret på egenskaben tekstjustering med justify-værdien. For dem, der har glemt, minder jeg dig om: denne egenskab orienterer tekstjusteringen over hele beholderens bredde.

Ved brug af vores løsning skal to obligatoriske regler overholdes. Den første er, at bredden af menupunktsbeholderen skal være mindre end teksten. Altså ikke på én linje. Den anden vigtige regel er, at ord strækkes lige meget, uanset om de hører til samme punkt eller ej.

Nedenfor er kode, der fungerer som et eksempel på oprettelse af en gummimenu:

HTML

< ul> < li>< a href= "#" >hjem < li>< a href= "#" >Blog < li>< a href= "#" >Nyheder < li>< a href= "#" >Populær < li>< a href= "#" >Nye varer

ul ( tekst- align: retfærdiggøre; overløb: skjult; /* eliminerer bivirkningerne ved metoden */ højde: 20px; /* eliminerer også unødvendige ting */ markør: standard ; /* indstiller den oprindelige form for markøren */ margen: 50px 100px 0 100px; baggrund: #eee; polstring: 5px; ) li (display: inline; /* laver menupunkter til tekst */) li a (display: inline-blok; /* eliminerer ordskift i menuer */ farve: #444; ) a: hover ( farve: #ff0000; ) ul: efter ( /* danner den anden linje for at teste metoden */ indhold: "1" ; margin-venstre: 100%; højde: 1px; overløb: skjult; display: inline-blok; )

For at arbejde i den gode gamle Internet Explorer skal du desuden tilføje følgende kode til CSS

ul ( z- index: expression(runtimeStyle. zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, "< li class = "last" > ")); ) ul .last ( margin-venstre: 100%; ) * html ul ( /* behøver kun ie6 */ højde: 30px; )

Efter at have specificeret de nødvendige egenskabsværdier og kode, får vi denne gummimenu:

Ulemper ved metoden

Volumenkode
Manglende evne til at bestemme den aktive tilstand af et element gennem en klassevælger. Dette sker på grund af brud på ord i afsnit (hvis der er et). Løsningen på dette problem er at tilføje en anden container inde i listeelementerne.
Til rullemenuen skal du tilpasse koden på grund af den negative virkning af overløb .

Hvilke browsere virker det i?


6.0+	6.0+	10.5+	5.0+	3.6+	-	-

Hej. Jeg har ikke skrevet indlæg om emnet html/css-arbejde i meget lang tid. For nylig er jeg lige begyndt at sammensætte et nyt layout, og i processen stødte jeg på et interessant trick, der giver dig mulighed for at gøre menuen fleksibel (du kan tilføje nye elementer til den, og størrelsen vil ikke øges, men vil altid være 100% af menuen forældreblok). Så i dag implementerer vi en gummimenu ved hjælp af CSS.

Hvis du er for doven til at læse artiklen, kan du se denne video. Forfatteren forklarer også alt meget godt:

Gummimenu med CSS - trin 1

Det første trin er altid html markup, hvor ville vi være uden det? Men i vores tilfælde vil alt være enkelt:

blokindpakning til menu
selve menuen, vist gennem en punktopstilling (ul-tag)
Nå, menupunkterne er inde, og derfor har de allerede links

Alt er klart, her er min markup-kode:

Det hele ser standard ud, sådan her:

Nu vil vi sætte alt i den ønskede form, CSS vil komme til at fungere.

Trin 2 - Grundlæggende stilarter

Dernæst vil jeg tilføje stilarter til indpakningsblokken. Jeg vil nemlig sætte den maksimale bredde til 600 pixels (bare for at gøre det nemmere at tage et skærmbillede, så menuen passer), og jeg vil også centrere blokken.

Wrap(
baggrund: #fff;
max-bredde: 600px;
margin: 0 auto;
}

Trin 3 - implementer gummi

Lad os nu tage på selve menuen. Jeg fjerner markørerne fra det (ul-tagget), laver en lineær baggrundsgradient og, vigtigst af alt, bruger displayet: table-row-egenskaben til at få containeren til menuen til at opføre sig som en tabelrække. Dette er vigtigt at gøre for yderligere manipulationer.

R-menu(
baggrund: lineær gradient(til højre, #b0d4e3 0%,#88bacf 100%);
display: tabel-række;
liste-stil: ingen;
}

Som du kan se, løste ovenstående kode bare alt, hvad jeg skrev om. Forresten er det praktisk at generere gradienter ved hjælp af Ultimate CSS Gradient generator-værktøjet. Jeg skriver om det igen en dag.

R-menu(
vertikal-align: bund;
display: tabel-celle;
bredde: auto;
tekst-align: center;
højde: 50px;
kant-højre: 1px solid #222;
}

vertical-align: bottom - denne egenskab er nødvendig, så hvis teksten i et menupunkt tager 2 linjer, vil den blive vist jævnt. Når vi laver menuen, kan du fjerne denne egenskab, zoome ind, så emnerne komprimeres og teksten flyttes over på to linjer, og du vil se et visningsproblem. Returner ejendommen og alt vil være i orden.
display: table-cell - da vi indstiller selve displaymenuen til at være en tabelrække, ville det være logisk at indstille dens elementer til at blive vist som celler i en tabel. Er det nødvendigt.
width: auto — bredden vil blive beregnet automatisk, afhængigt af længden af teksten i afsnittet
text-align: center - dette er kun for at centrere teksten inde
højde: 50px — indstil højden til 50 pixels
godt, border-right er bare en kant til højre, en adskiller for elementer

Indtil videre ser menuen uskøn ud, men det er okay, det er på tide at huske på det.

Den sidste ting at gøre er at style linkene inde i emnerne. Her har jeg denne kode:

R-menu li a(
tekst-dekoration: ingen;
bredde: 1000px;
højde: 50px;
vertikal-align: midt;
display: tabel-celle;
farve: #fff;
skrifttype: normal 14px Verdana;
}

Og sådan ser menuen ud nu:

Lad mig igen forklare nogle linjer:

egenskaben tekstdekoration tilsidesætter standardunderstregningen for links
width: 1000px er måske den vigtigste linje. Du skal indstille linkene til cirka denne bredde, måske mindre, men bestemt større end det bredest mulige menupunkt. Linkene vil ikke være 1000 pixels brede, da bredden vil være begrænset af li-menupunktet, hvis bredde er indstillet til auto, men dette vil gøre det muligt at sikre, at det for et hvilket som helst antal punkter i menuen altid vil være 100 procent af bredden.
vertical-align: middle og display: table-cell - den første vil justere teksten lodret til midten, og den anden vil også vise links som celler. Begge egenskaber er nødvendige.
skrifttype - ja, dette er blot et sæt indstillinger for skrifttypen. Læs om css-egenskaber for skrifttyper i denne artikel.

Trin 4 (valgfrit) Du kan tilføje interaktivitet

For eksempel, så farven på et menupunkt ændres, når der holdes musemarkør. Dette kan implementeres ganske enkelt ved at bruge hover pseudo-klassen:

R-menu li:hover(
baggrundsfarve: #6bba70;
}

Test af menuen for gummiagtighed

Fantastisk, menuerne er klar, men vi har ikke tjekket det vigtigste - hvor gummiagtigt det er, som jeg lovede dig. Nå, jeg vil tilføje 2 elementer mere til menuen:

Menuen forbliver 600 pixels bred. De resterende varer blev simpelthen krympet lidt for at få plads til 2 nye.

Jeg tilføjer endnu et langt punkt:

Som du kan se, er menuen skrumpet lidt mere, og det lange punkt vises ganske normalt. Og hvis det ikke var for lodret-align: bottom-egenskaben, som jeg fortalte dig om, ville menuen se værre ud.

Jeg reducerer menuen til tre punkter.

Varerne er blevet meget friere, men selve menuen har ikke ændret sig i bredden. Så vi lavede en 100% gummimenu!

Hvordan tilpasser man det?

I princippet, hvis du indstiller indpakningsblokken til en maksimal bredde frem for en fast, så behøver den ikke engang at blive tilpasset. I mit tilfælde har jeg egenskaben max-width: 600px og når bredden bliver mindre end 600 pixels, vil blokken simpelthen krympe sammen med skærmen, uden at danne en vandret rulle.

Nå, hvis du på en eller anden måde vil ændre eller rette menuen på mobile enheder eller bredskærme, så vil medieforespørgsler hjælpe dig! Held og lykke med at bygge hjemmesiden!

Vandret menu er en liste over webstedssektioner, så det er mere logisk at markere det inde i elementet

Sådan laver du en horisontal menu: layout og design eksempler

HTML-markering og grundlæggende stilarter til en vandret menu

Som standard er alle listeelementer placeret lodret, der optager hele bredden af beholderelementet, som igen optager hele bredden af dets beholderblok.

HTML-markering til vandret navigation

Menupunkt
Menupunkt
Menupunkt

En vandret menu placeret inde i et tag kan desuden placeres inde i et element

...

Der er flere måder at placere dem på vandret. Først skal du nulstille standardbrowserstilene for navigationselementer:

Ul ( liste-stil: ingen; /*fjern listemarkører*/ margin: 0; /*fjern top- og bundmargen lig med 1em*/ polstring-venstre: 0; /*fjern venstre polstring lig med 40px*/ ) a (tekst-dekoration: ingen; /*fjern understregning af linktekst*/)

Metode 1. li (display: inline;)

Gør listeelementer med små bogstaver. Som et resultat er de placeret vandret med et mellemrum på 0,4 em tilføjet på højre side mellem dem (beregnet i forhold til skriftstørrelsen). For at fjerne det skal du tilføje en negativ højremargen for li li (margin-right: -4px;) . Dernæst styler vi linkene som vi ønsker.

Metode 2. li (flyd: venstre;)

Gør listeelementer flydende. Som et resultat er de placeret vandret. Højden af beholderblokken ul bliver nul. For at løse dette problem, tilføjer vi (overløb: skjult;) til ul, udvider det og dermed tillader det at indeholde flydende elementer. For links, tilføje en (vis: blok;) og style dem som du ønsker.

Metode 3. li (display: inline-blok;)

At lave listeelementer inline-blok. De er placeret vandret, et hul er dannet på højre side, som i det første tilfælde. For links, tilføje en (vis: blok;) og style dem som du ønsker.

Metode 4. ul (display: flex;)

Gør ul-listen til en fleksibel beholder ved hjælp af . Som et resultat er listeelementerne arrangeret vandret. Vi tilføjer en (vis: blok;) til linkene og style dem som ønsket.

1. Adaptiv menu med understregningseffekt, når du holder musen over et link

2. Adaptiv menu til et bryllupswebsted

3. Adaptiv menu med kammuslinger

4. Adaptiv menu på båndet

5. Responsiv menu med logo i midten

6. Responsiv menu med logo til venstre

God eftermiddag

Det er ofte nødvendigt at lave en vandret menu, der vil strække sig over hele bredden af den overordnede blok, uanset hvor mange elementer den indeholder.

I dag vil jeg gerne vise dig, hvordan du laver netop sådan en menu.

Så vores menu bliver som følger:

Den strækkes i fuld bredde og skiller sig ud, når den svæves over. Menuen er afrundet på siderne.

HTML MARKUP

hjem

Interessante nyheder

Endnu et menupunkt!

For at gøre menuen i fuld bredde brugte jeg borde med 100% bredde. Hvert bord har div menupunkt container. Afhængigt af om det første, sidste eller mellemliggende menupunkt er div-y er tildelt den relevante klasse.

I hver div Beholderen har 2 sidekanter med absolut positionering, som er nødvendige for korrekt visning. Hvis du bruger standardkanter, vil teksten springe med 1-2 pixels, når du skifter menupunkter, hvilket er godt.

klasse aktiv er ansvarlig for det valgte menupunkt og fremhæver det.

I hver vare har vi et billede og tekst. For at sikre, at alt dette er justeret strengt i midten lodret, bruger vi et bord. Takket være egenskaben for lodret justering vil vores menupunkter altid blive vist glat og vil ikke flytte sig væk.

CSS REGLER

Lad os først indstille stilarter for den generelle visning af menuen:

Menu_container ( polstring-top: 40px; bredde: 100%; højde: 47px; border-spacing: 0px; ) .menu_container td ( vertical-align: middle; /* vertikal justering */ ) .sidste_punkt_menu, .første_punkt_menu, . bredde: 100%; højde: 47px; kant: 1px fast #dadbda; z-indeks: 1000; position: relativ; kant til venstre: ingen; ) .inner_table (bredde: 100%; højde: 100%; ) .inner_table td ( polstring: 0px; vertikal-justering: midt; kant: ingen; tekstjustering: venstre; bredde: 150 px; polstring-venstre: 4px; ) .td.inner_table_title ( polstring-top: 4px; font-weight: fed; ) .td.inner_table_img ( width: 40px!important; ) .inner_table_menu ( højde: 100%; polstring: 0px; vertical-align: middle; border: none; text-align: left; ) .inner_table_title ( polstring-venstre: 10px; polstring-højre: 10px; teksttransformering: store bogstaver; linjehøjde: 13px; ) .inner_table_menu td.inner_table_img ( bredde: 30px!vigtigt; højde: 30px!vigtigt; polstring-venstre: 15px; )

For skønhed, lad os runde hjørnerne på siderne af menuen:

First_point_menu ( -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 1px solid #dadbda; ) .last_point_menu ( -webkit-border-top-right-radius: 5px; -webkit-border -bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px ;)

Nu har vores menu et smukkere udseende:

Indtil videre har det første punkt ikke en venstre kant. Vi ordner det lidt senere.

Lad os nu tilføje svæveeffekter til menuen.

Middle_point_menu:hover, .last_point_menu:hover, .first_point_menu:hover, .middle_point_menu.active, .last_point_menu.active, .first_point_menu.active, .middle_point_menu.active (baggrundsfarve: #CAE285; baggrundsbillede: -moz-linear- gradient(top, #CAE285, #9FCB56); baggrundsbillede: -webkit-gradient(lineær, 0 0, 0 100%, fra(#CAE285), til(#9FCB56)); baggrundsbillede: -webkit-lineær -gradient(top, #CAE285, #9FCB56); baggrundsbillede: -o-linear-gradient(top, #CAE285, #9FCB56); baggrundsbillede: lineær gradient(til bund, #CAE285, #9FCB56); border: 1px solid #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; border-venstre: none; z-index: 5000; ) /* vil regne ud grænser ved at svæve */ .first_point_menu (kant: 1px solid #dadbda ; ) .first_point_menu:hover, .first_point_menu.active ( border: 1px solid #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; ) .last_point_menu ( border: 1px solid #dadbda; border-left :. :hover (kant: 1px fast #9FCB56; kant til venstre: ingen; kantfarve: #aec671 #9fbb62 #87ac4a; ) .sidste_punkt_menu.aktiv ( kant-venstre: ingen; )

Nu ser vores menu meget pænere ud, men indtil videre har vi ingen grænser til de fremhævede menupunkter. Lad os ordne dette!

/* stilarter for sidekanter */ .borderLeftSecond, .borderRightSecond (visning: ingen; position: absolut; bredde: 1px; højde: 47px; baggrundsfarve: #9fbb62; top: 0px; z-indeks: 1000; ) /* absolutte forskydninger for grænser */ .borderLeftSecond ( venstre: 0px; ). , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond (display: blokerSecond) det første og sidste punkt */ .first_point_menu.active .borderLeftSecond ( display: none; ) .last_point_menu.active .borderRightSecond ( display: none; ) .last_point_menu:hover .borderLeftSecond ( display: blok; )

Det er alt!

Vi fik en fremragende menu strakt over hele bredden af forældreblokken! Elementerne overlapper ikke hinanden, når du holder musen over, og layoutet hopper ikke.