Geweldig overzicht van prachtige menu's met meerdere niveaus met codepen. Hoe maak je een vervolgkeuzemenu met CSS en HTML

Uitstekende styling van het interface-element in de vorm van een vervolgkeuzelijst.

Wanneer u met de muis over de knop beweegt, verschijnt er bovenaan een paneel.

Geanimeerd javascript-menu met glanseffect.

Fris, mooi menu met jQuery.

Implementatie van een menu met een groot aantal items. Scrollt wanneer u de muiscursor omhoog of omlaag beweegt.

Vloeiend scrollen naar het gewenste gedeelte op de pagina. jQuery One Page Navigation-plug-in.

Nieuwe jQuery-plug-in. Uitstekende implementatie van geanimeerde sitenavigatie. Wanneer u door menu-items bladert, verschijnt er een blok met een beschrijving en mogelijke links, en afhankelijk van het geselecteerde item verandert de achtergrond van de pagina, die zich uitstrekt om het hele scherm te vullen, ongeacht de grootte van het browservenster. Bekijk zeker eens de demopagina.

Geanimeerd menu met pop-upitems.

Wanneer u naar beneden scrollt, blijft het menu bovenaan het scherm staan.

Om een ​​verticaal menu met een groot aantal items te implementeren. Bladeren door items gebeurt met behulp van het muiswiel of met behulp van de links "Vorige" en "Volgende".

Nieuw menu in Apple-stijl. Het ziet er donkerder uit dan voorheen, maar niet minder schattig.

Vervolgkeuzemenu met achtergrondeffect. Menu-subitems worden naar boven uitgevouwen. Wanneer u over een menu-item beweegt, verandert de achtergrondafbeelding.

Geanimeerd menu. Menu-items worden gepresenteerd in de vorm van pictogrammen en beschrijvingen. Verschillende geweldige effecten wanneer u met de muis over een menu-item beweegt. Er zijn 8 effecten. Om ze allemaal te zien, volgt u de links Exemple1-Exemple8 op de demopagina.

Verticaal en horizontaal scrollmenu. Een goede oplossing als er een groot aantal items op het menu staan.

Er verschijnt een menu wanneer u met de rechtermuisknop op een specifiek gebied klikt.

Wanneer u een menu-item selecteert, worden aan de rechterkant submenu-items weergegeven.

Het originele jQuery CSS3-menu is verkrijgbaar in 7 verschillende stijlen. Wanneer u met uw muis over een van de menu-items beweegt, lijkt de rest te vervagen.

10 creatieve geanimeerde menu's. Horizontale en verticale CSS3-menu's met verschillende effecten en overgangen.

Het archief bevat ook het originele PSD-menubestand.

De achtergrond of onderstreping van een menu-item volgt de muis met een kleine vertraging, terwijl de achtergrond soepel van kleur verandert naarmate deze van item naar item beweegt. Zeer mooi effect, ziet er ongebruikelijk uit. Let op: het effect werkt niet in opera

Een prachtig effect als u met uw muis over een van de afbeeldingen beweegt. Het effect doet enigszins denken aan het hierboven beschreven jQDock.

Horizontaal, verticaal menu. Interessante effecten.

Een heel interessant effect. Perfect voor het ontwerpen van portfoliowebsites.

Interessant effect van het verschijnen van miniaturen bij het zweven.

Mooi overgangseffect tussen items.

Menu-items worden gepresenteerd in de vorm van miniaturen.

Een navigatiebalk met een zoekvak dat doorschijnend wordt terwijl u naar beneden scrollt op de pagina.

Geweldig verticaal menu. Wanneer u de cursor beweegt, verschijnt er een menu-item.

Een interessant effect wanneer u de cursor over een menu-item beweegt.

Wanneer u met uw muis over het menu beweegt, verschijnen de items ervan. De items die verschijnen worden weergegeven in de vorm van een boog, waarvan u de straal kunt instellen bij het configureren van de plug-in. In sommige browsers zie je geen boogweergave, het menu wordt recht weergegeven, maar dit zal de algemene indruk van deze jQuery-menu-implementatie nog steeds niet verpesten.

Een interessant effect wanneer u met de muis over een menu-item beweegt.

