Menu li( zweven:links; )

Onze hele menukaart is nu horizontaal geworden.

Als je niet begrijpt wat er precies is gebeurd en wat de float-eigenschap doet, raad ik je aan informatie hierover te googlen dit pand en bestudeer het grondig, omdat
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 */ )

Hier is een van de meest belangrijke regels- weergeven:blok;. Feit is dat links standaard inline-elementen zijn, en to inline-elementen inkeping erin verschillende browsers worden op verschillende manieren gebruikt, dus het is raadzaam om van de link een blokelement te maken en er pas daarna de eigenschappen op toe te passen die verband houden met externe of interne inspringingen. Ik wil je nu niet belasten onnodige informatie na verloop van tijd echte voorbeelden u zult zelf 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 (

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 opmaakt 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!!!

Van de auteur: Hallo allemaal. Om de een of andere reden associëren webmasters vervolgkeuzemenu's met scripts, maar dergelijke navigatie kan lange tijd absoluut veilig worden uitgevoerd op 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.

Laten 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 meteen naar html-opmaak met geneste lijsten. 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 belangrijk punt, wat betekent dat u mogelijk niet voor elk item een ​​vervolgkeuzelijst hoeft te maken, maar slechts enkele. Geen probleem, dan maken we bij items zonder vervolgkeuzelijsten eenvoudigweg geen geneste lijsten aan.

Eigenlijk is het hier alle markeringen:

• Punt 1
  • Subclausule
  • Subclausule
  • Subclausule
• Punt 2
  • Subclausule
  • Subclausule
  • Subclausule
• Punt 3
  • Subclausule
  • Subclausule
  • Subclausule
• Punt 4
  • Subclausule
  • Subclausule
  • Subclausule

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 een identificatie van nav gegeven, en alle geneste lijsten een stijlklasse van tweede 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 het erbij betrekken css-werk en binnen een paar minuten zal onze navigatie worden getransformeerd. Laten we werken.

Het 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; )

#nav( hoogte: 70px; ) #nav ul( lijststijl: geen; )

Nu moeten we daadwerkelijk beslissen wat ons menu zal zijn. Horizontaal of verticaal? Ik stel voor om eerst een 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; )

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 uitgelijnd: midden; tekstdecoratie: 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 gecentreerde tekstuitlijning. 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 bij in dit geval We hebben het >-teken niet gebruikt, dus de opgegeven regels zijn van toepassing op alle links, inclusief links in geneste alinea's. 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; top: 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.

Wat 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; )

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; )

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 gaan vereiste sectie plaats. Daarom hebben we voor u een heel eenvoudig en lichtgewicht vervolgkeuzemenu gemaakt, absoluut zonder scripts.

Nou, 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; )

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 zou moeten. 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.

Met 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.

De taak van het centreren van een horizontaal menu kan lastig zijn, vooral voor degenen die nieuw zijn met CSS. Het zoeken naar oplossingen leidt tot zeer beperkte lijst methoden, waarvan de meeste afhankelijk zijn van CSS-trucs, JavaScript of het gebruik van niet-standaardregels die niet door alle browsers worden ondersteund. IN deze les we zullen kijken naar een methode voor het centreren van een horizontaal menu die alleen standaard gebruikt CSS-regels en werkt in alle browsers.

Hieronder ziet u een horizontaal menu gecentreerd in deze kolom, waarin het tweede tabblad is geactiveerd. U kunt proberen het formaat van uw browservenster of pagina aan te passen om ervoor te zorgen dat het menu altijd gecentreerd en functioneel blijft.

Op de demopagina ziet u verschillende ontwerpopties voor een horizontaal gecentreerd menu. Elk van deze kan in uw projecten worden gebruikt.

Alle menu's die in deze les worden geïllustreerd, worden gebruikt eenvoudige structuur. Dit is een gewone, ongeordende lijst met links die in een element zijn geplaatst div.

• Eerste bladwijzer
• Tweede bladwijzer
• Derde tabblad
• Vierde tabblad

Hieronder vindt u de volledige CSS-code die wordt gebruikt om het menu te centreren. Een uitleg van het werkingsprincipe wordt later in de les gegeven.

#centeredmenu ( float:left; width:100%; background:#fff; border-bottom:4px solid #000; overflow:hidden; position:relative; ) #centeredmenu ul ( clear:left; float:left; list-style :geen; opvulling:0; positie:relatief; tekst uitlijnen:gecentreerd; opvulling:0; positie:relatief; rechts:50%; 3px 10px; achtergrond:#ddd; kleur:#000; lijnhoogte:1.3em; #centeredmenu ul li a:hover (achtergrond:#369; kleur:#fff;) #centeredmenu ul li a.actief, #centeredmenu ul li a.actief:hover ( kleur:# fff; achtergrond:#000;

