Taak

Maak een horizontaal menu, waarvan de items een willekeurige helling hebben (Fig. 1).

Rijst. 1. Menuweergave met schuine items

Oplossing

De eigenschap transform style is verantwoordelijk voor het transformeren van het element; de skewX-functie wordt gebruikt als waarde, die de gewenste helling instelt. Het is gemakkelijker om de kantelhoek in graden in te stellen, 30 graden is bijvoorbeeld 30 graden ten opzichte van de verticaal. De transformatie heeft ook invloed op alle onderliggende elementen, dus de tekst in het element wordt ook gekanteld, wat niet het beste effect heeft op de leesbaarheid en schoonheid ervan. Daarom is het belangrijk om de kanteling opnieuw op de tekst toe te passen, maar in de andere richting wijzigt u eenvoudigweg het teken vóór de waarde van graden.

Browsers ondersteunen de eigenschap transform voornamelijk met hun eigen voorvoegsels, dus voor universaliteit in stijlen moet u deze meerdere keren herhalen met dezelfde waarde, door -moz- toe te voegen voor Firefox, -webkit- voor Safari en Chrome, -o- voor Opera en -ms - voor de Internet Explorer-browser zoals weergegeven in voorbeeld 1.

Voorbeeld 1: Menu-item kantelen

HTML5 CSS3 IE Cr Op Sa Fx