Fris geanimeerd menu in grijstinten.

Een interessante oplossing voor navigatie, die wordt gepresenteerd in de vorm van verticale strepen. Wanneer u met uw muis over deze balken beweegt, verschijnt er een afbeelding voor het item en een lijst met submenu's. Wanneer u op een submenu-item klikt, verschijnt een pagina met een beschrijving. Deze uitvoering leent zich uitstekend voor promotiesites of presentaties. Bekijk zeker de demo van de plug-in.

De sitenavigatie wordt gepresenteerd in de vorm van 4 afbeeldingen. Als u erover beweegt, merkt u een interessant geanimeerd effect.

Navigatiepaneel. Als u op de pijl klikt, bladert u door de pagina. De navigatie scrollt mee met de pagina-inhoud.

De taak van het centreren van een horizontaal menu kan een beetje lastig zijn, vooral voor degenen die nieuw zijn met CSS. De zoektocht naar oplossingen leidt tot een zeer beperkte lijst met 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 zelfstudie bespreken we een methode voor het centreren van een horizontaal menu die alleen standaard CSS-regels gebruikt en in alle browsers werkt.

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 tutorial worden getoond, gebruiken een 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 methode werkt op basis van de relatieve positionering van 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 het implementeren van deze methode voor het centreren van menu's. 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 uitgelijnd in één horizontale lijn.
• 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 zich gedeeltelijk daarbuiten uit. 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 visuele stijlen voor gebruiken. Laat het ul-element zonder achtergrondkleur en zonder rand zodat het volledig 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 aanpasbare tekst.

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

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

Stap 1 - HTML-opmaak

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

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

Stap 2 - 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 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; tekstversiering: geen; rand-links: 1px effen #393942; rand-rechts: 1px effen #4f5058; lettertype- familie: Helvetica, schreefloos lettertype: lettergrootte: 13px; 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 lijsthoogtewaarde 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; 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; )

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

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 een zoekblok bevat. Een soortgelijke implementatie is vaak te vinden in moderne . In termen van implementatietijd en complexiteit is de oplossing iets ingewikkelder dan de vorige. Het werd in mei 2013 gepubliceerd, dus het kan zijn dat je wat dingen moet aanpassen, hoewel het tijdens onze tests prima werkte.

