God dag till alla som nu läser denna publikation. Idag vill jag berätta om ett av verktygen för att bygga webbplatser som ingen webbresurs kan klara sig utan. Detta är sajtmenyn, eller som man också säger sajtkarta. Idag finns det ett obegränsat antal typer och undertyper av menyer.
Utvecklare av nätbutiker, bloggar, utbildningstjänster och andra resurser experimenterar och skapar fler och fler nya och ovanliga kartor. Efter att ha läst artikeln kommer du att lära dig vilka huvudgrupper alla typer av navigeringspaneler är indelade i, du kommer att kunna prova var och en av dem och även lära dig hur man skriver menykod för en html-webbplats. Låt oss nu börja!
Verktyg för att skapa ett navigeringsfält
Det finns flera sätt att skapa en meny i märkningsspråk. Deras grundläggande koncept är att använda en onumrerad lista. Således, i html 4, som är bekant för oss, skriver utvecklare taggar på sidan
- Och
- .
Som nämnts i tidigare publikationer, det parade elementet
- skapar en punktlista och
- - en del av listan. För tydlighetens skull, låt oss skriva koden för en enkel meny:
Navigering Webbplatsnavigering
- Hem
- Veckans nyheter
- Teknologiska framsteg
- Chatt
Men med tillkomsten av plattformen fylldes märkningsspråket på med ytterligare taggar. Det är därför menyn för moderna webbplatser skapas med hjälp av en speciell märka< meny>. Vid användning skiljer sig detta element inte från punktlistor.
Istället för en < ul>är föreskrivet < meny>. Däremot uppstår betydande skillnader när de bedöms från arbetssidan. Så det andra exemplet påskyndar arbetet med sökprogram och robotar i . När de analyserar webbplatsstrukturen förstår de omedelbart att denna kodbit är ansvarig för webbplatskartan.
Det finns horisontella, vertikala och rullgardinsmenyer. Ibland är navigeringsfältet utformat som en bild. Eftersom tekniksegmentet har expanderat görs webbtjänster adaptiva, d.v.s. Sidstrukturen anpassar sig automatiskt till enhetens skärmstorlek. Låt oss titta på de listade menygrupperna.
Låt oss skapa en horisontell navigeringsmodell
Denna typ av navigering är den mest populära. När panelen är utformad horisontellt finns alla menyalternativ i sidhuvudet eller i "sidfoten" (ibland dupliceras navigeringselement och visas samtidigt både uppe och nere).
Som ett exempel kommer vi att skapa en horisontell panel, vars menyalternativ kommer att utformas med CSS (cascading style sheets), eller snarare transformeras. Så varje enskilt element kommer att placeras i en avfasad rektangel. Fascinerad?
För transformation använder vi en css-egenskap som heter omvandla. För att ange en transformation, använd den inbyggda funktionen skewX, där lutningsvinkeln anges i grader.
Tyvärr fungerar varje webbläsare med den här egenskapen på sitt eget sätt, trots föreskrivna standarder. Därför skapades speciella prefix för att indikera detta:
- -ms- (Internet Explorer)
- -o- (Opera)
- -webkit- (Chrome, Safari)
- -moz- (Firefox)
Låt oss nu tillämpa den förvärvade kunskapen för att skriva ett exempel.
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 Horisontell panel
Horisontell panel
Och nu vertikalt. Jag sa vertikalt!
För det andra programmet använder vi föregående kod som grund. Jag ville att mina vertikala menyalternativ skulle ha rundade hörn snarare än fasade.
För att göra detta använde jag en annan css-egenskap gräns-radie.
I tidigare artiklar har jag redan arbetat med den här parametern, så jag tror inte att det kommer att finnas några svårigheter att förstå hur den fungerar.
Vertikal panel
Som du redan har märkt är huvudändringen i denna kod avsaknaden av en deklaration display: inline-block, som faktiskt var ansvarig för det horisontella arrangemanget av navigationspunkter.
Underpunkter i menyn: rullgardinslista
Vi har tittat på huvudgrupperna av navigeringspaneler, men det finns flera fler varianter, eller ännu bättre, tillägg.
Ibland uppstår situationer när några av punkterna kompletterar de viktigaste. I det här fallet kan du inte klara dig utan rullgardinslistor. De skapas genom transformationer med hjälp av css-verktyg.
Nedan har jag bifogat koden för ett litet program som implementerar detta tillvägagångssätt.
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 Rullgardinslista
Rullgardinslista
Hej kära besökare på min blogg! Idag kommer vi att prata om den horisontella huvudmenyn på webbplatsen, nämligen hur man anpassar den horisontella menyn i mitten. Ja, vid första anblicken, vad är det som är så komplicerat med det - jag satte in de nödvändiga indragen, justerade dem och det är det. Men det finns några nyanser här. En sajt är för det första dynamisk, dvs. Nytt innehåll dyker ständigt upp på sajten, nya informationsblock dyker upp osv. Så här kan vissa objekt visas/försvinna i huvudmenyn. Med hänsyn till allt detta måste vi se till att menyn förblir i mitten när vi lägger till eller tar bort ett menyalternativ. Naturligtvis är det inte alltid nödvändigt att centrera det, allt beror på designen. Men om du fortfarande tänker placera den horisontella menyn i mitten, kan vi genom att använda några enkla knep i CSS uppnå önskat resultat.
Artikelstruktur
Horisontell meny i mitten utan listruta
Låt oss först titta på exemplet med en horisontell meny som inte har listruta.
HTML-kod
Css-kod
*, *::efter, *::före ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box- dimensionering: border-box; box-sizing: border-box: 0 ) #mainmenu (bakgrund: #444; position: relativ; höjd: 40px; marginal: 30px 0 ) ul ( list-stil: ingen; 50% float: vänster marginal: 0 10px höjd: 40px ) #mainmenu ul li a:hoverLåt oss titta på allt i ordning, allt är enkelt här. Vi skapar en "huvudmeny"-behållare där vi placerar vår meny i form av en oordnad lista.
Nu kommer det till css-stilar. Först nollställer vi alla marginaler och utfyllnad för alla webbläsare. Därefter, med hjälp av "float:left"-egenskapen, flyttar vi vår oordnade lista åt vänster och sedan, med relativ positionering, flyttar vi den 50% åt höger. Bredden på "ul"-listan kommer att vara lika med summan av längderna för alla "li"-objekt som finns inuti den. Således, om vi mentalt delar webbläsarfönstret på mitten, kommer vår meny att flyttas till höger om skiljelinjen. För att justera, kommer vi också att tillämpa relativ positionering på "li"-objekten och flytta dem till vänster med 50%, och specificera egenskapen "left:-50%". Och dessutom, jag glömde nästan bort, måste vår "huvudmeny"-behållare ange egenskapen "overflow:hidden", annars får vi en horisontell rullningslist.
Det var allt, nu är vår meny riktad till mitten. Nu kan du lägga till eller subtrahera poäng, detta kommer inte att påverka placeringen. Du kan också använda den här menyn på dina webbplatser genom att helt enkelt ändra stilarna så att de passar din design.
Horisontell meny i mitten med rullgardinsobjekt
Låt oss nu titta på underposterna i rullgardinsmenyn. Här är situationen något annorlunda och något mer komplicerad, eftersom i det första fallet kommer inte våra underobjekt att visas, eftersom vi har specificerat egenskapen "overflow: hidden" till "mainmenu"-blocket. Det betyder att element utanför detta block inte kommer att visas. Men det finns en väg ut.
Så jag modifierade den tidigare koden och tog bort egenskapen "overflow:hidden" från den.
HTML-kod
CSS-kod
*, *::efter, *::före ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box- dimensionering: border-box; box-sizing: border-box: 0 ) #huvudmeny (position: relativ; bakgrund: #444444; höjd: 40px; utfyllnad: vänster; bredd: 100%; z-; index: 10 ) #mainmenu ul ( rensa: vänster; position: relativ; höger: 50%; höjd: 40px; flytande: höger; textjustering: center; teckensnitt: 15px Arial, Helvetica , sans-serif; liststil: ingen; marginal: 0 ) /** Huvudpunkter **/ #mainmenu > ul > li (position: relativ; vänster: 50%; flytande: vänster; höjd: 40px; utfyllnad: 0; marginal: 0 ) #huvudmeny > ul > li > a ( kant-vänster: 1px fast #666; display: block; färg: #fff; textdekoration: ingen; utfyllnad: 0 20px; linjehöjd: 40px; ) #mainmenu > ul > li:first- barn > a ( kantlinje: ingen ) #mainmenu > ul > li:hover > a, #mainmenu > ul > li.hover > a, #mainmenu > ul > li aktiv > a (färg: #fff ) #huvudmeny > ul > li:hover, #mainmenu > ul > li.hover, #mainmenu > ul > li.active ( bakgrund: #666 ) /* Dropdown-underposter */ #mainmenu ul li ul (position: absolut; vänster: 0; topp: 40px; display: ingen; list-stil: ingen; synlighet: dold; stoppning: 0; marginal: 0; bredd: 200px ) #mainmenu > ul > li ul li (bakgrundsfärg: #666; position: relativ; vänster: 0; display: list-item; flytande: ingen; höjd: auto; marginal: 0; text-align: vänster; ) #mainmenu ul li ul li a (kant-bottom: 1px solid #999; display: block; color: #fff; padding: 10px 15px; text-decoration: none; ) #mainmenu ul li ul li.parent a ( position: relativ; ) #mainmenu ul li ul > li.parent > a::before ( border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; display: block; position: absolut höger: 15px; transform: translateY(-50%) rotate(45deg: 6px) ) /* rullgardinsobjekt på andra nivån */ #mainmenu ul li:hover > ul ( opacitet: 1; synlighet : synlig; marginal: 0; ) #mainmenu ul li ul li ul ( överst: 0; vänster: 200px; marginal: 0 0 0 20px bredd: 180px )Nu är vår meny placerad i mitten och underpunkter visas när du håller muspekaren över den.
Centrering av menyer med flexbox
Centrera menyn Du kan också tillämpa en ny regel i css - flexbox. I allmänhet vill jag ägna ett separat inlägg till tricks med flexbox, det är värt det, det förenklar livet för en layoutdesigner avsevärt. I allmänhet kommer vi inte att gå djupare här... Jag kommer bara att tillhandahålla css-koden för menyn med rullgardinsobjekt här. HTML-koden är densamma som ovan.
CSS-kod
*, *::efter, *::före ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box- dimensionering: border-box; box-sizing: border-box: 0 ) #huvudmeny (position: relativ; bakgrund: #444444; höjd: 40px; marginal: 0; bredd: 100%; z; -index: 10 ) #mainmenu ul ( display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horisontell; -webkit- box-direction: normal; center; ** Huvudpunkter **/ #mainmenu > ul > li (position: relativ; höjd: 40px; utfyllnad: 0; marginal: 0 ) #mainmenu > ul > li > a (kant-vänster: 1px solid #666; display: block color: #fff text-decoration: none; stoppning: 0 20px; linjehöjd: 40px; ) #mainmenu > ul > li:first-child > a ( kantlinje: ingen ) #mainmenu > ul > li:hover > a, #mainmenu > ul > li.hover > a, #mainmenu > ul > li.active > a ( färg: #fff ) #mainmenu > ul > li:hover, #mainmenu > ul > li.hover, #mainmenu > ul > li.active (bakgrund: #666 ) /* Dropdown-underpunkter */ #mainmenu ul li ul ( position: absolut vänster: 0; display: ingen; synlighet: marginal: 0; : #666; position: vänster: 0; flytande: ingen; textjustering: vänster; fast #999; färg: #fff; utfyllnad: 10px 15px; text-dekoration: ingen a::före (kant-top: 1px solid #fff; border-right: 1px solid #fff; innehåll: ""; display: block; position: absolut; höger: 15px; ; top: 50% transform: translateY(- 50%) rotate(45deg); höjd: 6px; bredd: 6px; ) #mainmenu ul li ul li:hover, #mainmenu ul li ul li.hover ( bakgrundsfärg: #444 ) #mainmenu ul li:hover ul, #mainmenu ul li.hover ul ( display: block ) /* Drop- ner objekt andra nivån */ #mainmenu ul li:hover > ul ( opacitet: 1; synlighet: synlig; marginal: 0; ) #mainmenu ul li ul li ul ( överst: 0; vänster: 200px; marginal: 0 0 0 20px ; bredd : 180 px )Som du kan se har reglerna ändrats endast för föräldralistan - #mainmenu ul. Det enda var att vi var tvungna att lägga till prefix för tidigare versioner av webbläsare. Jag noterar att endast moderna webbläsare förstår flexbox-regeln korrekt. Om du riktar in dig på äldre webbläsare måste flexalternativet skjutas upp. Du kan se vilka webbläsare som förstår flexbox väl
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 meny
Nedan 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ärkning
Alla menyer som visas i denna handledning har en enkel struktur. Detta är en vanlig oordnad lista med länkar placerade i ett element div.
Centrerad meny CSS-kod
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 bredd som är tillgänglig för den.
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 meny
Lå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.
Flytta positionen för en oordnad lista
Sedan kompenserar vi elementet ul till höger med 50 % med positionen: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 anteckningar
Nä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.
Slutsats
Den föreslagna lösningen är kompatibel med alla webbläsare, använder inte JavaScript och stöder storleksändringsbar text.
Uppgift
Skapa en rullgardinsmeny med CSS- och HTML-verktyg.
Lösning
Låt oss först skapa en lista, placera den horisontellt och utforma dess utseende. Detta kommer att vara huvudmenyn, och sedan kommer vi att skapa en rullgardinsmeny för dess objekt.
Rullgardinsmenyn
Vi slutade med en lista så här:
Figur 1. Förarbete.
Observera: stilen på länken ändras när du håller muspekaren över den. Detta implementeras med hjälp av pseudoklassen :hover. Denna pseudoklass anger stilen för ett element när markören förs över det utan att musknappen trycks ned. Om det finns en knapptryckning är detta en annan pseudoklass.
Låt oss nu gå vidare till att lösa vårt problem. Låt oss skapa en rullgardinsmeny för objektet "Tjänster", lägg till rullgardinssektioner: "Köp", "Sälj", "Byt". Dessa objekt är en separat lista som är kapslad i en tagg
-
Låt oss skapa den här listan och lägga till stilar som beskriver dess utseende.
Rullgardinsmenyn
Nu har vi den här listan:
Figur 2. Förarbete. Det är naturligtvis inte vad vi behöver. Som standard ska den här listan vara dold och endast bli synlig när du håller muspekaren över. Du kan dölja ett element med hjälp av regelregeln (visa : ingen ). Och när du håller muspekaren över markören måste du aktivera den genom att göra reglerna synliga igen (display: inline-block).
Rullgardinsmenyn
Nu tonar vår meny in och ut, men vi behöver den ska visas ovanpå befintliga element utan att ändra de redan inställda gränserna för befintliga block.
För att ett element ska visas utan att det påverkar visningen av andra element måste det placeras med värdet absolut .
Rullgardinsmenyn
Vad vi gjorde här:
- positioneringsregel (position : relativ ;). Detta görs så att rapporteringen av de absoluta positioneringskoordinaterna för den kapslade listan börjar från det övre vänstra hörnet av det blocket, och inte från hörnet på skärmen.
- Lades till i överordnat element
- regel (höjd: 20px ;). Vi ställer in dess höjd för att göra det bekvämare att placera rullgardinsmenyn.
- Ställ in den absoluta positioneringen (position : absolut ;) i rullgardinsmenyn och ställ in koordinaterna: topp och vänster .
Rullgardinsmenyn fungerar nu korrekt.
Figur 3. Slutversion. Naturligtvis kan du här få rullgardinsmenyn att se vackrare ut, men för vår uppgift räcker detta.
Utbildningsproblemet är löst. Hejdå.
- - en del av listan. För tydlighetens skull, låt oss skriva koden för en enkel meny:
