Vertikal meny i CSS. Fast sidomeny i ren CSS Standard CSS-stilar för horisontell meny

I den här handledningen kommer vi att göra en klassisk horisontell meny i ren CSS. Den har ikoner i listor. När du håller muspekaren över ett objekt ändrar det mjukt färgen på knappen och texten och lägger till en skugga. Rullgardinslistor kan göras på flera nivåer, och viktigast av allt är detta helt enkelt implementerat i ren CSS3.

I lektionen kommer vi att använda:

• display:flex;
• använda övergång ;
• vi kommer att placera elementen med hjälp av position .

HTML-strukturen för den horisontella menyn

Först av allt, låt oss skriva markeringen för den horisontella menyn. Vi öppnar vår utvecklingsmiljö i mitt fall är det PhpStorm , skapa en index.html-fil, skriv html:5-ramverket, ersätt lang med ru .

Jag kommer att ta bort all meta utom kodningen, jag kommer att skriva min titel " tom-menyn».

Mellan kroppen skriver vi header-taggen, och i den finns ett block med klassen .dws-menu där vår meny kommer att finnas. Vidare kommer strukturen att vara som följer, vi kommer att skapa listor i mängden fem stycken. Varje lista kommer att ha en länk med attributet href="#". Då kommer det att finnas en ikon I med klassen .fa .fa-

Klicka på tillämpa.

Låt oss skriva namnet på menyalternativen ( Hem, Produkter, Tjänster, Nyheter, Kontakter).

Välj och anslut sedan ikonerna. Vi går till Font Awesome-webbplatsen, väljer ikoner för dessa menyalternativ:

Vi laddar ner arkivet från sajten med ikoner, extraherar dess innehåll till vår dator, kopierar fonts-mappen och css-mappen till vår utvecklingsmiljö.

Teckensnittsmappen innehåller ikonteckensnitt och css-mappen innehåller deras stilar. Komprimerade stilar kan tas bort av font-awesome.min , inkludera okomprimerad font-awesome.css .

I index.html kopplar vi ihop ikoner och föreskriver varje objekt sin egen ikonstil ( Hem, kundvagn, kuggar, e-listan, kuvertöppet).

Vi har gjort huvudramen, vi kommer att bilda undermenyn efter att ha beskrivit huvudstilen, och nu kommer vi att skapa en fil där vi kommer att beskriva huvudstilarna för den horisontella menyn style.css och koppla den till index.html . För att kontrollera att stilarna är anslutna kommer jag att skapa en mapp img , jag kommer att placera en godtycklig bild på bakgrunden i den. Låt oss skriva bildens anslutning med bakgrund .

Body( bakgrundsbild: url("../img/ep_naturalwhite.png"); )

Beskriva CSS-stilar för den horisontella menyn

Först och främst, låt oss återställa alla indrag som olika webbläsare kan ställa in som standard:

Dws-meny *( marginal: 0; utfyllnad: 0; )

Låt oss ställa in rubriken till 200 spader. och tilldela typsnittet Cuprum, som kan laddas ner och kopplas separat till din webbplats, ifall vi kommer att skriva ytterligare typsnitt.

Header (marginal: 200px; teckensnittsfamilj: Cuprum, Arial, Helvetica, sans-serif; )

Låt oss dölja markörerna från listorna:

dws-menu ul, .dws-menu ol( liststil: ingen; )

Låt oss visa listorna horisontellt med display: flax , och göra den centrerad:

Dws-meny > ul( display: flex; justify-content: center; )

I rubriken, låt oss dra in bara från toppen, skriv margin-top .

Rubrik( margin-top: 200px; teckensnittsfamilj: Cuprum, Arial, Helvetica, sans-serif; )

Låt oss designa vår meny, ställa in färgen på knapparna, typsnittet etc.