HTML-code

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

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

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

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

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

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; 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 ( 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 voor toe. Download de definitieve code via de link naar de bron; u 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 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: Ik heet u welkom op onze blog over het bouwen van websites. Dit is een serie artikelen gewijd aan de nieuwe specificatie en vandaag wil ik je vertellen hoe je een menu maakt in HTML5 en hoe dit proces verschilt van hetzelfde in eerdere versies van de taal.

Allereerst zou ik willen zeggen dat de specificatie niet zo nieuw is: de ontwikkeling ervan begon in 2009. Eigenlijk is er sindsdien een constante ontwikkeling geweest - nieuwe functies verschijnen in html5, moderne browsers ondersteunen steeds meer dezelfde functies, zodat het binnenkort mogelijk zal zijn om over volledige ondersteuning voor deze technologie te praten, ook al is het geen enkel geheel. het is eerder een reeks nieuwe mogelijkheden, die elk onafhankelijk zijn.

Nou ja, oké, maar wat is er anders aan het maken van de hoofdnavigatie (menu), aangezien je een artikel over dit onderwerp leest, dan zouden er zeker enkele verschillen moeten zijn. Hoe werd het menu eerder gemaakt? Meestal werd dit gedaan met behulp van een lijst met opsommingstekens, die in een extra container voor alle navigatie werd geplaatst: een gewone div.

Dus met de komst van nieuwe tags kun je nu iets correcters doen - in plaats van een div-tag, het menu in nav verpakken - een nieuw semantisch element dat speciaal is gemaakt om de belangrijkste links erin te verzamelen en ze te groeperen.

U kunt een lijst of slechts een reeks links in nav plaatsen. Het lijkt mij dat dit een nog eenvoudiger en correctere oplossing is, hoewel je in veel sjablonen nog steeds de implementatie van het menu kunt zien met behulp van de tags ul, li, a.

Interessant is dat de navigatiecontainer speciaal is gemaakt voor prioriteitslinks op de pagina. In feite kunnen er meer dan één van dergelijke containers op een pagina staan, maar u moet daarin alleen de links plaatsen die daadwerkelijk de hoofdnavigatie vormen (bijvoorbeeld het hoofdmenu bovenaan en het duplicaat ervan in de voettekst van de pagina).

Thuis Diensten Contacten Recensies

Je hebt zelfs geen frame nodig in de lijst; alles wordt in eerste instantie op één regel weergegeven, omdat de links inline-elementen zijn.

Een ander ding is dat ze zeer beperkt zijn qua ontwerp vanwege hun inline-eigenschappen. U kunt alleen werken met eigenschappen als: kleur, lettergrootte, marges. Als je een specifieke achtergrondkleur wilt instellen, scheidingstekens wilt maken en opvulling wilt toevoegen (of de grootte van elk menu-item wilt bepalen), dan kun je dit niet met een lijn doen.

Hier zullen we onze items in blokelementen moeten omzetten. Om dit te doen, moeten ze de eigenschap schrijven:

Nu gaan ze van boven naar beneden, dat wil zeggen dat onze navigatie verticaal is geworden. Om het weer horizontaal te maken, moet je bepaalde eigenschappen toevoegen. Definieer bijvoorbeeld in plaats van een bloktype een bloklijntype ervoor, of geef ze (zwevend: links). Lees meer over deze methoden.

Om een ​​verticaal menu in html5 te maken, gebruiken ze meestal een lijst, maar de opmaak die ik je hierboven gaf is ook geschikt voor ons. Zoals je hebt gezien, zullen, als je links naar bloklinks converteert, deze automatisch van boven naar beneden op één lijn komen te staan, omdat twee blokken niet op dezelfde lijn kunnen staan.

Nu kunt u er de nodige ontwerpregels op toepassen. Blokken hebben veel meer eigenschappen dan een inline-element, waardoor je veel meer mogelijkheden hebt. Ik heb bijvoorbeeld deze toegevoegd:

a( tekstversiering: geen; kleur: #fff; opvulling: 5px; lettergrootte: 22px; weergave: blok; achtergrond: lineair verloop (naar rechts, rgba(96,108,136,1) 0%,rgba(63,76,107 ,1) 100%); breedte: 200px; tekst uitlijnen: midden )

Laten we een eenvoudig horizontaal navigatiemenu voor de site maken. Om dit te doen, zullen we eenvoudige technieken gebruiken die ervoor zullen zorgen dat ons menu in alle browsers correct wordt weergegeven.

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". Maak een nieuw bestand met de naam menu.html, bijvoorbeeld met behulp van het Dreamweawer-programma of met een gewoon notitieblok. Daarin plaatsen we tussen de body-tags ons menu. Dit is een reguliere lijst met opsommingstekens van ul met li-elementen. Uiteraard maken we van elk menu-item een ​​link, waarbij we in plaats van de URL de hash # invoegen. Maak met Photoshop een afbeelding van 3x30 px groot, met een verloopvulling zoals weergegeven in de onderstaande afbeelding. We slaan het bestand op in GIF-formaat. Laten we het bg.gif noemen. Deze afbeelding fungeert als achtergrondafbeelding van ons menu.

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 in*/ height:30px; /* en block height*/ text-align:center; /*gecentreerde tekst*/ line-height: 2.1em; verwijder onderstreping van links*/ color:#fff; /*link tekstkleur - wit*/ border-right:#fff effen 1px;*border aan de rechterkant van het blok (1px witte lijn)*/ ) ul a: zweven ( kleur: #ccc; /*link verandert van kleur als je er overheen zweeft*/ )

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. Als gevolg hiervan kregen we een volledig browseroverschrijdend horizontaal menu dat er niet alleen hetzelfde uitziet in alle 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. Als scheidingsteken voor menu-items wordt een blokelementontwerp gebruikt met een witte rechterrand van 1px dik. Dit is praktisch de eenvoudigste manier om een ​​horizontaal menu te implementeren. Natuurlijk kunt u het desgewenst 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
Compatibiliteit tussen browsers: 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

De bestanden die in dit voorbeeld worden gebruikt, kunnen worden gedownload in het archief