Laten we ons idee implementeren met behulp van de meest voorkomende CSS. In het volgende artikel zal ik, als ik het me herinner, hetzelfde effect beschrijven met behulp van jQuery. Maar laten we nu beginnen met het analyseren van deze methode. Maar eerst stel ik voor om te kijken naar wat er uiteindelijk gebeurt:
Laten we eerst de HTML-code voor ons menu schrijven. Het menu zal eenvoudig zijn. Het heeft bijvoorbeeld twee items, die elk een vervolgkeuzelijst met subitems hebben.
- punt 1
- Vervolgkeuzelijst 1
- Vervolgkeuzelijst 2
- Vervolgkeuzelijst 3
- punt 2
- Vervolgkeuzelijst 1
- Vervolgkeuzelijst 2
- Vervolgkeuzelijst 3
Ik denk dat alles hier duidelijk is, het eenvoudigste menu met 2 niveaus. Zoals ik al zei, het menu bestaat uit twee hoofditems, je kunt er indien nodig zoveel toevoegen als je wilt. Dan hoef je alleen maar stijlen toe te voegen die alle magie zullen doen :)
#slow_nav > ul( breedte: 500px; marge:25px auto 0; ) #slow_nav > ul > li( lijststijl: geen; weergave: inline-block; positie: relatief; opvulling:0; ) #slow_nav a(text- decoratie: geen;) #slow_nav > ul > li > a( lettergrootte:18px; opvulling:5px; achtergrondkleur:#333; kleur:#fff; ) #slow_nav li ul( positie:absoluut; lijststijl: geen; tekst uitlijnen: centreren: lettergrootte: 15px; marge: 0; /* Deze regels zijn nodig om de animatie correct te laten werken */ max-height: verborgen; ; -moz-transition:max-height 0,4s lineair; /* end */ ) #slow_nav li:hover ul( max-height:300px; ) #slow_nav li ul li( achtergrondkleur:#333; border-bottom: 1px effen #888; ) #slow_nav li ul li:last-child( border-bottom:none; ) #slow_nav li ul li a ( opvulling:5px 12px; kleur:#fff; display:block; ) #slow_nav li ul li :hover( achtergrondkleur:#444; ) #slow_nav li ul li:first-child( margin-top:25px; positie: relatief; ) #slow_nav li ul li:first-child:before( inhoud:""; positie:absoluut; breedte:1px; hoogte:1px; rand:5px effen transparant; rand-onder-kleur:#333; links:10px; boven :-10px)
De CSS-code is niet klein, maar niet inherent complex. Als u over lay-outvaardigheden beschikt, kunt u gemakkelijk uitzoeken wat en hoe. Ik zal slechts enkele punten benadrukken die belangrijk zijn.
Het eerste is de animatie zelf. De vereiste code wordt gemarkeerd in de opmerkingen in de code - /* Deze regels zijn nodig om de animatie correct te laten werken */ . Je kunt niet verwijderen, anders werkt de animatie niet meer. In dit stukje code hebben we de hoogte aanvankelijk ingesteld op nul pixels -
maximale hoogte: 0px;
en stel de eigenschap overflow:hidden in; om ons onderliggende menu, dat wil zeggen de vervolgkeuzelijst, te verbergen. Vervolgens stellen we de cross-browser transitie-eigenschap in, die de animatie zal uitvoeren.
Webkit-overgang: maximale hoogte 0,4s lineair; -moz-overgang: maximale hoogte 0,4s lineair; overgang: maximale hoogte 0,4s lineair;
Hier kunt u alleen de animatietijd wijzigen. De tijd is momenteel ingesteld op 0,4 seconden. Direct na het instellen van de animatie is er een eigenschap toegevoegd om een nieuwe hoogte in te stellen bij het bewegen over de hoofdmenu-items:
#slow_nav li:hover ul( max-height:300px; )
Hier is een foto. De hoogte is ingesteld op een vast maximum. Als de hoogte van uw vervolgkeuzemenu groter is, wijzigt u de waarde naar een grotere hoogte. Anders wordt uw menu teruggebracht tot 300 pixels hoog.
Deze methode kan niet alleen worden toegepast op zelfgeschreven menu's, maar ook op dezelfde dynamische menu's die worden gemaakt door contentmanagementsystemen, zoals WordPress. Om dit te doen, moet je de stijlen een beetje aanpassen en dat is alles. Dat wil zeggen dat u niet de eerste HTML-code hoeft te gebruiken, alleen stijlen. In de stijlen moet je de ID-naam #slow_nav vervangen door wat je hebt, en misschien nog een aantal andere kleine dingen corrigeren. Ik zal niet in details treden. Elk geval vereist een persoonlijke benadering, dus neem me niet kwalijk :) Ik heb een idee en een methode gegeven, en het is aan jou om te beslissen of je het wilt gebruiken of niet.
Dat is alles, bedankt voor uw aandacht. 🙂
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.
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.
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
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.
Van de auteur: Hallo allemaal. Om de een of andere reden associëren webmasters vervolgkeuzemenu's met scripts, maar lange tijd kan dergelijke navigatie absoluut eenvoudig worden uitgevoerd met behulp van pure CSS. Bovendien zal zo'n menu niet slechter zijn. Vandaag laat ik je zien hoe je een vervolgkeuzemenu in CSS maakt. Ik zal als het ware het recept delen.
Lesplan en indeling van onze menukaartLaten we over het algemeen eerst beslissen hoe we het menu zelf gaan maken. In html5 is de standaardmanier om het in de nav-container te maken met behulp van een lijst met opsommingstekens. Laten we dat doen. We zullen de markeringen later verwijderen met css; we hebben ze helemaal niet nodig in het menu.
Eigenlijk schrijf ik onmiddellijk markeringen met geneste lijsten in html. Dat wil zeggen, onze lijst zal uit twee niveaus bestaan en andere lijsten bevatten. Voor elk item is er namelijk 1 lijst, die een vervolgkeuzemenu zal vormen.
Er is hier een belangrijk punt, namelijk dat u misschien niet voor elk item een vervolgkeuzelijst hoeft te maken, maar slechts voor enkele. Geen probleem, dan maken we bij items zonder vervolgkeuzelijsten eenvoudigweg geen geneste lijsten aan.
Eigenlijk is het hier alle markeringen:
< nav id = "nav" > < ul > < li > < a href = "#" >Punt 1< / a > < ul class = "second" > < li > < a href = "#" >Subclausule< / a > < / li > < li > < a href = "#" >Subclausule< / a > < / li > < li > < a href = "#" >Subclausule< / a > < / li > < / ul > < / li > < li > < a href = "#" >Punt 2< / a > < ul class = "second" > < li > < a href = "#" >Subclausule< / a > < / li > < li > < a href = "#" >Subclausule< / a > < / li > < li > < a href = "#" >Subclausule< / a > < / li > < / ul > < / li > < li > < a href = "#" >Punt 3< / a > < ul class = "second" > < li > < a href = "#" >Subclausule< / a > < / li > < li > < a href = "#" >Subclausule< / a > < / li > < li > < a href = "#" >Subclausule< / a > < / li > < / ul > < / li > < li > < a href = "#" >Punt 4< / a > < ul class = "second" > < li > < a href = "#" >Subclausule< / a > < / li > < li > < a href = "#" >Subclausule< / a > < / li > < li > < a href = "#" >Subclausule< / a > < / li > < / ul > < / li > < / ul > < / nav > |
Ik begrijp dat het enorm is. Dit is het probleem met geneste lijsten, dat je veel code moet schrijven. Maar houd er rekening mee dat we 4 hoofdpunten maken en dat er voor elk een vervolgkeuzemenu zal zijn.
Eigenlijk heb ik de hele navigatie de identificatie-nav gegeven, en alle geneste lijsten geven de stijlklasse als tweede weer om te begrijpen dat ze genest zijn.
Geweldig, we hebben de opmaak klaar, je kunt het resultaat bekijken:
Ja, het ziet er verschrikkelijk uit. Maar nu zullen we css inschakelen en binnen een paar minuten zal onze navigatie worden getransformeerd. Laten we werken.
CSS-stijlen schrijvenHet eerste wat ik ga doen is alle opvulling voor alle elementen terugzetten naar de standaardwaarden. Ze zullen ons alleen maar in de weg zitten; het is beter om de streepjes later zelf in te stellen, waar dat nodig is.
*( marge: 0; opvulling: 0; )
marge: 0; opvulling: 0; |
#nav( hoogte: 70px; ) #nav ul( lijststijl: geen; )
#nav( hoogte: 70px; #navul( lijststijl: geen; |
Nu moeten we daadwerkelijk beslissen wat ons menu zal zijn. Horizontaal of verticaal? Ik stel voor om eerst de horizontale te doen en alles in het voorbeeld te bekijken. Om dit te doen, moet je de volgende stijlen schrijven:
#nav > ul > li( float: links; breedte: 180px; positie: relatief; )
#nav > ul > li( zweven: links; breedte: 180px; positie: relatief; |
Merk op dat we met het > teken verwijzen naar lijstitems die direct genest zijn in ul, die direct genest zijn in nav. Dit is erg belangrijk omdat het voorkomt dat de stijl wordt toegepast op geneste lijstitems. Feit is dat, volgens mijn idee, de items in de hoofdlijst horizontaal zullen worden geplaatst, en in de geneste – verticaal.
Maar u kunt het natuurlijk ook anders doen, in overeenstemming met uw idee. U kunt ervoor zorgen dat alle punten op één lijn liggen.
Hoe dan ook, ik hoop dat je de bovenstaande code begrijpt. Het dwingt de belangrijkste lijstitems naar links te schuiven, zodat ze allemaal op dezelfde regel verschijnen, ook al zijn het blokelementen. Ik heb ze ook een expliciete breedte en relatieve positionering gegeven.
Waarom positioneren? Het is noodzakelijk om geneste lijsten vervolgens absoluut te positioneren. Als je positionering in CSS hebt bestudeerd, weet je waarschijnlijk dat als je een blok relatieve positionering geeft, alle elementen erin absoluut binnen dit specifieke blok kunnen worden gepositioneerd, en niet in het hele browservenster.
In de tussentijd is dit wat we tot nu toe hebben:
Uit deze schermafbeelding kunt u zich het geschatte resultaat al voorstellen. Uiteraard moeten we de items nog wel mooi vormgeven zodat de ogen bij het bekijken van de navigatie niet om genade smeken.
#nav li a( weergave: blok; achtergrond: #90DA93; rand: 1px effen #060A13; kleur: #060A13; opvulling: 8px; tekst uitlijnen: midden; tekstdecoratie: geen; ) #nav li a:hover( achtergrond: #2F718E )
#navli een( weergave: blok; achtergrond: #90DA93; rand: 1px effen #060A13; kleur: #060A13; opvulling: 8px; tekst uitlijnen: centreren; tekst-versiering: geen; #nav li a:hover( achtergrond: #2F718E; |
Eerst moeten de links zelf blokvormig worden gemaakt. Dit is nodig om de opvulling te laten werken en alle eigenschappen correct toe te passen. Vervolgens specificeer ik de kleuren van de achtergrond, tekst, frameparameters, interne opvulling en tekstuitlijning naar het midden. Ten slotte maak ik de onderstreping van links ongedaan.
Al deze parameters hoeven niet op de manier te worden gespecificeerd zoals ik dat deed. Je kunt de kleuren willekeurig kiezen, een ander frame maken of helemaal niet gebruiken, de inkepingen kunnen worden verkleind of vergroot.
Houd er rekening mee dat we in dit geval het >-teken niet hebben gebruikt, dus de bovenstaande regels zijn van toepassing op alle links, inclusief die in geneste paragrafen. Dus nu hebben we het volgende:
Geweldig, maar je begrijpt dat subitems niet zichtbaar mogen zijn, ze zouden moeten openen als je met de muis over het gewenste item beweegt. Zonder dit ziet onze menukaart eruit als een tafel. Het is tijd om de geneste items te verbergen.
#nav li .second( weergave: geen; positie: absoluut; bovenaan: 100%; )
#nav li .second( weergave: geen; positie: absoluut; bovenkant: 100%; |
Ten eerste verbergen we volledig geneste lijsten. Ten tweede geven we ze absolute positionering en topcoördinaat: 100%. Dit betekent dat het vervolgkeuzemenu duidelijk verschijnt onder het hoofditem waartoe het behoort, duidelijk op 100% van de hoogte van dat item.
Nu zien we alleen het hoofdmenu op de webpagina, en dat is wat we nodig hebben.
Laten we de uitval implementerenWat ons nog te doen staat, is het allerbelangrijkste: de val zelf realiseren. Er is niets ingewikkelds aan, kijk eens naar deze code:
#nav li:hover .second(weergave: blok; )
#nav li:hover .second( weergave: blok; |
Deze code zal feilloos werken. Wanneer u met de muis over een hoofdmenu-item beweegt, wordt de sublijst zichtbaar. Bovendien wordt alleen de lijst weergegeven die is genest in het item waar de cursor overheen zweeft.
Er is slechts één klein probleem: de breedte van de geneste items komt niet overeen met de breedte van de belangrijkste. Maar dit kan heel eenvoudig worden opgelost door de juiste stijlen toe te voegen:
#nav li li( breedte: 180px; )
#navlili( breedte: 180px; |
Dat is alles, probleem opgelost:
Alles werkt prima. Wanneer u de muisaanwijzer op het hoofditem plaatst, verschijnt er een vervolgkeuzemenu dat daarmee correspondeert. Als u de cursor naar de zijkant verplaatst, verdwijnt deze. Als u de cursor naar de geneste items zelf verplaatst, kunt u erop klikken en naar het gewenste gedeelte van de site gaan. Daarom hebben we voor u een heel eenvoudig en lichtgewicht vervolgkeuzemenu gemaakt, absoluut zonder scripts.
Het menu omzetten naar verticaalNou, oké, we hebben de horizontale navigatie helemaal door, maar daarnaast wordt verticale navigatie heel vaak gevonden op websites en het kan ook een vervolgkeuzelijst zijn. In feite is het heel eenvoudig om het menu van horizontaal naar verticaal te veranderen; we hoeven slechts een paar regels code te wijzigen.
Eerst moet u de float:left uit de hoofdlijstitems verwijderen. Het is deze eigenschap die ervoor zorgt dat onze artikelen op één regel worden weergegeven, maar waarom hebben we dit nodig als de navigatie verticaal moet zijn?
Nu hoeft u alleen nog maar de regels voor de #nav li .second-selector te wijzigen, dat wil zeggen voor geneste lijsten, ze moeten namelijk een beetje anders worden gepositioneerd. Zoals dit:
#nav li .second( weergave: geen; positie: absoluut; links: 100%; boven: 0; )
#nav li .second( weergave: geen; positie: absoluut; links: 100%; bovenaan: 0; |
Dat wil zeggen dat het noodzakelijk is om twee coördinaten te registreren in plaats van één. Ten eerste heb ik in het geval van horizontale navigatie gezegd dat, zoals gepland, submenu-items onder de hoofditems moeten worden weergegeven. In het geval van een verticaal menu is dit niet geschikt: de items moeten aan de zijkant worden weergegeven.
Daarom veranderen we bovenaan: 100% naar links: 100%. Daarnaast hebben we ook de topcoördinaat nodig. We hebben deze op 0 gezet, zodat het submenu zich op hetzelfde niveau bevindt als het item waarmee het correspondeert.
Dat is alles, nu werkt alles zoals het hoort. Je kunt het testen. Zoals je kunt zien, heb ik niet gelogen toen ik zei dat ik maar een paar regels code hoefde te herschrijven.
Horizontaal menu met verschillende niveausMet vrijwel dezelfde aanpak kunt u indien nodig meer menuniveaus maken. Laten we bijvoorbeeld een lijst maken voor het vierde item van het hoofdmenu, dat in een van de subitems wordt genest.
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.
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 + CSSLaten 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 toevoegenOm 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 gemaaktLaten 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!
