Hoe maak je een horizontaal CSS-menu? Geweldig overzicht van prachtige menu's met meerdere niveaus met codepen

Specificatie Beschrijving

De tag is bedoeld om een lijst met menu-items weer te geven. Vergelijkbaar met tags en

In HTML4 is de tag verouderd, het wordt aanbevolen om in plaats daarvan de tag te gebruiken

HTML	menu-item menu-item
HTML5	...

Stelt het menutype in.

Vereist. Geldigmaking Het gebruik van deze tag is verouderd door de HTML4-specificatie.

geldige code

wordt alleen verkregen bij gebruik van de overgangsregeling. In HTML5 wordt de tag correct gebruikt.

HTML 4.01 IE Cr Op Sa Fx

MENU-tag
In dit nummer:
Russische keuken. Burlatskaya-soep
Oekraïense keuken. Dumplings
Moldavische keuken. Paprika

Kaukasische keuken. Kharcho-soep

Baltische keuken. Vertinyai

Het resultaat van dit voorbeeld wordt getoond in Fig. 1.

Rijst. 1. Weergave van een lijst die is gemaakt met behulp van een tag

HTML5 IE Cr Op Sa Fx
MENU-tag

Nieuw... Openen... Opslaan Kopiëren Knippen Plakken Hallo,

lieve lezers 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 onthouden en te analyseren, waar ik mee te maken kreeg beginfase mezelf vestigen als lay-outontwerper, wat voor mij zeer onbegrijpelijk was toen ik dit gebied bestudeerde, enz. 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 kwamen, zodra ik lay-out ging studeren, de meeste vragen over lay-out

, 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!, omdat ik nog steeds hoop dat je niet zo'n beginner bent dat ik je in detail moet vertellen wat lichaam en hoofd zijn en hoe stijlen met elkaar verbonden zijn. Laat ik dat even zeggen naast de stijlen voor ons menu css-bestand Ik zal de eenvoudigste reset schrijven om de stijlen opnieuw in te stellen en dezelfde weergave van inspringing 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 bovenstaande code is dat dankzij deze code Bij alle pagina-elementen die we gaan schrijven, worden de marge en de opvulling teruggezet op nul; dit moet worden gedaan om ervoor te zorgen dat onze pagina er in alle browsers hetzelfde uitziet.

Dus wat hebben we in ons? in dit stadium? Wij hebben 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 zal zijn html maken opmaak voor ons menu.

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, omdat 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:

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 niet of een blokelement een breedte heeft om te positioneren dit element strikt in het midden, we hoeven er alleen maar een externe marge (marge) aan de rechter- en linkerkant 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

vlotter: links
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 а( display:block;/* Maak van de link een blokelement*/ padding:12px 20px;/* Stel de opvulling in */ tekstversiering: geen; /* verwijder de onderstreping */ color:#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 koppelingen standaard inline-elementen zijn en dat inline-elementen ingesprongen zijn 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 (

) linkerrand van 1px grootte en kleur #666;. Wat betreft de .menu li:first-child selector, hier gebruiken we een speciale pseudo-klasse waarmee we de eerste kunnen selecteren kind-element lijst. 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.

Ik eindig hier deze les, ik hoop echt dat het nuttig voor je was en nu weet je hoe je een eenvoudig horizontaal menu kunt maken 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!!!

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

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 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-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 submenu's te tonen/verbergen, stelt u eerst de transparantie-eigenschap (dekking) in gelijk aan nul, en tijdens het zweven - één. 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. 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 in dit voorbeeld We zullen bekijken hoe je met CSS een vervolgkeuzemenu kunt maken, dat naast de items een zoekblok zal bevatten. 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

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