De werking van de methode is gebaseerd op relatieve positionering zwevende blokelementen in elkaar. Laten we eerst eens kijken hoe de grootte van elementen verandert bij verplaatsing.

Element div(blok) zonder verplaatsing wordt uitgerekt over de gehele beschikbare breedte.

Maar als we de div naar links verplaatsen, wordt deze automatisch kleiner om in de inhoud te passen. Compressie is de sleutel tot implementatie deze methode het menu centreren. Het helpt u het menu naar de juiste positie te verplaatsen.

Laten we een standaard links uitgelijnd menu nemen en het stap voor stap opnieuw maken. Voor de duidelijkheid zijn de items in verschillende kleuren gekleurd, zodat het meteen duidelijk is wat waar hoort.

Let op de volgende punten:

• Element gecentreerdmenu div(blauwe rechthoek) is naar links verschoven, maar heeft een breedte van 100%, zodat deze over de hele pagina gestrekt blijft.
• Element ul(roze rechthoek) bevindt zich binnen het element gecentreerd menu div en beweegt naar links. Dit betekent dat het wordt gecomprimeerd tot de breedte van de inhoud, dat wil zeggen tot de totale breedte van alle bladwijzers.
• Alle li-elementen (groene rechthoeken) bevinden zich binnen het element ul en ga naar links. Ze worden dus gecomprimeerd tot de grootte van de schakels erin en in één horizontale lijn uitgelijnd.
• Binnen elke link (oranje rechthoeken) wordt de bladwijzertekst weergegeven: Bladwijzer 1, Bladwijzer 2, enzovoort.

Vervolgens compenseren we het element ul naar rechts met 50% met behulp van de positie: relatief; . Wanneer een element onder deze omstandigheden procentueel wordt verschoven, is het belangrijk om te onthouden dat de totale breedte van de elementen die het bevat niet de breedte ervan is. In ons geval vindt de verschuiving plaats over de helft van het browservenster (of de beschikbare ruimte voor weergave). Als gevolg hiervan begint ons menu in het midden van het venster en strekt het zich gedeeltelijk uit voorbij de grenzen ervan. En laten we verder gaan met de volgende stap.

Het enige dat overblijft is het verplaatsen van alle elementen li met 50% achtergelaten. Dit is 50% van de breedte van ons ul-element (de container die het menu bevat). De bladwijzers worden dus precies naar het midden van het venster verschoven.

Wanneer u deze centreermethode gebruikt, zijn er een aantal belangrijke punten waarmee u rekening moet houden:

• Sinds het element ul zich gedeeltelijk buiten het venster uitstrekt, resulteert dit in de weergave van schuifbalken. Daarom moet u de regel overflow:hidden; gebruiken. voor element gecentreerdmenu div. Dus het uitstekende deel van het element div zal worden afgesneden.
• Sinds het element ul is niet uitgelijnd met bladwijzers, u kunt er geen gebruiken visuele stijlen voor hem. Laat het ul-element zonder achtergrondkleur en zonder lijst zodat het geheel onzichtbaar wordt. En stijlen voor bladwijzers mogen alleen voor elementen worden gebruikt li.
• Als u speciale stijlen voor de eerste en laatste bladwijzers moet instellen, moet u een klasse toevoegen voor het eerste en laatste element li, zodat je ze individueel kunt stylen.

De voorgestelde oplossing is compatibel met alle browsers, maakt geen gebruik van JavaScript en ondersteunt aanpasbaar tekst.

Laten we een eenvoudig horizontaal navigatiemenu voor de site maken. Hiervoor zullen we gebruiken eenvoudige technieken, wat zal resulteren in een correcte weergave van ons menu in alle browsers.

Dus laten we beginnen. Laten we een lijst maken met de namen van ons menu. Laat de itemnamen zijn: "Home", "Nieuws", "Producten", "Diensten", "Partners", "Contacten". Wij creëren nieuw bestand genaamd menu.html, bijvoorbeeld met Dreamweawer of met een gewoon notitieblok. Daarin plaatsen we tussen de body-tags ons menu. Dit is normaal lijst met opsommingstekens ul met li-elementen. Uiteraard maken we van elk menu-item een ​​link, waarbij we in plaats van de URL de hash # invoegen. Gebruiken Photoshop-programma Laten we een afbeelding van 3x30 px maken, met een verloopvulling zoals weergegeven in de onderstaande afbeelding. Het bestand wordt opgeslagen in GIF-formaat. Laten we het bg.gif noemen. Deze tekening zal fungeren als achtergrondafbeelding onze menukaart.

Hier is de inhoud van het menu.html-bestand:

Eenvoudig horizontaal menu voor meerdere browsers

• Thuis
• Nieuws
• Producten
• Diensten
• Partners
• Contacten

Laten we nu afzonderlijk een stijlbestand maken met de naam main.css. De lijst wordt hieronder volledig weergegeven.