Dws-meny > ul li a( display: block; bakgrund: #ececed; utfyllnad: 15px 30px 15px 40px; font-size: 14px; färg: #454547; text-decoration: none; text-transform:versaler;)

Sedan placerar vi ikonerna, tilldelar listorna position: relativ; för att centrera ikonerna ytterligare:

dws-menu > ul li( position: relativ; )

dws-menu > ul li > a i.fa( position: absolut; topp: 15px; vänster: 12px; font-size: 18px; )

Låt oss tilldela en gränsavgränsare till listorna, välj det första LI-elementet och ställ in gränsen. Vi väljer det sista elementet LI och tilldelar det en liknande kantlinje.

Dws-meny > ul li:first-child( border-left: 1px solid #b2b3b5; ) .dws-menu > ul li:last-child( border-right: 1px solid #babbbd; )

Göra separatorer för LI-listor:

Meny förvärvad utseende, sedan kan du börja beskriva svävstilar.

Animera den horisontella menyn med muspekaren

Dws-meny li a:hover( bakgrund: #454547; färg: #ffffff; box-shadow: 1px 5px 10px -5px svart; övergång: lätthet i alla 0.3s;)

Och för att få denna effekt att försvinna smidigt, lägg till den här stilen till länken i vila:

Huvudmenyn är klar och du kan börja beskriva undermenyerna och deras undermenyer.

Beskriver en CSS/HTML-rullgardinsmeny

Vi öppnar index.html och lägger till till exempel en extra meny till produkterna. Mellan LI-listorna infogar vi UL , vi kommer att placera fem listor i den, där det kommer att finnas länkar med attributet herf=”#” .

ul>li*5>a

Klicka på tillämpa, skriv namnet på objekten ( Kläder, elektronik, mat, verktyg, liv. kemi).

• Kläder
• Elektronik
• Mat
• Verktyg
• Gen. kemi

Sedan öppnar vi style.css och beskriver undermenyns stilar.

Välj den andra listan och ge den position: absolut; , ställ in minimibredden till 150 pixlar.

/*undermeny*/ .dws-menu li ul( position: absolut; min-bredd: 150px; )

Låt oss skriva gränsen för 1 topp till listorna.

Dws-meny li > ul li( kantlinje: 1px fast #c7c8ca;)

För länkar i undermenyn, ställ in utfyllnaden till 10 pixlar, ta bort texttransformationen och gör bakgrunden ett par toner mörkare bakgrund: #e4e4e5; .

Dws-menu li > ul li a( utfyllnad: 10px; textomvandling: ingen; bakgrund: #e4e4e5; )

Sedan kommer vi att skapa en annan kapslad meny. Låt oss gå till uppmärkningsfilen och till exempel i "Elektronik" bildar vi menyn analogt, som vi gjorde tidigare. Beskriv styckerubriker ( Kameror, datorer, telefoner) och spara.

De visas, men dolda under huvudmenyn, nu position: absolut; kapslade UL och flytta den med 150 toppar. åt sidan:

Dws-menu li > ul li ul( position: absolut; höger: -150px; topp: 0; )

Och för deras utseende kommer vi att välja listorna på svävaren och visa dem med display: block; .

dws-menu li:hover > ul( display: block; )

Nu kan du lägga till flernivåmenyer genom att helt enkelt kopiera UL-blocket och ändra dess objekt.

• Hem
• Produkter
  • Kläder
    • Skor
    • Jackor
    • Byxor
  • Elektronik
    • kameror
    • Datorer
    • Telefoner
      • Samsung
      • Flf
      • Äpple
  • Mat
  • Verktyg
  • Gen. kemi
• Tjänster
  • Service 1
  • Service 2
  • Service 3
• Nyheter
• Kontakter

Låt oss sedan dekorera knapparna med ingrediensen för de sista stegen. Jag använder en CSS-generator, jag har skapat flera förinställningar, du kan skapa dina egna, i mitt fall kopierar jag bara given kod och placera på plats bakgrunden som jag skrev innan.

Om så önskas kan den här menyn designas för den stil som passar dig på webbplatsen, det räcker bara att generera en färg och ersätta den i koden. Resultatet är en enkel och samtidigt snygg horisontell meny gjord med ren CSS.

God dag kära läsare. Idag kommer vi att diskutera ämnet hur man gör en horisontell meny med html och css". Menyn finns som regel i sidans rubrik och är en lista med länkar till de viktigaste sidorna, den kallas också huvudmeny. Användare kommer ständigt att klicka på dessa länkar. Hur du ordnar dem och vilken design du ger menyn kommer att påverka användarnas beteende, konvertering, deras övergripande upplevelse av din webbplats och, naturligtvis, .

HTML-kod för horisontell meny

En gång i tiden gjordes huvudmenyn för sajten på bilder, tabeller, blixt och möjligen något annat, men nuförtiden finns det den mest populära och korrekta metoden att skapa en meny med "list"-taggar.

Taggar används för att skapa menyer.

,
• och .

Vi får en färdig toppmeny i rubriken, utan några speciella stilar och bells and whistles, detta kan kallas ramen för din framtid vacker meny. Om du kopierar och klistrar in denna html och css kommer det att se ut så här.

Ett exempel på en ram (mall) för din framtida meny

Allt blev helt enkelt, du vill naturligtvis ha en vacker huvudmeny direkt, men utan att förstå grunderna kommer du helt enkelt inte att kunna skapa en bra meny utan fel i html och css.

Det finns också flera andra CSS-metoder används för att göra menyn horisontell utöver float:left; , till exempel display:inline-block; eller display:flex; , men det rekommenderas att använda metoden som beskrivs ovan.

Låt oss fylla vår menymall med olika stilar och göra den skön.

Exempel på en vacker horisontell meny för en webbplats

Nu ska jag ge några färdiga exempel med färdig design horisontell meny.

Du kan skapa alla "snygga saker" för din webbplats själv, och inte titta på Internet. Det enklaste sättet att göra detta är baserat på ett av exemplen nedan.

Enkel blå meny med separata poster

CSS-stilar för "toppmenyn".

Nedan är stilarna denna meny. HTML-koden förblir densamma som i menyn "skelett".

Ul ( liststil: ingen; /*ta bort listmarkörer*/ marginal: 0; /*ta bort stoppning*/ stoppning-vänster: 0; /*ta bort stoppning*/ marginal-topp:25px; /*indrag överst*/ ) a ( text-dekoration: ingen; /*ta bort länktext understruken*/ bakgrund:#30A8E6; /*lägg till bakgrund till menyalternativ*/ färg:#fff; /*ändra länkfärg*/ padding:10px; /*lägg till utfyllnad */ font-family: arial; /*ändra teckensnitt*/ border-radius:4px; /*lägg till avrundning*/ -moz-transition: all 0.3s 0.01s lätthet; /*gör en mjuk övergång*/ -o-transition : all 0.3s 0.01s ease; -webkit-transition: all 0.3s 0.01s ease; ) a:hover ( bakgrund:#1C85BB;/*lägg till svävningseffekt*/ ) li ( flyta:vänster; /*lägg listan horisontellt till implementera menyn*/ margin-right:5px; /*Indrag i menyalternativen*/ )

Huvudmenyn ligger på en färgad linje med röd bakgrund

css-stilmeny på färglinjen

Rullgardinsmeny i HTML+CSS

För genomförande ytterligare rullgardinsmeny (rullgardinsmeny) på webbplatsen för alla menyalternativ måste vi lägga till en ytterligare lista med objekt till HTML-koden för en länk från den horisontella menyn och ändra CSS-stilarna. I stilarna kommer vi att använda ett enkelt knep - att ändra visningen av rullgardinsmenyn när du håller muspekaren till det objekt vi behöver i topp meny. Låt oss till exempel ta objektet "tjänster".

Exempel på att skapa en enkel rullgardinsmeny

HTML-kod i rullgardinsmenyn

• Hem
• Tjänster
  • Service 1
  • Lång service 2
  • Service 3
• Priser
• Kontakter

Dropdown CSS-stilar

Och för att förstå exakt vilka tjänster och kategorier du bör ha rekommenderar jag att du bekantar dig med materialet:.

Jag försökte berätta så kort som möjligt om hur man skapar en horisontell huvudmeny, gör några mallar, hur man lägger till enkla stilar till den och gör den snyggare, hur man gör en rullgardinsmeny för din webbplats. För enkelhetens skull har jag samlat alla menyer som presenteras ovan i en html-fil, som du kan ladda ner nedan. Det ser ut som på skärmdumpen:

Tack för uppmärksamheten.

Vertikal meny görs på basis av en lista, punktlista eller numrerad. Som standard staplas alla listobjekt vertikalt och tar upp hela bredden på behållarelementet, vilket i sin tur tar upp hela bredden på dess behållarblock.

Listelement kan innehålla inte bara länkar, utan även titlar, ikoner, bilder. Med hjälp av den vertikala menyn kan du göra kommentarer på webbplatsen, en lista över kategorier, etc.

1. Vertikal meny med titel

Enkel elegant design. Lämplig för stylingkategorier på sajten. Vid muspekaren ändrar listobjektet färgen på länken.

2. Vertikal meny i stil med "tunnelbanekarta"

En intressant lösning för utformningen av en vertikal meny, det är möjligt att lägga till kapslade menyer. "Metrogren" - listans vänstra kant, markörer genereras före varje länk.

• Listobjekt
  • kapslade listobjekt
  • kapslade listobjekt
  • kapslade listobjekt
• Listobjekt
• Listobjekt

3. Vertikal meny med svävningseffekter

Ikon och bakgrundsfyllning, som visas när du håller muspekaren över ett listelement, hjälper till att diversifiera utformningen av vertikala menyelement.

4. Vertikal meny med ikoner

Menyikoner ger ett visuellt ankare som kompletterar den verbala beskrivningen av varje kategori. För att visa ikoner måste du ansluta . Du kan också använda andra ikontypsnitt eller bildikoner.

5. Vertikal meny med bilder

Detta exempel kan användas för att designa block med nya produkter, liknande produkter, etc. webbutikens hemsida.

Jpeg">