* ( 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

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; 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; float: border-box: overgang: 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; breedte: 60px; zwevend: links; opvulling : 0 ; tekst uitlijnen : centreren ;

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

Bij de stijlen vind je een inzetstuk achtergrondafbeelding driehoek (triangle.png) om een submenu aan te geven - vergeet niet dit op te geven 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 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 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.

Als uw website meer is dan slechts één webpagina, kunt u overwegen een navigatiebalk (menu) toe te voegen. Menu is een gedeelte van een website dat is ontworpen om bezoekers te helpen bij het navigeren door de site. Elk menu is een lijst met links die leiden naar interne pagina's plaats. Het meest op een eenvoudige manier

Het toevoegen van een navigatiebalk aan een website is het maken van een menu met behulp van CSS en HTML.

Verticaal menu

De eerste stap bij het maken van een verticaal menu is het maken van een lijst met opsommingstekens. We zullen de lijst ook moeten kunnen identificeren, dus zullen we er een id-attribuut aan toevoegen met de identificatie "navbar". Elk element
- Thuis
- onze lijst bevat één link:
- Contacten
- Over ons
Nieuws
Onze volgende taak is het opnieuw instellen van de standaardlijststijlen. We moeten de buitenste en binnenste opvulling uit de lijst zelf verwijderen en de opsommingstekens uit de lijstitems. Stel vervolgens de gewenste breedte in:
#navbar (marge: 0; opvulling: 0; lijststijltype: geen; breedte: 100px; ) Nu is het tijd om de links zelf te stylen. Wij zullen ze toevoegen achtergrondkleur , wijzig de tekstparameters: kleur, lettergrootte en -dikte, verwijder de onderstreping, voeg kleine streepjes toe en herdefinieer de weergave
element van inline naar blok. Bovendien zijn linker- en onderframes toegevoegd aan de lijstitems.
Het belangrijkste onderdeel van onze wijzigingen is de herdefinitie van inline-elementen naar blokelementen. Nu nemen onze links alle beschikbare ruimte van de lijstitems in beslag, dat wil zeggen dat we om de link te volgen niet langer de cursor precies over de tekst hoeven te bewegen.
#navbar a (achtergrondkleur: #949494; kleur: #fff; opvulling: 5px; tekstdecoratie: geen; lettertypegewicht: vet; rand links: 5px effen #33ADFF; weergave: blok; ) #navbar li ( rand-links: 10px effen #666; rand-onder: 1px effen #666 )
Documenttitel #navbar (marge: 0; opvulling: 0; lijststijltype: geen; breedte: 100px; ) #navbar li (rand-links: 10px effen #666; rand-onder: 1px effen #666; ) # navbar a ( achtergrondkleur: #949494; kleur: #fff; opvulling: 5px; tekstdecoratie: geen; lettertypegewicht: vet; rand links: 5px effen #33ADFF; weergave: blok; )
- Thuis
- onze lijst bevat één link:
- Contacten
- Over ons
Poging "
Wanneer u met uw muis over een menu-item beweegt, wordt het verschijning kan veranderen om de aandacht van de gebruiker te trekken. Je kunt een dergelijk effect creëren met behulp van de pseudo-class:hover.

Laten we terugkeren naar het eerder besproken voorbeeld van een verticaal menu en dit toevoegen aan het stijlblad volgende regel:
#navbar a:hover ( achtergrondkleur: #666; rand links: 5px effen #3333FF; ) Probeer »
Horizontaal menu
In het vorige voorbeeld keken we naar de verticale navigatiebalk, die meestal te vinden is op websites links of rechts van het hoofdinhoudsgebied. Menu's met navigatielinks bevinden zich echter ook vaak horizontaal bovenaan de webpagina.

Een horizontaal menu kan worden gemaakt door een gewone lijst op te maken. Eigenschap voor elementen weergeven
u moet de waarde inline toewijzen, zodat de lijstitems zich achter elkaar bevinden.

Om menu-items horizontaal te plaatsen, moet u eerst een menu maken lijst met opsommingstekens met koppelingen:
- Thuis
- onze lijst bevat één link:
- Contacten
- Over ons
Laten we een paar regels voor onze lijst schrijven die de standaardstijl die voor lijsten wordt gebruikt opnieuw instellen, en de lijstitems opnieuw definiëren van blok naar inline:
#navbar (marge: 0; opvulling: 0; lijststijltype: geen; ) #navbar li (weergave: inline; ) Probeer »
Nu moeten we het alleen nog bepalen styling voor onze horizontale menukaart:
#navbar (marge: 0; opvulling: 0; lijststijltype: geen; rand: 2px effen #0066FF; randradius: 20px 5px; breedte: 550px; tekstuitlijning: midden; achtergrondkleur: #33ADFF; ) #navbar a ( kleur: #fff; opvulling: 5px 10px; tekstdecoratie: geen; lettertypegewicht: vet; weergave: inline-block; breedte: 100px; ) #navbar a:hover ( randradius: 20px 5px ; achtergrondkleur: #0066FF ) Probeer »
Vervolgkeuzemenu
Het menu dat we gaan maken heeft hoofdnavigatielinks in de horizontale navigatiebalk, en subitems die alleen verschijnen als u de muisaanwijzer op het menu-item plaatst waarop deze subitems betrekking hebben.

Eerst moeten we de HTML-structuur van ons menu maken. We plaatsen de belangrijkste navigatielinks in een lijst met opsommingstekens:
- Thuis
- onze lijst bevat één link:
- Contacten
- Over ons
We plaatsen de subitems in een aparte lijst en nesten deze in het element
, die de bovenliggende link met betrekking tot de subitems bevat. Nu hebben we een duidelijke structuur voor onze toekomstige navigatiebalk:
- Thuis
- onze lijst bevat één link:
- Contacten
  - Adres
  - Telefoon
  - E-mail
- Over ons
Poging "
Laten we nu beginnen met het schrijven van CSS-code. Eerst moet u de lijst met subitems verbergen met behulp van de weergave: geen; zodat ze niet altijd op de webpagina worden weergegeven. Om subitems weer te geven, hebben we dat nodig als we over een element bewegen

de lijst is opnieuw geconverteerd naar blok-element:

#navbar ul (weergave: geen; ) #navbar li:hover ul (weergave: blok; )

We verwijderen de standaardinspringingen en markeringen uit beide lijsten. We maken lijstelementen met navigatielinks zwevend, waardoor een horizontaal menu ontstaat, maar voor lijstelementen die subitems bevatten stellen we zwevend in: geen; zodat ze onder elkaar verschijnen.

#navbar, #navbar ul ( marge: 0; opvulling: 0; lijststijltype: geen; ) #navbar li ( zwevend: links; ) #navbar ul li ( zwevend: geen; )

Vervolgens moeten we ervoor zorgen dat ons vervolgkeuzemenu de inhoud onder de navigatiebalk niet naar beneden duwt. Om dit te doen, zullen we de positie van de lijstitems instellen: relatief; , en een lijst met subitems positie: absoluut; en voeg een topeigenschap toe met een waarde van 100%, zodat het absoluut gepositioneerde submenu precies onder de link verschijnt.

#navbar ul (weergave: geen; positie: absoluut; bovenaan: 100%; ) #navbar li ( zwevend: links; positie: relatief; ) #navbar ( hoogte: 30px; ) Probeer »

De hoogte voor de bovenliggende lijst is met opzet toegevoegd, omdat browsers zwevende inhoud niet als elementinhoud beschouwen. Zonder hoogte toe te voegen zal onze lijst door de browser worden genegeerd en zal de inhoud die op de lijst volgt rond ons menu lopen.

Nu hoeven we alleen nog maar onze beide lijsten op te maken en het vervolgkeuzemenu is klaar:

#navbar ul ( weergave: geen; achtergrondkleur: #f90; positie: absoluut; bovenaan: 100%; ) #navbar li:hover ul ( weergave: blok; ) #navbar, #navbar ul ( marge: 0; opvulling: 0; lijststijltype: geen; ) #navbar ( hoogte: 30px; achtergrondkleur: #666; opvulling links: 25px; minimale breedte: 470px; ) #navbar li ( zwevend: links; positie: relatief; hoogte: 100%; ) #navbar li a (weergave: blok; opvulling: 6px; breedte: 100px; kleur: #fff; tekstdecoratie: geen; tekstuitlijning: midden; ) #navbar ul li ( float: geen; ) #navbar li:hover ( achtergrondkleur: #f90; ) #navbar ul li:hover ( achtergrondkleur: #666; )

Fijne dag voor iedereen die nu leest deze publicatie. Vandaag wil ik je vertellen over een van de tools voor het bouwen van websites waar geen enkele webbron zonder kan. Dit is het sitemenu, of zoals ze ook zeggen sitemap. Tegenwoordig zijn er een onbeperkt aantal soorten en subtypen menu's.

Ontwikkelaars van online winkels, blogs, educatieve diensten en andere bronnen experimenteren en creëren steeds meer nieuwe en ongebruikelijke kaarten. Na het lezen van het artikel leert u in welke hoofdgroepen alle soorten navigatiepanelen zijn onderverdeeld, kunt u ze allemaal uitproberen en leert u ook hoe u menucode voor een HTML-website schrijft. Laten we nu aan de slag gaan!

Hulpmiddelen voor het maken van een navigatiebalk

Er zijn verschillende manieren om een menu in opmaaktaal te maken. Hun belangrijkste concept is gebruik ongenummerde lijst. In html 4, dat ons bekend is, schrijven ontwikkelaars dus tags op de pagina

Zoals vermeld in eerdere publicaties, paarelement

- één element van de lijst. Voor de duidelijkheid: laten we de code schrijven eenvoudig menu:

Navigatie

Sitenavigatie

Thuis
Nieuws van de week
Technologische vooruitgang
Chatten

Met de komst van het platform werd de opmaaktaal echter aangevuld met extra tags. Dit is de reden waarom het menu van moderne websites wordt gemaakt met behulp van een speciale tag< menu>. In gebruik verschilt dit element niet van lijsten met opsommingstekens.

In plaats van één< ul>is voorgeschreven< menu>. Er blijken echter aanzienlijke verschillen te bestaan als je kijkt naar de werkkant. Het tweede voorbeeld versnelt dus het werk zoek programma's en robots in. Bij het analyseren van de sitestructuur begrijpen ze meteen dat dit stukje code verantwoordelijk is voor de sitemap.

Er zijn horizontale, verticale en vervolgkeuzemenu's. Soms is de navigatiebalk ontworpen als een afbeelding. Sinds het technologiesegment is uitgebreid, worden webservices adaptief gemaakt, d.w.z. De paginastructuur past zich automatisch aan de schermgrootte van het apparaat aan. Laten we eens kijken naar de vermelde menugroepen.

Laten we een horizontaal navigatiemodel maken

Dit type navigatie is het populairst. Wanneer het paneel horizontaal is ontworpen, bevinden alle menu-items zich in de paginakop of in de “voettekst” (soms worden navigatie-elementen gedupliceerd en verschijnen ze tegelijkertijd bovenaan en onderaan).

Als voorbeeld zullen we een horizontaal paneel maken, waarvan de menu-items zullen worden ontworpen met behulp van CSS (cascading style sheets), of liever getransformeerd. Ja, iedereen afzonderlijk onderdeel bevindt zich in een afgeschuinde rechthoek. Gefascineerd?

Voor transformatie gebruiken we een CSS-eigenschap genaamd transform . Om de transformatie te specificeren wordt de ingebouwde skewX-functie gebruikt, die de scheefheidshoek in graden specificeert.

Helaas werkt elke browser op zijn eigen manier met deze eigenschap, ondanks de voorgeschreven standaarden. Daarom zijn er speciale voorvoegsels gemaakt om dit aan te geven:

-ms- (Internet Explorer)
-o- (Opera)
-webkit- (Chrome, Safari)
-moz- (Firefox)

Laten we nu de opgedane kennis toepassen op het schrijven van een voorbeeld.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

Horizontaal paneel

Thuis

Over het bedrijf

Producten

Contacten

Horizontaal paneel li ( weergave: inline-block; marge-rechts: 6px; achtergrond: #FF8C00; transformeren: skewX(-45deg); -webkit-transform: skewX(-45deg); -o-transform: skewX(-45deg) ; -ms-transform: skewX(-45deg); -moz-transform: skewX(-45deg); li:hover ( achtergrond: #1C1C1C; )

Thuis
Over het bedrijf
Producten
Contacten

Voor het tweede programma gebruiken we de voorgaande code als basis. Ik wilde dat mijn verticale menu-items afgeronde hoeken hadden in plaats van afgeschuinde hoeken.

Hiervoor heb ik een andere gebruikt css-eigenschap grensradius.

In eerdere artikelen heb ik al met deze parameter gewerkt, dus ik denk niet dat er problemen zullen zijn bij het begrijpen van de werking ervan.

Verticaal paneel li( weergave: blok; marge: 13px; opvulling: 13px; achtergrond: #FF8C00; breedte:20%; tekst uitlijnen: gecentreerd; lettergrootte:20px; randradius:10px; ) a ( kleur: # fff; ) li:hover ( achtergrond: #1C1C1C; )

Thuis
Over het bedrijf
Producten
Contacten

Zoals je al hebt opgemerkt, is de belangrijkste verandering in deze code de afwezigheid van de weergave: inline-block-declaratie, die feitelijk verantwoordelijk was voor de horizontale rangschikking van navigatie-items.

We hebben naar de hoofdgroepen gekeken navigatiebalken Er zijn echter nog een aantal varianten, of beter nog, toevoegingen.

Soms doen zich situaties voor waarin sommige punten de belangrijkste aanvullen. In dit geval kunt u niet zonder vervolgkeuzelijsten. Ze worden gemaakt door middel van transformaties met behulp van CSS-tools.

Hieronder heb ik de code bijgevoegd van een klein programma dat deze aanpak implementeert.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

Dropdown lijst body (padding-left: 30%; font-size: 18px; ) .m-menu ( marge: 0; opvulling: 9px; breedte:50%; tekst-uitlijning:center; rand: 3px effen #000; achtergrond : #FF8C00; ) .m-menu > li ( positie: relatief; weergave: inline-blok; ) .m-menu a ( weergave: blok; marge-links: -2px; opvulling: 13px; kleur: #fff; rand -left: 3px solid #fff; ) .m-menu a:hover ( achtergrond: #1C1C1C; ) .m-menu .s-menu ( links: 10px; positie: absoluut; weergave: geen; breedte: 155px; marge: 0; opvulling: 0; lijststijl: geen; achtergrond: #FF8C00; ) .m-menu .s-menu a (rand: 1px effen #000; ) .m-menu >

Dropdown lijst body (padding-left: 30%; font-size: 18px; ) .m-menu ( marge: 0; opvulling: 9px; breedte:50%; tekst-uitlijning:center; rand: 3px effen #000; achtergrond : #FF8C00; ) .m-menu > li ( positie: relatief; weergave: inline-blok; ) .m-menu a ( weergave: blok; marge-links: -2px; opvulling: 13px; kleur: #fff; rand -left: 3px solid #fff; ) .m-menu a:hover ( achtergrond: #1C1C1C; ) .m-menu .s-menu ( links: 10px; positie: absoluut; weergave: geen; breedte: 155px; marge: 0; opvulling: 0; lijststijl: geen; achtergrond: #FF8C00 ) .m-menu .s-menu a (rand: 1px effen #000; ) li:hover .s-menu (weergave:blok)

In dit voorbeeld heb ik de menu-eenheden in twee klassen verdeeld:

m-menu
s-menu

De eerste klas is verantwoordelijk voor het hoofdmenu en het s-menu is verantwoordelijk voor het submenu.

In de code zie je een techniek als .m-menu > li:hover of .m-menu > li.

Met:hover geef je dus aan hoe het element zich zal gedragen als je erover beweegt.

In dit geval wijzigt het teken “>” de selector zodat alleen objecten die tot het hoogste niveau behoren, blokletters zijn.

Het submenu was aanvankelijk ingesteld op weergave: none , wat de handler waarschuwt zich te verbergen dit voorwerp. Wanneer u met hover over een navigatie-element zweeft, verandert de waarde van de weergave-eigenschap in blok en daarom wordt de vervolgkeuzelijst geopend.

Zoals u kunt zien, is de implementatie van deze techniek heel eenvoudig.

Nu beheerst u de belangrijkste soorten navigatiepanelen en kunt u deze zelf wijzigen, aanvullen en moderniseren. Als je mijn artikel leuk vond, abonneer je dan op blogupdates en deel de bron van kennis met vrienden en collega's. Tot ziens!

Met vriendelijke groet, Roman Chueshov

Lees: 1010 keer