Ul ( marge:0; /*zero opvulling*/ opvulling:0; /*zero opvulling*/ float:left; /*lijn de lijst naar links*/ breedte:auto;/*stel de breedte van de auto in op basis van het type en de inhoud van de lijst */ achtergrondafbeelding: url(bg.gif); /*stel de achtergrondafbeelding in*/ background-repeat:repeat-x /*herhaal onze afbeelding horizontaal*/ list-style:none; /*lijstmarkeringen verwijderen*/ background-color:#4778c3; /*stel de achtergrondkleur voor de afbeelding in*/ font-size:13px; /*stel de lettergrootte in*/ font-family:Arial, Helvetica, sans-serif ; /*stel het lettertype in*/ ) ul li ( float:left; /*lijn lijstelementen naar links*/ ) ul a ( display:block; /*representeer menulinks als blokelementen*/ width:100px; /* stel de blokgrootte*/ height:30px; /* en blokhoogte*/text-align:center in; /* gecentreerde tekst*/ line-height: 2.1em; regelafstand*/ tekstversiering:geen; /*onderstreping verwijderen uit links*/ color:#fff; /*link tekstkleur - wit*/ border-right:#fff effen 1px; /*grens rechterkant blok (1px witte lijn)*/ ) ul a:hover ( color:#ccc; /*link verandert van kleur wanneer er met de muis overheen wordt bewogen*/ )

Ik denk dat er geen vragen mogen zijn over de inhoud van het bestand main.css; ik heb de tips in de opmerkingen voldoende gedetailleerd en duidelijk geschreven, dus ik zal mezelf niet herhalen. Vergeet niet om het aan onze menu.html-pagina te koppelen met behulp van

Laten we het samenvatten. Het resultaat was dat we een volledig cross-browser horizontaal menu kregen dat er niet alleen in totaal hetzelfde uitziet moderne browsers, maar ook in zeldzaamheden als IE 5.5 en IE 6.0. Alle menu-elementen worden gepresenteerd als blokelementen en hebben dezelfde afmetingen van 100 px breed en 30 px hoog. Het ontwerp van een blokelement met de rechterrand wordt gebruikt als scheidingsteken voor menu-items. wit 1px dik. Dit is praktisch de eenvoudigste manier om een ​​horizontaal menu te implementeren. Natuurlijk kunt u het, indien gewenst, aanpassen, mooier en functioneler maken met behulp van verbeeldingskracht, CSS-eigenschappen en extra grafische elementen. Ons horizontale menu ziet er ongeveer zo uit:

Voordelen van deze oplossing:
Makkelijk te doen
Eenvoudige code
Geen tabellen of javascript
Cross-browser compatibiliteit: het menu ziet er in alle browsers hetzelfde uit
Er wordt slechts één tekening gebruikt
Minimale code op menu.html-pagina
Minimale code voor het implementeren van stijlen in main.css

Bestanden gebruikt in in dit voorbeeld, te downloaden in het archief

De meeste klassieke websites op internet gebruiken een horizontaal menu als belangrijkste navigatie-element. Soms kan het anders zijn extra chips— ontwerpen met meerdere niveaus, pictogrammen voor subitems, zoekblok, complexe lijsten enz. Onlangs stond er een kleine selectie op de blog, maar vandaag bekijken we er 4 praktische voorbeelden 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

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(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; border-radius: 5px; positie: relatief; lijststijl: geen;

Stap3 - koppelen

Naast de basisfuncties in stijlen (lettertype, kleur, hoogte) gebruiken en creëren we soepele overgang zweef tekstkleuren. 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: 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; -left: 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 weer te geven/verbergen, stelt u eerst de dekkingseigenschap 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; 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 100 px, 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: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. Niet in de code kinderkiezer" > " (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. Finale HTML-optie want het vervolgkeuzemenu ziet er als volgt uit:

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

Menu-CSS

1. Basisstijlen en menu-elementen

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

* ( marge : 0 ; opvulling : 0 ; ) .nav ( achtergrond : #232323 ; hoogte : 60px ; weergave : inline-block ; ) .nav li ( float : links ; lijststijltype : geen ; positie : relatief ; )

@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

.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

#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 CSS-vervolgkeuzemenu maken dat werkt laatste punt#opties.

#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 te specificeren de juiste manier voor deze en andere afbeeldingen in het voorbeeld. Het uiterlijk van een submenu wordt geïmplementeerd met behulp van dekkingseigenschappen. Eindoplossing op codepen:

IN deze optie Er wordt voornamelijk gebruik gemaakt van CSS2.1-technieken, de oplossing plus of min is nieuw - voor maart 2015. Als u éé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 voor toe. Download de definitieve code via de link naar de bron; je kunt een deel ervan 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 snelheid downloads.

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.