Menu li ( weergave: inline-block; /* Inline-block-elementen */ achtergrond: #CA181A; /* Achtergrondkleur */ margin-right: 3px; /* Afstand tussen menu-items */ -webkit-transform: skewX(- 30deg); /* Voor Safari en Chrome */ -moz-transform: skewX(-30deg); skewX(-30deg); /* Voor IE */ transformeren: skewX(-30deg); /* CSS3 */ ) a ( kleur: #fff; /* Linkkleur */ weergave: blok; /* Blokelement */ opvulling : 5px 15px; /* Marges rond tekst */ tekstdecoratie: geen; /* Onderstreping verwijderen */ -webkit-transform: skewX(30deg); ; /* Voor Firefox */ -o-transform: skewX(30deg); /* Voor Opera */ -ms-transform: skewX(30deg); hover ( achtergrond: #333; /* Achtergrondkleur bij zweven */ )

• grappenmaker
• Pazuzu
• Palpatijn
• Dokter Doom

In dit voorbeeld wordt een horizontaal menu gemaakt met behulp van een lijst met opsommingstekens. Om ervoor te zorgen dat de lijst horizontaal is, wordt een display-eigenschap met de waarde inline-block toegevoegd aan het li-element in de stijlen. Gebruik voor de scheefheid de eigenschap transform met de functie skewX en de waarde -30º. Deze eigenschap wordt ook toegepast op links binnen de lijst, maar met een positieve waarde van 30º zorgt dit ervoor dat de letters correct worden weergegeven in plaats van schuin.

Chrome-, Safari- en Firefox-browsers gebruiken de eigenschap transform voor blok- of inline-elementen, dus de weergave-eigenschap van links is ingesteld op block .

Groeten! Als u een beginnende lay-outontwerper bent, wordt u vroeg of laat geconfronteerd met het feit dat u uw pagina's op de een of andere manier wilt verlevendigen, ze op zijn minst een beetje interactief wilt maken. CSS-animaties kunnen u hier op de best mogelijke manier helpen. Maar je moet weten waar en hoe je ze moet gebruiken.

Vandaag laat ik je zien hoe je een vervolgkeuzemenu kunt maken met pure CSS en hoe je er vloeiendheid aan kunt toevoegen met behulp van CSS-animatie. Als je het niet weet, is het tijd om vertrouwd te raken met de basisprincipes.

Layoutmenu HTML + CSS

Laten we eerst een eenvoudig menu met één niveau maken, zodat we iets hebben om mee te werken. Laten we ons niet te veel druk maken over het ontwerp; voor de duidelijkheid is dit voldoende:

Wat hebben we? De meest gewone ongenummerde lijst met de identificatie “top_menu” en met links verpakt in elementen van deze lijst. Alles is banaal en eenvoudig. Menu-items veranderen van kleur als er overheen wordt bewogen... jullie weten dit allemaal al en begrijpen hoe je het moet doen (hoop ik).

Een menu op het tweede niveau toevoegen

Om een ​​menu met meerdere niveaus te maken, moeten we een tweede ongenummerde lijst toevoegen aan de eerste. Ik denk dat je dit ergens in de eerste lessen hebt meegemaakt. En ook het feit dat het niet alleen in onze lijst moet worden ingevoegd, maar ook in het lijstelement, dat wil zeggen de “li”-tag, onmiddellijk na de afsluitende “a”-tag.

We positioneren geneste lijsten absoluut in relatie tot de “li” waarin ze zijn genest. En we positioneren alle “li” van het hoogste niveau ten opzichte van ( relatief). Om ervoor te zorgen dat het vervolgkeuzemenu ONMIDDELLIJK na ons hoofdmenu wordt geplaatst, is het (het vervolgkeuzemenu – “ innerlijke_menu" moet worden opgegeven

Positie: absoluut; bovenkant: 100%;

Dat wil zeggen dat de afstand vanaf de bovenrand van de ouder gelijk zal zijn aan de hoogte van de ouder. Heel logisch, naar mijn mening.

Naast de positionering moet u het vervolgkeuzemenu opmaken als een menu op het hoogste niveau. Een appel uit een appelboom, zoals ze zeggen...

Zoals u kunt zien, lijkt ons vervolgkeuzemenu nog geen vervolgkeuzelijst, maar is het eruit gevallen en blijft het hangen. Maar het is oké, we zullen dat snel oplossen.

Hoe u een vervolgkeuzemenu echt kunt maken

Niets is eenvoudiger! Om van onze geneste lijst een vervolgkeuzemenu te maken, hoeft u deze alleen maar te verbergen! En dan alleen openen wanneer de muiscursor over het menu-item op het hoogste niveau beweegt, dat een vervolgkeuzemenu bevat. Het klinkt misschien een beetje ingewikkeld, maar in feite kan het met slechts een paar regels code worden opgelost.

Voeg toe aan het vervolgkeuzemenu:

Weergave: geen;

En om het weer te geven, moet je schrijven:

#top_menu > li:hover > ul (weergave: blok; )

Wat vertelt deze hele groep selecteurs ons? Wij lezen vanaf het einde. We stellen stijlen (zichtbaarheid) in voor de lijst op het tweede niveau, die zich in het lijstelement op het eerste niveau bevindt, maar deze stijlen werken alleen als we over het element bewegen “li" die onze lijst op het tweede niveau bevat.

Ik hoop dat ik mezelf duidelijk heb gemaakt. Als dit niet het geval is, probeer het dan een paar keer te lezen. Beter nog, begrijp het gewoon door naar de code te kijken. Laten we eens kijken wat we hebben:

Ja, het lijkt erop dat we hebben bereikt wat we wilden: we hebben een vervolgkeuzemenu gemaakt, een echt vervolgkeuzemenu, klootzak! Maar hij mist iets. Weet je wat? Gladheid! Alles ziet er immers uit alsof het menu niet wegvalt, maar gewoon verschijnt. En heel scherp, zelfs onmiddellijk, zou ik zeggen.

Laten we wat meer magie op hem toepassen.

Soepel vervolgkeuzemenu gemakkelijk gemaakt

Laten we dus een soepel vervolgkeuzemenu maken met pure CSS. Waarom dit doen? Omdat mensen ervan houden als alles glad en zacht is... en het er prachtig uitziet. Het zal een pluspunt zijn voor de bruikbaarheid van uw site. Laten we gaan!

Houd er rekening mee dat u alleen exacte wiskundige waarden kunt animeren, zoals 50px en 300px, 0 en 100%, 0,5 en 1,0, enzovoort. In ons geval kunnen we de twee statussen van ons vervolgkeuzemenu niet animeren ( weergave: geen; En weergave:blok;).

Maar we kunnen ze vervangen door transparantie - opacity:0 en opacity:1. En stel de tijd in gedurende welke ons menu transparant verschijnt. Ja, het zal inderdaad werken, maar het is niet helemaal het effect dat je misschien had verwacht. Laten we het dus wat ingewikkelder maken. Maar het is het waard, geloof me.

Om de animatie vloeiender en voorspelbaarder te maken, moesten we een vaste hoogte instellen voor de vervolgkeuzemenu-items, hoewel we dit ook zonder hadden kunnen doen. Er zijn veel methoden, bedenk gewoon combinaties en los problemen op.

Zoals je in de code kunt zien, hebben we de hoogte van de vervolgkeuzelijstelementen en hun transparantie geanimeerd. Dit was genoeg om een ​​mooie, vloeiende animatie van het vervolgkeuzemenu te maken.

Wat hadden we nodig voor animatie? Twee toestanden van onze menu-items, evenals de overgangseigenschap, die deze toestanden interpoleerde, dat wil zeggen, vulden alle tussenliggende waarden in de toegewezen tijdsperiode. Dat is het!

Het zou nog eenvoudiger kunnen zijn om dit met jQuery te doen, maar we gaven eerst aan dat we vandaag met pure CSS zouden werken. Je zou het nog mooier kunnen maken door Bezier-curven aan de animaties toe te voegen, maar dit onderwerp valt een beetje buiten het bestek van vandaag. Maar we komen er later zeker op terug.

Conclusie:

Nu kun je aan je vrienden en familie laten zien dat je weet hoe je een vervolgkeuzemenu in pure CSS kunt maken. Dit is een heel nuttige vaardigheid die meer dan eens van pas zal komen. Oordeel zelf, hoeveel sites heb je gezien met een statisch menu? Nee, de meeste sites hebben een vervolgkeuzemenu.

Dit was trouwens mijn eerste CSS-les. Beschrijf hoe vind je het? Heb je alles duidelijk uitgelegd of moet je het nog gedetailleerder uitleggen? En is het zelfs de moeite waard om artikelen te blijven schrijven over het onderwerp lifehacks in CSS?

Bedankt voor uw aandacht en tot snel!

Heb je tot het einde gelezen?

Was dit artikel nuttig?

Niet echt

Wat vond je precies niet leuk? Was het artikel onvolledig of onjuist?
Schrijf in reacties en we beloven te verbeteren!

De meeste klassieke websites op internet gebruiken een horizontaal menu als belangrijkste navigatie-element. Soms kan het verschillende extra functies bevatten: structuren met meerdere niveaus, pictogrammen voor subitems, een zoekblok, complexe lijsten, enz. Onlangs stond er een kleine selectie op de blog, en vandaag bekijken we 4 praktische voorbeelden van hoe je een vervolgkeuzemenu maakt met CSS + HTML. De informatie zal nuttig zijn voor beginnende ontwikkelaars en voor degenen die de navigatie op hun website willen wijzigen.

De eerste CSS3 Dropdown Menu-tutorial is de nieuwste in de collectie (vanaf april 2016). Voordelen van de oplossing: in dit horizontale vervolgkeuzemenu voor de site bevatten de subitems pictogrammen, de implementatie en de CSS-code zelf zijn vrij eenvoudig te begrijpen en te implementeren.

Stap 1 - HTML-opmaak

De eerste stap is het maken van een ongeordende lijst in HTML met ankerlinks (#) voor de elementen. Daar voegen we in een van de items nog een geneste lijst toe, die verantwoordelijk is voor het submenu.

Mijn dashboard Vind ik leuk Bekeken Documenten Berichten Uitloggen Uploads Video's Documenten

• Mijn dashboard
• Vind ik leuk
• Bekeken
  • Documenten
  • Berichten
  • Uitloggen
• Uploads
• Video's
• Documenten

Stap2 - Geef het menu weer

We verwijderen onnodige streepjes in CSS voor elementen van het horizontale vervolgkeuzemenu van de site. In dezelfde fase stellen we een vaste breedte en hoogte van de menu-items in en voegen we ook afgeronde hoeken toe.

.menu, .menu ul, .menu li, .menu a (marge: 0; opvulling: 0; rand: geen; overzicht: geen; ) .menu (hoogte: 40px; breedte: 505px; achtergrond: #4c4e5a; achtergrond: -webkit-lineair-gradiënt(top , #4c4e5a 0% , #2c2d33 100% ) ; #2c2d33 100% ); achtergrond: -ms-lineair verloop (boven, #4c4e5a 0%, #2c2d33 100%); border-radius: 5px ; -moz-border-radius: 5px ; menu li (positie: relatief; lijststijl: geen; zwevend: links; weergave: blok; hoogte: 40px;

Menu, .menu ul, .menu li, .menu a ( marge: 0; opvulling: 0; rand: geen; overzicht: geen; ) .menu ( hoogte: 40px; breedte: 505px; achtergrond: #4c4e5a; achtergrond: - webkit-lineair-gradiënt(boven, #4c4e5a 0%,#2c2d33 100%); achtergrond: -moz-lineair-gradiënt(boven, #4c4e5a 0%,#2c2d33 100%); 100%); achtergrond: -ms-lineair verloop (boven, #4c4e5a 0%, #2c2d33 100%); achtergrond: lineair verloop (boven, #4c4e5a 0%, #2c2d33 100%); straal: 5px; -moz-border-radius: 5px; .menu li (positie: relatief; lijststijl: geen; zwevend: links; weergave: blok; hoogte: 40px)

Stap3 - linkontwerp

Naast de basisfuncties in stijlen (lettertype, kleur, hoogte), gebruiken en creëren we een vloeiende overgang van tekstkleur tijdens het zweven. We voegen ook scheidingstekens toe aan het menu, waardoor de rand van het eerste element aan de linkerkant en van het laatste aan de rechterkant wordt verwijderd.

.menu li a (weergave: blok; opvulling: 0 14px; marge: 6px 0; lijnhoogte: 28px; tekstdecoratie: geen; rand-links: 1px effen #393942; rand-rechts: 1px effen #4f5058; lettertype -familie: Helvetica, schreefloos; lettertype-gewicht: vet; kleur: #f3f3f3; tekstschaduw: 1px 1px 1px rgba (0, 0, 0, .6) overgang: kleur .2s gemak-in-uit; moz-overgang: kleur .2s gemak-in-uit; -o-overgang: kleur .2s gemak-in-uit; (rand-links: geen; ) .menu li: laatste kind a(rand-rechts: geen; ) .menu li: hover > a (kleur: #8fde62; )

Menu li a (weergave: blok; opvulling: 0 14px; marge: 6px 0; lijnhoogte: 28px; tekstversiering: geen; rand-links: 1px effen #393942; rand-rechts: 1px effen #4f5058; lettertype- familie: Helvetica, schreefloos lettertype: vet; tekstschaduw: 1px 1px 1px rgba(0,0,0,.6); -overgang: kleur .2s gemak-in-uit; -o-overgang: kleur .2s gemak-in-uit; overgang: kleur .2s gemak-in-uit; -links: geen; ) .menu li:laatste kind a(rand-rechts: geen; ) .menu li: hover > a ( kleur: #8fde62; )

Stap 4 - submenu

Omdat we een vervolgkeuzemenu voor de site hebben dat gebruikmaakt van CSS, moeten we ook het ontwerp voor de geneste lijst instellen. Stel eerst een marge van 40px bovenaan en 0px aan de linkerkant in + voeg afgeronde hoeken toe. Om het submenu te tonen/verbergen, stelt u eerst de eigenschap Opacity in op nul, en wanneer u de muisaanwijzer op één plaatst. Om het effect van het verschijnen van een submenu te creëren, stelt u de waarde van de lijsthoogte in op nul en met hover = 36px.

.menu ul (positie: absoluut; boven: 40px; links: 0; dekking: 0; achtergrond: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; rand -radius: 0 0 5px 5px ; dekking .25s gemak .1s ; moz-overgang: dekking .25s gemak .1s ; overgang: dekking .25s gemak .1s ) .menu li: hover > ul ( dekking : 1 ; ) .menu ul li ( hoogte : 0 ; overflow : verborgen ; opvulling : 0 ; -webkit-overgang : hoogte .25s gemak . 1s ; -moz-overgang: hoogte .25s gemak .1s ; -ms-overgang: hoogte .25s gemak .1s ) .menu li: hover > ul li (hoogte: 36px; overloop: zichtbaar; opvulling: 0 ;)

Menu ul ( positie: absoluut; boven: 40px; links: 0; dekking: 0; achtergrond: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border- straal: 0 0 5px 5px; dekking .25s gemak .1s; moz-overgang: dekking .25s gemak .1s; hover > ul ( dekking: 1; ) .menu ul li ( hoogte: 0; overflow: verborgen; opvulling: 0; -webkit-overgang: hoogte .25s gemak .1s; -moz-overgang: hoogte .25s gemak .1s; -ms-overgang: hoogte .25s gemak .1s; 1s ) .menu li:hover > ul li ( hoogte: 36px; overloop: zichtbaar; opvulling: 0; )

We stellen de breedte van de links in op 100px, er wordt een rand-onderrand toegevoegd aan de onderkant van alle elementen behalve de laatste. Ook kunt u, als u dat wenst, afbeeldingen plaatsen voor de submenu-items (let op! vergeet niet de paden naar de afbeeldingen in de code te wijzigen naar degene die u gebruikt).

.menu ul li a (breedte: 100px; opvulling: 4px 0 4px 40px; marge: 0; rand: geen; rand-onder: 1px effen #353539; ) .menu ul li: laatste kind a (rand: geen;) .menu a.documents (achtergrond: url (../img/docs.png) niet-herhaling 6px midden; ) .menu a.messages (achtergrond: url (../img/bubble.png) niet-herhaling 6px midden ) .menu a.signout (achtergrond: url (../img/arrow.png ) niet-herhaling 6px midden; )

Menu ul li a ( breedte: 100px; opvulling: 4px 0 4px 40px; marge: 0; rand: geen; rand-onder: 1px effen #353539; ) .menu ul li:last-child a (rand: geen; ) . menu a.documents (achtergrond: url(../img/docs.png) niet-herhaling 6px midden; ) .menu a.messages ( achtergrond: url(../img/bubble.png) niet-herhaling 6px midden; ) .menu a.signout (achtergrond: url(../img/arrow.png) niet-herhaling 6px midden; )

Persoonlijk houd ik van het implementatiegemak en het gebruik van iconen. Hier is de definitieve code van codepen:

De optie van Josh Riser is visueel vergelijkbaar met het vorige HTML- en CSS-vervolgkeuzemenu. De code heeft geen onderliggende selector ">" (handig bij ontwerpen met meerdere niveaus), maar de auteur maakt goed gebruik van CSS3-effecten (overgang, box-shadow en tekst-shadow) voor een mooier resultaat. De link in de bron beschrijft niet het proces van het maken van een horizontaal vervolgkeuzemenu, dus ik zal onmiddellijk de definitieve code verstrekken:

In dit voorbeeld bekijken we hoe je met CSS een vervolgkeuzemenu kunt maken, dat naast de items ook een zoekblok bevat. Een soortgelijke implementatie is vaak te vinden in moderne . In termen van implementatietijd en complexiteit is de oplossing iets ingewikkelder dan de vorige. Het werd in mei 2013 gepubliceerd, dus het kan zijn dat je wat dingen moet aanpassen, hoewel het tijdens onze tests prima werkte.

HTML-code

Voor navigatie wordt, zoals altijd, een ongeordende lijst (met de nav-klasse) gebruikt. Normale menu-items zijn lijstitems (li) en bevatten links (a href) zonder klassen of ID's. De uitzondering vormen drie gespecialiseerde elementen van dit horizontale vervolgkeuzemenu met de volgende ID's:

• instellingen — link afbeelding;
• zoeken — een blok met een zoekopdracht en een bijbehorende knop;
• opties - bevat een submenu (geïmplementeerd via een lijst met de subnav-klasse).

Ook in de code ziet u een prefixvrij script voor het gebruik van CSS-eigenschappen zonder voorvoegsels. De uiteindelijke HTML voor het vervolgkeuzemenu ziet er als volgt uit:

Sollicitatie Bord Opties Instellingen Sollicitatie Bord Opties

• 
• Sollicitatie
• Bord
• Opties
  • Instellingen
  • Sollicitatie
  • Bord
  • Opties

Menu-CSS

1. Basisstijlen en menu-elementen

Eerst specificeren we het Montserrat-lettertype, een donkergrijze achtergrond en een vaste hoogte voor de menu-items. Alle elementen hebben float: linkeruitlijning en relatieve positionering, zodat u later een submenu kunt toevoegen met position: absoluut;

@import-URL (http: //fonts.googleapis.com/css?family= Montserrat) ;

@import-URL(http://fonts.googleapis.com/css?family=Montserrat); * ( marge: 0; opvulling: 0; ) .nav (achtergrond: #232323; hoogte: 60px; weergave: inline-block; ) .nav li ( float: links; lijststijltype: geen; positie: relatief; )

2. Koppelingen opmaken

Menu-items gebruiken het basisontwerp + . De hoogte is hetzelfde als in de nav-klasse. Voor #settings de afbeeldingslink aan het begin van het menu, de uitlijning is ingesteld.

.nav li a ( lettergrootte: 16px; kleur: wit; weergave: blok; lijnhoogte: 60px; opvulling: 0 26px; tekstdecoratie: geen; rand links: 1px effen #2e2e2e; lettertypefamilie: Montserrat , schreefloos; tekstschaduw: 0 0 1px rgba (255, 255, 255, 0.5) ; nav li a: hover (achtergrondkleur: #2e2e2e;) #settings a (opvulling: 18px; hoogte: 24px; lettergrootte: 10px; lijnhoogte: 24px;

Nav li a ( lettergrootte: 16px; kleur: wit; weergave: blok; lijnhoogte: 60px; opvulling: 0 26px; tekstversiering: geen; rand links: 1px effen #2e2e2e; lettertypefamilie: Montserrat, schreefloos; tekstschaduw: 0 0 1px rgba(255, 255, 255, 0.5); .nav li a:hover ( achtergrondkleur: #2e2e2e; ) #settings a (opvulling: 18px; hoogte: 24px; lettertype -grootte: 10px; lijnhoogte: 24px)

3. Zoekblok

Dit element heeft een vaste breedte en bestaat uit verschillende delen: een invoerveld (#search_text) met een groene achtergrond en een zoekknop (#search_button). In sommige browsers kan de achtergrondkleur grijs zijn.

#search (breedte: 357px; marge: 4px;) #search_text (breedte: 297px; opvulling: 15px 0 15px 20px; lettergrootte: 16px; lettertypefamilie: Montserrat, schreefloos; rand: 0 geen; hoogte: 52px ; marge-rechts: 0; kleur: wit; achtergrond: #1f7f5c; zwevend: border-box: alles:: -webkit-input-placeholder ( /* WebKit-browsers */ kleur: wit;) : -moz- placeholder ( /* Mozilla Firefox 4 tot 18 */ kleur: wit ; ) :: -moz-placeholder ( /* Mozilla Firefox 19+ */ kleur: wit ; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ kleur: wit;) #search_text: focus (achtergrond: rgb (64, 151, 119);) #search_button (rand: 0 geen; achtergrond: #1f7f5c url (search.png) midden niet herhaald; zwevend: links ; tekst uitlijnen: centreren; cursor: aanwijzer;

#search ( breedte: 357px; marge: 4px; ) #search_text( breedte: 297px; opvulling: 15px 0 15px 20px; lettergrootte: 16px; lettertypefamilie: Montserrat, schreefloos; rand: 0 geen; hoogte: 52px ; marge-rechts: 0; omtrek: geen; zwevend: links; randvak: alles ) ::-webkit-input-placeholder ( /* WebKit-browsers */ kleur: wit; ) :-moz-placeholder ( /* Mozilla Firefox 4 tot 18 */ kleur: wit; ) ::-moz-placeholder ( /* Mozilla Firefox 19+ */ kleur: wit; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ kleur: wit ) #search_text:focus ( achtergrond: rgb(64, 151, 119); ) #search_button (rand: 0 geen; achtergrond: #1f7f5c url (search.png) gecentreerd niet herhaald; zwevend: links; tekst uitlijnen: 52px;

4. Vervolgkeuzemenu

Met de laatste hand kunnen we een vervolgkeuzemenu in CSS maken dat wordt geactiveerd voor het laatste #options-item.

#options a( border-left : 0 geen ; ) #options > a ( achtergrondafbeelding : url (triangle.png ) ; achtergrondpositie : 85% midden ; achtergrondherhaling : geen herhaling ; opvulling rechts : 42px ; ) .subnav ( zichtbaarheid : verborgen ; positie : absoluut ; boven : 110% ; rechts : 0 ; breedte : 200px ; hoogte : automatisch ; dekking : 0 ; overgang : alles 0,1s ; achtergrond : #232323 ; ) .subnav li ( float : geen ) .subnav li a ( border-bottom : 1px solid #2e2e2e ; ) #options : hover .subnav ( zichtbaarheid : zichtbaar ; top : 100% ; dekking : 1 ; )

#options a( border-left: 0 geen; ) #options>a ( achtergrondafbeelding: url(triangle.png); achtergrondpositie: 85% midden; achtergrondherhaling: geen herhaling; opvulling rechts: 42px; ) .subnav ( zichtbaarheid: verborgen; positie: absoluut; boven: 110%; rechts: 0; breedte: 200px; hoogte: automatisch; dekking: 0; overgang: alles 0,1s; achtergrond: #232323; ) .subnav li ( zwevend : geen; ) .subnav li a (rand-onder: 1px effen #2e2e2e; ) #options:hover .subnav ( zichtbaarheid: zichtbaar; boven: 100%; dekking: 1; )

In de stijlen vindt u de invoeging van een driehoekige achtergrondafbeelding (triangle.png) om het submenu aan te geven - vergeet niet het juiste pad aan te geven voor deze en andere afbeeldingen in het voorbeeld. Het uiterlijk van een submenu wordt geïmplementeerd met behulp van de eigenschap Opacity. Eindoplossing op codepen:

Deze optie maakt voornamelijk gebruik van CSS2.1-technieken, de oplossing is nieuw, plus of min - voor maart 2015. Als je één subniveau mist in een horizontaal vervolgkeuzemenu voor een site, dan bevat dit voorbeeld er drie tegelijk. Met behulp van de pseudo-class:only-child wordt een “+” symbool toegevoegd aan items om de aanwezigheid van een submenu aan te geven.

Kortom, een goed en eenvoudig voorbeeld. We zullen het implementatieproces niet in detail beschrijven, omdat... het is vergelijkbaar met de vorige: eerst maak je een HTML-framework en voeg je er geleidelijk stijlen aan toe. Download de definitieve code via de link naar de bron; je kunt deze gedeeltelijk bekijken in Codepen:

Totaal

Hierboven hebben we gekeken naar 4 opties voor het maken van een vervolgkeuzemenu met CSS + HTML, hoewel er nog veel meer vergelijkbare voorbeelden op internet te vinden zijn. Er zijn oplossingen met jQuery, maar dit is hoogstwaarschijnlijk alleen nuttig voor het implementeren van enkele speciale effecten en niet-standaardtaken. In de meeste gevallen zal een combinatie van CSS + HTML voldoende zijn, vooral omdat de belangrijkste vereisten voor een menu nu gemak en hoge laadsnelheid zijn.

Tenslotte nog twee opmerkingen over de bovenstaande codes. Sommige voorbeelden gebruiken afbeeldingen in de CSS voor het vervolgkeuzemenu, dus u moet de afbeeldingspaden zorgvuldig controleren en de juiste waarden voor uw site opgeven. Ten tweede zijn sommige oplossingen 2-3 jaar oud, dus u moet hun prestaties in verschillende browsers nogmaals controleren.

Als u andere interessante moderne implementaties van horizontale vervolgkeuzemenu's voor een website kent, stuur dan links in de reacties.

Hallo, lieve lezers van mijn blog! Het artikel van vandaag zal erg handig zijn voor beginnende lay-outontwerpers. Omdat we vandaag een eenvoudig horizontaal menu gaan maken. Voordat we direct naar de lay-out gaan, wil ik een paar woorden zeggen over waarom ik besloot dit specifieke onderwerp voor het artikel te kiezen.

In feite is alles vrij eenvoudig: toen ik nadacht over het onderwerp van de volgende les voor de site, begon ik mijn ervaring met het bestuderen van de lay-out te herinneren en te analyseren, waar ik mee te maken kreeg in de beginfase van het vestigen van mezelf als een lay-outontwerper, wat voor mij het meest onbegrijpelijk was bij het bestuderen van dit gebied etc. Ik heb mezelf al deze vragen gesteld om beter te begrijpen wat interessant kan zijn voor iemand die zijn carrière als lay-outontwerper begint. En persoonlijk ontstonden, zodra ik de lay-out begon te bestuderen, de meeste vragen over de lay-out van verschillende menu's, vooral als het gaat om menu's met meerdere niveaus. En dus zullen we het vandaag hebben over het menu, en meer specifiek over het horizontale menu. Dus laten we beginnen!

Laten we beginnen met het opstellen van ons horizontale menu!

Zoals je waarschijnlijk al geraden hebt, is het eerste wat we moeten doen een HTML-pagina maken met standaard opmaak en er een stijlbestand aan koppelen. Ik zal niet in detail op deze stap ingaan, omdat ik nog steeds hoop dat je niet zo'n beginner bent die je in detail vertelt wat lichaam en hoofd zijn en hoe stijlen met elkaar verbonden zijn. Laat me zeggen dat ik, naast de stijlen voor ons menu, de eenvoudigste reset in het CSS-bestand zal schrijven om de stijlen opnieuw in te stellen en dezelfde weergave van inspringingen in alle browsers te bereiken. Dit is eigenlijk hoe mijn eenvoudigste reset eruit ziet:

We zullen nog niets in detail zeggen over het opnieuw instellen van stijlen, aangezien dit in wezen een onderwerp is voor een ander artikel. Het enige dat u moet weten over de hierboven beschreven code is dat dankzij deze code alle pagina-elementen die we zullen schrijven dat wel zullen doen de marge en inspringingen opnieuw instellen op nul. Dit moet worden gedaan zodat onze pagina er in alle browsers hetzelfde uitziet.

Dus wat hebben we in dit stadium? We hebben een HTML-pagina met standaard opmaak:

Horizontaal menu

En we hebben een stijlbestand aan deze pagina gekoppeld (voor mij is het style.css), met de volgende inhoud:

De volgende stap is het maken van HTML-opmaak voor ons menu.

Markering voor het menu maken

In onze opmaak zullen we de nieuwe tag gebruiken die in HTML5 verscheen, ik heb besloten je meteen aan de nieuwe tags te laten wennen om zo de trend en standaard te volgen. Ondanks het feit dat de nieuwe HTML 5-tags niet worden ondersteund oudere browsers raad ik u ten zeerste aan om ze in uw lay-out te gebruiken, aangezien u vroeg of laat nog steeds naar deze browsers zult moeten overschakelen, net zoals lay-outontwerpers ooit zijn overgestapt van tabellarische lay-out naar bloklay-out. Dit is de realiteit, het is beter om te volgen de trend!

En aangezien we het al hebben over het ondersteunen van nieuwe html 5-tags, zodat we hier in oudere browsers geen problemen mee hebben, moeten we een speciale bibliotheek in ons document opnemen: html5shiv. Dit wordt gedaan door in te voegen
het hoofdgedeelte van uw pagina met de volgende code:

Alle tags hierna (en andere tags gerelateerd aan HTML5) worden normaal waargenomen door oudere browsers.

Laten we direct terugkeren naar onze opmaak. Vervolgens moeten we een lijst met opsommingstekens in onze tag invoegen. Voor mij ziet het er zo uit:

• Thuis
• Over ons
• Portefeuille
• Bloggen
• Contacten

Het lijkt erop dat we klaar zijn met de opmaak, het is tijd om stijlen te gaan schrijven, aangezien ons menu er nu op zijn zachtst gezegd niet zo goed uitziet:

Schrijfstijlen voor ons horizontale menu

En dus is het eerste wat we moeten doen bij het opmaken van het menu het verwijderen van de lijstmarkeringen. We hebben ze uiteraard niet nodig, we doen het als volgt:

Ul( lijststijl:geen; )

Hierna ziet ons menu er als volgt uit:

Ik vind het niet zo leuk dat ons menu aan de randen van de browser vastzit, laten we dat oplossen:

Met deze code hebben we de breedte van ons menu ingesteld, een boven- en ondermarge van 50 px gegeven en het in het midden geplaatst. Wie weet, als een blokelement een breedte heeft, hoeven we, om dit element strikt in het midden te positioneren, er rechts en links een externe marge (marge) aan te geven met de waarde auto.

De volgende stap is om ons menu eindelijk horizontaal te maken; dit gebeurt door de elementen in te stellen

zweven: links

Menu li( zweven:links; )

Onze hele menukaart is nu horizontaal geworden.

Als u niet begrijpt wat er precies is gebeurd en wat de float-eigenschap doet, raad ik u aan informatie over deze woning te googlen en deze grondig te bestuderen, aangezien
Geen enkele lay-outpagina kan zonder, dat kan ik je met zekerheid vertellen. Nou, oké, laten we doorgaan!

Menu li a( display:block;/* Maak van de link een blokelement*/ opvulling:12px 20px;/* Stel de opvulling in */ tekstversiering: geen; /* verwijder de onderstreping */ kleur:#fff;/* stel de kleurlinks wit in */ achtergrond:#444;/* maak de achtergrondkleur donker */ font:14px Verdana, sans-serif;/* stel de lettergrootte en naam in */ )

Een van de belangrijkste regels hier is display:block;. Feit is dat links standaard inline-elementen zijn en dat inspringingen in verschillende browsers anders worden toegepast op inline-elementen. Het is dus raadzaam om van de link een blokelement te maken en er pas dan de eigenschappen op toe te passen die zijn gekoppeld aan externe of interne inspringingen. Nu wil ik u in de loop van de tijd niet belasten met onnodige informatie; aan de hand van echte voorbeelden zult u begrijpen waarom hier zo’n nadruk wordt gelegd.

Laten we eens kijken wat we hebben, vernieuw de browserpagina en daar ga je!:

Zoals je ziet ziet het er niet slecht uit, we kunnen wel zeggen dat ons menu in principe klaar is. Het enige dat nog moet gebeuren is het licht van de links instellen tijdens het zweven, en het lijkt mij dat het menu er beter uit zal zien met scheidingstekens tussen de items.

Laten we beginnen met de scheidingstekens:

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

Wat hebben we hier gedaan? Ja, alles is heel eenvoudig, we stellen onze punten op (

) rand aan de linkerkant met een grootte van 1px en kleur #666;. Wat de .menu li:first-child selector betreft, gebruiken we hier een speciale pseudo-klasse waarmee we het eerste onderliggende element van de lijst kunnen selecteren. Ik raad ook aan om meer in detail over pseudo-klassen op internet te lezen, je zult veel nuttige dingen leren.

Laten we eens kijken wat we weer hebben:

Naar mijn mening is het veel beter met scheidingstekens.

Menu li a:hover( achtergrond:#888; )

Opnieuw met behulp van een speciale pseudo-klasse, deze keer met hover, stellen we de kleur van de link in als we erover zweven, kijk:

Ik vind het cool :) Ik hoop dat je hetzelfde menu krijgt als het mijne.

Dit is waar ik deze les zal beëindigen. Ik hoop echt dat het nuttig voor je was en dat je nu weet hoe je een eenvoudig horizontaal menu kunt opmaken met pure HTML en CSS. Natuurlijk hebben we een menu met één niveau gemaakt; het zal iets ingewikkelder zijn met een menu met twee niveaus (met een geneste lijst), maar dit is een onderwerp voor een andere les, dat is alles voor mij. Kom nog eens, ik zal blij zijn!!!

Ik wilde al lang een artikel schrijven over hoe je een submenu kunt maken met behulp van CSS. Veel mensen doen het in JQuery en het lukt best goed, maar ik zal hier het hele basisprincipe van het maken van een submenu in CSS schetsen. En dan kunt u, uitgaande van deze basis, het submenu verder verbeteren.

Hier is meteen de CSS-code:

* html ulli (
zweven: links;
}
* html ulli a (
hoogte: 1%;
}
ul (
rand-onder: 1px effen #000;
lijststijl: geen;
marge: 0;
opvulling: 0;
breedte: 100px;
}
ulli (
positie: relatief;
}
ulli een (
weergave: blok;
rand: 1px effen #000;
rand-onder: 1px;
opvulling: 5px;
tekstversiering: geen;
}
li ul (
weergave: geen;
links: 99px;
positie: absoluut;
bovenaan: 0;
}
li: hover ul (
weergave: blok;
}

Het belangrijkste hier is de "li:hover ul"-selector. In feite toont het de inhoud van het menu. Standaard is dit "display: none", en als u over een menu-item beweegt, wordt het submenu: "display: block", dat wil zeggen zichtbaar. Dit is het allerbelangrijkste. Bovendien zit er in de eerste twee selectors (die met * ) een CSS-hack voor IE, anders werkt er zonder deze hack niets in deze browser. Al het andere is uiterlijk, dat uiteraard kan worden gewijzigd.

Hier is de HTML-code:

• 
  Thuis


• 
  Menu 1
  
  
  
  • 
    Submenu 1
    
  
  
  • 
    Submenu 2
    
  
  
  • 
    Submenu 3
    
  
  
  
  


• 
  Menu 2
  
  
  
  • 
    Submenu4
    
  
  
  • 
    Submenu 5
    
  
  
  • 
    Submenu 6
    
  
  
  • 
    Submenu7
    
  
  
  • 
    Submenu 8
    
  
  
  
  

Als je goed over deze structuur nadenkt, wordt alles heel duidelijk. De ul-tag creëert een menu. Als de ul zich in een andere ul bevindt, is het al een submenu. En de li-tag is verantwoordelijk voor een specifiek menu-item.

Natuurlijk is het menu het eenvoudigst, zowel qua logica en structuur als qua ontwerp. Natuurlijk kunt u een soepele onthulling uitvoeren met JQuery. Je kunt ook het ontwerp wijzigen, maar het hele principe blijft hetzelfde als in dit submenu geschreven in CSS en HTML.