Gör en horisontell meny, vars objekt har en godtycklig lutning (Fig. 1).
Ris. 1. Menyvy med lutande objekt
LösningStilegenskapen transform är ansvarig för att transformera elementet. SkewX-funktionen används som dess värde, vilket anger den önskade lutningen. Det är lättare att ställa in lutningsvinkeln i grader, till exempel är 30 grader 30º från vertikalen. Transformationen påverkar även alla underordnade element, så texten inuti elementet kommer också att lutas, vilket inte har den bästa effekten på dess läsbarhet och skönhet. Därför är det viktigt att tillämpa lutningen på texten igen, men för att göra detta, ändra helt enkelt tecknet framför gradervärdet.
Webbläsare stöder transformegenskapen huvudsakligen med sina egna prefix, så för universalitet i stilar bör du upprepa den flera gånger med samma värde, lägga till -moz- för Firefox, -webkit- för Safari och Chrome, -o- för Opera och -ms - för webbläsaren Internet Explorer som visas i exempel 1.
Exempel 1: Menyalternativ Lutning
HTML5 CSS3 IE Cr Op Sa Fx
Meny li ( display: inline-block; /* Inline block elements */ background: #CA181A; /* Bakgrundsfärg */ margin-right: 3px; /* Avstånd mellan menyalternativ */ -webkit-transform: skewX(- 30deg ); /* För Safari och Chrome */ -moz-transform: skewX(-30deg); (-30deg); /* För IE */ transform: skewX(-30deg) a ( färg: #fff; /* Länkfärg */ display: block; /* Blockelement */ padding : 5px 15px; /* Marginaler runt text */ text-decoration: ingen /* Ta bort understrykning */ -webkit-transform: skewX(30deg /* För Safari och Chrome */ -moz-transform: skewX(30deg); /* För Firefox */ -o-transform: skewX(30deg) /* För Opera */ -ms-transform: skewX(30deg); ( bakgrund: #333; /* Bakgrundsfärg när du svävar med musen */ )
- Joker
- Pazuzu
- Palpatin
- Doktor Doom
I det här exemplet skapas en horisontell meny med hjälp av en punktlista. För att säkerställa att listan är horisontell läggs en visningsegenskap med värdet inline-block till i elementet li i stilarna. För skew, använd egenskapen transform med skewX-funktionen och värdet -30º. Den här egenskapen tillämpas även på länkar i listan, men med ett positivt värde på 30º säkerställer detta att bokstäverna visas korrekt snarare än lutande.
Webbläsare Chrome, Safari och Firefox använder egenskapen transform på block eller inline-element, så länkar har visningsegenskapen inställd på block .
Uppgiften att centrera en horisontell meny kan vara knepig, särskilt för de som är nya med CSS. Sökandet efter lösningar leder till en mycket begränsad lista med metoder, varav de flesta bygger på CSS-trick, JavaScript eller användning av icke-standardiserade regler som inte stöds av alla webbläsare. I den här handledningen går vi igenom en metod för att centrera en horisontell meny som endast använder vanliga CSS-regler och fungerar i alla webbläsare.
Exempel på en centrerad menyNedan finns en horisontell meny centrerad i denna kolumn, där den andra fliken är aktiverad. Du kan försöka ändra storlek på webbläsarfönstret eller sidan för att se till att menyn alltid förblir centrerad och funktionell.
På demosidan kan du se flera designalternativ för en horisontellt centrerad meny. Vilken som helst av dem kan användas i dina projekt.
HTML-uppmärkningAlla menyer som visas i denna handledning har en enkel struktur. Detta är en vanlig oordnad lista med länkar placerade i ett element div.
- Första bokmärket
- Andra bokmärket
- Tredje flik
- Fjärde flik
Nedan är den fullständiga CSS-koden som används för att centrera menyn. En förklaring av funktionsprincipen ges senare i lektionen.
#centeredmenu ( float:left; width:100%; background:#fff; border-bottom:4px solid #000; overflow:hidden; position:relative; ) #centeredmenu ul ( clear:left; float:left; list-style :none: 0 0 0 1px; 3px 10px bakgrund:#000 text-dekoration: ingen ) #centeredmenu ul li a:hover ( bakgrund:#fff; ) #centeredmenu ul li; a.active, #centeredmenu ul li a.active:hover ( färg:# fff; bakgrund:#000;
Hur fungerar centreringsmetoden?Metodens verkan är baserad på den relativa placeringen av flytande blockelement i varandra. Låt oss först titta på hur storleken på element förändras med förskjutning.
Element div(block) utan förskjutning sträcks till hela den tillgängliga bredden.
Men om vi flyttar div till vänster kommer den automatiskt att krympa för att passa innehållet. Komprimering är nyckeln till att implementera denna menycentreringsmetod. Det hjälper dig att flytta menyn till rätt position.
Standard vänsterjusterad menyLåt oss ta en vanlig vänsterjusterad meny och göra om den steg för steg. För tydlighetens skull är föremålen färgade i olika färger, så det är direkt tydligt vad som går vart.
Observera följande punkter:
- Element centrerad meny div(blå rektangel) är förskjuten till vänster, men har en bredd på 100 %, så den förblir sträckt över hela sidan.
- Element ul(rosa rektangel) är inuti elementet centrerad meny div och flyttar till vänster. Det betyder att den kommer att komprimeras till bredden av dess innehåll, det vill säga till den totala bredden av alla bokmärken.
- Alla li-element (gröna rektanglar) finns inuti elementet ul och flytta till vänster. Således komprimeras de till storleken på länkarna i dem och radas upp i en horisontell linje.
- Inuti varje länk (orange rektanglar) visas bokmärkestexten: Bokmärke 1, Bokmärke 2, och så vidare.
Sedan kompenserar vi elementet ul till höger med 50 % med position:relativ; . När ett element kompenseras med procent under dessa förhållanden är det viktigt att komma ihåg att den totala bredden på elementen det innehåller inte är dess bredd. I vårt fall sker förskjutningen av halva webbläsarfönstret (eller det tillgängliga utrymmet för visning). Som ett resultat börjar vår meny i mitten av fönstret och sträcker sig delvis utanför dess gränser. Och låt oss gå vidare till nästa steg.
Flytta positionen för alla menyelement
Allt som återstår är att flytta alla element li kvar med 50 %. Detta är 50 % av bredden på vårt ul-element (behållaren som innehåller menyn). Således flyttas bokmärkena exakt till mitten av fönstret.
Några viktiga anteckningarNär du använder denna centreringsmetod finns det flera viktiga punkter att komma ihåg:
- Sedan elementet ul sträcker sig delvis utanför fönstret, vilket resulterar i att rullningslister visas. Därför måste du använda regeln overflow:hidden; för element centrerad meny div. Alltså den utskjutande delen av elementet div kommer att skäras av.
- Sedan elementet ul inte är anpassad till bokmärken, kan du inte använda några visuella stilar för det. Lämna ul-elementet utan bakgrundsfärg och utan kant så att det blir helt osynligt. Och stilar för bokmärken bör endast användas för element li.
- Om du behöver ställa in speciella stilar för det första och sista bokmärket måste du lägga till en klass för de första och sista elementen li, så att du kan styla dem individuellt.
Den föreslagna lösningen är kompatibel med alla webbläsare, använder inte JavaScript och stöder storleksändringsbar text.
Hej kära läsare av min blogg! Dagens artikel kommer att vara mycket användbar för nybörjarlayoutdesigners. För idag kommer vi att skapa en enkel horisontell meny. Innan vi går direkt till layouten vill jag säga några ord om varför jag bestämde mig för att välja just detta ämne för artikeln.
Faktum är att allt är ganska enkelt, när jag tänkte på ämnet för nästa lektion för webbplatsen började jag komma ihåg och analysera min erfarenhet av att studera layout, vad jag hade att ta itu med i det inledande skedet av att etablera mig som en layoutdesigner, vad som var mest obegripligt för mig när jag studerade detta område osv. Jag ställde mig alla dessa frågor för att bättre förstå vad som kan vara intressant för en person som börjar sin karriär som layoutdesigner. Och personligen, så fort jag började studera layout, dök de flesta frågorna upp om layouten på olika menyer, speciellt när det kommer till flernivåmenyer. Och så idag kommer vi att prata om menyn, och mer specifikt om den horisontella menyn. Så låt oss börja!
Låt oss börja lägga ut vår horisontella meny!Som du säkert gissat är det första vi behöver göra att skapa en HTML-sida med standarduppmärkning och ansluta en stilfil till den. Jag kommer inte att uppehålla mig i det här steget i detalj, eftersom jag fortfarande hoppas att du inte är så nybörjare att du i detalj kan berätta vad kropp och huvud är och hur stilar hänger ihop. Låt mig bara säga att utöver stilarna för vår meny kommer jag att skriva den enklaste återställningen i css-filen för att återställa stilarna och uppnå samma visning av indrag i alla webbläsare. Så här ser faktiskt min enklaste återställning ut:
Vi kommer inte att säga något i detalj om återställning av stilar ännu, eftersom detta i huvudsak är ett ämne för en annan artikel. Det enda du behöver veta om koden som beskrivs ovan är att tack vare denna kod kommer alla sidelement som vi kommer att skriva. har marginal och indrag nollställda, detta måste göras så att vår sida ser likadan ut i alla webbläsare.
Så vad har vi i det här skedet? Vi har en HTML-sida med standarduppmärkning:
Horisontell meny
Och vi har en stilfil kopplad till den här sidan (för mig är det style.css), med följande innehåll:
Nästa steg är att skapa html-uppmärkning för vår meny.
Skapar uppmärkning för menynI vår uppmärkning kommer vi att använda den nya taggen som dök upp i HTML5, jag bestämde mig för att omedelbart vänja dig vid de nya taggarna för att följa trenden och standarden, så att säga, trots att de nya HTML 5-taggarna inte stöds av äldre webbläsare, jag rekommenderar fortfarande starkt att använda dem i din layout, eftersom du förr eller senare fortfarande kommer att behöva byta till dem, precis som layoutdesigners en gång bytte från tabelllayout till blocklayout, detta är verkligheten, det är bättre att följa trenden!
Och eftersom vi redan pratar om att stödja nya html 5-taggar, så att vi inte har problem med detta i äldre webbläsare, måste vi inkludera ett speciellt bibliotek i vårt dokument - html5shiv. Detta görs genom att infoga i
huvudavsnittet på din sida med följande kod:
Alla taggar efter detta (och andra taggar relaterade till HTML5) kommer att uppfattas normalt av äldre webbläsare.
Låt oss återgå direkt till vår uppmärkning. Därefter måste vi infoga en punktlista i vår tagg, för mig ser det ut så här:
- Hem
- Om oss
- Portfölj
- Blogg
- Kontakter
Så vi verkar vara klara med uppmärkningen, det är dags att börja skriva stilar, eftersom vår meny nu inte ser särskilt bra ut, för att uttrycka det milt:
Skrivstilar för vår horisontella menyOch så, det första vi behöver göra när vi lägger ut menyn är att ta bort listmarkörerna, vi behöver uppenbarligen inte dem, vi gör så här:
Ul( liststil:ingen;)
Efter detta kommer vår meny att se ut så här:
Jag gillar inte riktigt hur vår meny sitter fast i kanterna av webbläsaren, låt oss fixa det:
Med den här koden ställde vi in bredden på vår meny, gav den 50px topp- och bottenmarginaler och placerade den i mitten. Vem vet, om ett blockelement har en bredd, så för att placera detta element strikt i mitten behöver vi bara ge det en extern marginal (marginal) till höger och vänster med värdet auto.
Nästa steg är att äntligen göra vår meny horisontell detta görs genom att ställa in elementen
Meny li( flyta:vänster;)
Hela vår meny har nu blivit horisontell.
Om du inte förstår exakt vad som hände och vad flytegendomen gör rekommenderar jag att du googlar information om denna fastighet och studerar den noggrant, eftersom
Inte en enda sida med layout klarar sig utan det, det kan jag säga dig med säkerhet. Okej, låt oss fortsätta!
Meny li a( display:block;/* Gör länken till ett blockelement*/ padding:12px 20px;/* Ställ in utfyllnaden */ text-decoration: none; /* ta bort understrykningen */ color:#fff;/* ställ in färglänkarna vit */ bakgrund:#444;/* gör bakgrundsfärgen mörk */ font:14px Verdana, sans-serif;/* ställ in teckenstorlek och namn */ )
En av de viktigaste reglerna här är display:block;. Faktum är att länkar som standard är inline-element, och indrag tillämpas olika på inline-element i olika webbläsare, så det är tillrådligt att göra länken till ett blockelement och först då tillämpa egenskaperna som är associerade med externa eller interna indrag på den. Nu vill jag inte belasta dig med onödig information med tiden, med riktiga exempel kommer du att förstå varför en sådan betoning läggs här.
Låt oss se vad vi har, uppdatera webbläsarsidan och så är det!:
Som du kan se ser det inte illa ut, vi kan säga att vår meny i princip är klar. Det enda som fortfarande behöver göras är att ställa in ljuset på länkarna när man svävar, och det verkar för mig att menyn kommer att se bättre ut med separatorer mellan objekten.
Låt oss börja med avgränsningarna:
Meny li( border-left:1px solid #666; ) .menu li:first-child( border-left:none; )
Vad har vi gjort här? Ja, allt är väldigt enkelt, vi ställer in för våra poäng (
Låt oss se vad vi fick igen:
Enligt mig är det mycket bättre med avgränsare.
Meny li a:hover( bakgrund:#888; )
Återigen genom att använda en speciell pseudoklass, den här gången svävar vi, ställer vi in färgen på länken när vi svävar över den, titta:
Jag tycker det är coolt 🙂, jag hoppas att du har samma meny som min.
Det är här jag kommer att avsluta den här lektionen, jag hoppas verkligen att den var användbar för dig och nu vet du hur man layoutar en enkel horisontell meny med ren html och css. Naturligtvis skapade vi en meny på en nivå; det kommer att vara lite mer komplicerat med en meny på två nivåer (med en kapslad lista), men det här är ett ämne för en annan lektion, det är allt för mig. Kom igen, jag blir glad!!!
I den här handledningen kommer vi att skapa en horisontell meny med CSS. Självklart kan du använda färdiga lösningar, till exempel anlita programmerare för CMS Made Simple. Men du letar inte efter enkla sätt, eller hur? :översittare:
Steg 1 - HTML-uppmärkningFörst måste vi skapa listobjekt med en tagg för varje objekt i vår horisontella meny. För att skapa en undermeny måste du lägga till ytterligare en underordnad lista i den överordnade.
Inledningsvis ser menyn vertikal ut, för att fixa detta kommer vi att skriva några stilar, redigera indrag, gränser, bakgrundsfärg och runda hörnen. Vi kommer att fixa bredd och höjd. Vi kommer att rikta in menyelementen till vänster med float: left (så att navigeringen får en horisontell struktur).
Meny, .menu ul, .menu li, .menu a (marginal: 0; utfyllnad: 0; kant: ingen; kontur: ingen; .menu (höjd: 40px; bredd: 505px; bakgrund: #4c4e5a; bakgrund: - webkit-linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); 100%); radie: 4px; -moz-border-radius: 4px .menu li (position: relativ; liststil: ingen; flytande: vänster; display: block; höjd: 40px;
Låt oss skriva följande stil ett tag och dölja rullgardinsmenyn. Detta kommer att göra redigeringen lättare.
Därefter kommer vi att skriva stilar som lägger till några grundläggande CSS-egenskaper som typsnitt, färger, utfyllnad, etc. Sedan lägger vi till en skugga för texten och färgövergångarna för att skapa en jämn effekt där färgen inte ändras omedelbart, utan med något intervall. För att skapa en länkavgränsare, låt oss lägga till en ram till vänster och höger och sedan ta bort den vänstra kanten från den första länken och den högra kanten från den sista länken. När du håller muspekaren över menyn ändras bara färgen.
Meny li a (skärm: block; utfyllnad: 0 14px; marginal: 6px 0; linjehöjd: 28px; textdekoration: ingen; kant-vänster: 1px fast #494942; kant-höger: 1px fast #4f5058; teckensnitt- familj: Helvetica, sans-serif: font-size: 1px 1px rgba(0,0,0,.6: color .3s ease-in-out; övergång: färg .3s ease-in-out; -o-transition: color .3s ease-in-out; color .3s ease-in-out left: none; ) .menu li:last-child a( border-right: none; ) .menu li: hover > a ( färg: #9fde63; )
Steg 4 - RullgardinsmenyFörst och främst, låt oss ta bort den här kodraden som vi lade till i det andra steget.
Meny ul (visa: ingen;)
Nu ska vi redigera stilen för undermenyn. Låt oss lägga till en undermenyplacering på 40px överst och 0px till vänster om menyalternativet och lägga till rundade hörn längst ner. Låt oss ställa in opaciteten till noll och ändra den till 1 vid hovring för att skapa en tona in/ut-effekt. För glideffekten upp/ned måste vi ställa in listhöjden till 0px när rullgardinsmenyn är dold och 36px när du håller muspekaren över rullgardinsmenyn.
Meny ul (position: absolut; överst: 40px; vänster: 0; opacitet: 0; bakgrund: #2f3035; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border- radie: 0 0 4px; -webkit-övergång: opacitet .3s lätthet .1s; -moz-övergång: opacitet .1s; 1s; ) .menu li:hover > ul ( opacitet: 1; ) .menu ul li ( höjd: 0; overflow: dold; utfyllnad: 0; -webkit-transition: höjd .3s lätthet .1s; -moz-transition: höjd .3s lätthet .1s; -o-övergång: höjd .3s lätthet .1s;
Ställ in bredden på den klickbara rullgardinsmenyn till 100px. Efter varje länk lade jag till en ram för att skilja dem åt. Vi tar bort gränsen i den sista länken.
Menu ul li a ( bredd: 100px; utfyllnad: 4px 0 4px 40px; marginal: 0; border: ingen; border-bottom: 1px solid #464649; ) .menu ul li:last-child a ( kantlinje: ingen; )
För att slutföra en horisontell CSS-meny måste du lägga till en ikon för varje rullgardinsmeny. För att göra detta kommer vi att skapa en anpassad klass för var och en av undermenyerna och lägga till en bakgrundsbild.
Meny a.d ( bakgrund: url(docs.png) no-repeat 6px center; ) .menu a.m ( bakgrund: url(bubble.png) no-repeat 6px center; ) .menu a.s ( bakgrund: url(arrow.png) no -upprepa 6px mitten)
Vi har framgångsrikt skapat en horisontell rullgardinsmeny med CSS3-stilar och utan att använda den, även om det också var möjligt. Om du har några frågor, låt mig veta i kommentarerna.
(nedladdningar: 398)
Låt oss skapa en enkel horisontell navigeringsmeny för webbplatsen. För att göra detta kommer vi att använda enkla tekniker som kommer att resultera i korrekt visning av vår meny i alla webbläsare.
Så, låt oss börja. Låt oss skapa en lista med namnen på vår meny. Låt artikelnamnen vara: "Hem", "Nyheter", "Produkter", "Tjänster", "Partners", "Kontakter". Skapa en ny fil som heter menu.html, till exempel med hjälp av programmet Dreamweawer eller med ett vanligt anteckningsblock. I den, mellan body-taggarna, placerar vi vår meny. Detta är en vanlig punktlista med ul med li-element. Naturligtvis gör vi varje menyalternativ till en länk, där vi istället för URL:en infogar hash #. Använd Photoshop, skapa en bild 3x30 px i storlek, med en gradientfyllning som visas i bilden nedan. Vi sparar filen i GIF-format. Låt oss kalla det bg.gif. Den här bilden kommer att fungera som bakgrundsbild för vår meny.
Här är innehållet i menu.html-filen:
Enkel horisontell meny för flera webbläsare
- Hem
- Nyheter
- Produkter
- Tjänster
- Partners
- Kontakter
Låt oss nu separat skapa en stilfil som heter main.css. Dess lista visas i sin helhet nedan.
Ul ( margin:0; /*noll utfyllnad*/ utfyllnad:0; /*noll utfyllnad*/ float:vänster; /*justera listan till vänster*/ width:auto;/*ställ in bredden på auto baserat på listans typ och innehåll */ background-image: url(bg.gif /*set the background image*/ background-repeat:repeat-x /*upprepa vår bild horisontellt*/ list-style:none; /*ta bort listmarkörer*/ background-color:#4778c3; ; /*ställ teckensnittet*/ ) ul li ( float:left; /*justera listelement till vänster*/ ) ul a ( display:block; /*representera menylänkar som blockelement*/ width:100px; /* ställ in blockstorleken*/ height:30px /* och blockhöjden*/ text-align:center/ line-height: 2.1em/ text-decoration:none; ta bort understrykning från länkar*/ color:#fff /*länktextfärg - vit*/ border-right:#fff fast 1px /*kant på blockets högra sida (1px vit linje)*/ ) ul a: hover ( färg:#ccc; /*länk ändrar färg när du håller muspekaren över*/ )
Jag tycker att det inte borde finnas några frågor om innehållet i main.css-filen. Jag skrev tipsen i kommentarerna tillräckligt detaljerat och tydligt, så jag kommer inte att upprepa mig själv. Glöm inte att koppla den till vår menu.html sida med hjälp av
Sammanfatta. Som ett resultat fick vi en horisontell meny över webbläsare som inte bara ser likadan ut i alla moderna webbläsare, utan också i sådana sällsyntheter som IE 5.5 och IE 6.0. Alla menyelement presenteras som blockelement och har samma mått på 100 px bredd och 30 px höjd. Som en separator för menyalternativ används en blockelementdesign med en vit högerkant 1px tjock. Detta är praktiskt taget det enklaste sättet att implementera en horisontell meny. Naturligtvis, om så önskas, kan du ändra det, göra det vackrare och mer funktionellt med hjälp av fantasi, CSS-egenskaper och ytterligare grafiska element. Tja, vår horisontella meny ser ut ungefär så här:
Fördelar med denna lösning:
Lätt att göra
Enkel kod
Inga tabeller eller javascript
Kompatibilitet över webbläsare: menyn ser likadan ut i alla webbläsare
Endast en ritning används
Minsta kod på sidan menu.html
Minsta kod för att implementera stilar i main.css
Filerna som används i detta exempel kan laddas ner i arkivet
