Adaptief menu met behulp van CSS. Hoe maak je een rubber responsief menu met behulp van CSS

Een adaptief menu voor een moderne website is niet alleen een luxe, maar een noodzaak. De overvloed aan moderne apparaten vereist dat webmasters een lay-out creëren die logisch wordt weergegeven op schermen met verschillende resoluties. En in sommige gevallen is het maken van een responsief menu veel moeilijker dan het ontwerp zelf, daarom is het noodzakelijk om dit probleem te overwegen.

Menu voor groot scherm

Om de algemene lay-out van een menu te begrijpen, moet u eerst een menustructuur in HTML maken en deze opmaken met behulp van CSS. Vervolgens kunt u op basis van het ontvangen materiaal de adaptieve sjabloon verbeteren. De HTML-structuur ziet er dus als volgt uit.

Menu met twee items in HTML

U moet CSS-stijlen toevoegen aan het resulterende menu. Ze moeten de lettergrootte en -kleur, de achtergrond en de blokpositionering aangeven.

Onboarding-proces

Het creëren van eenvoudige functionaliteit voor een gewoon computerscherm is eenvoudig, en dit is te zien in het voorbeeld. Een adaptief menu voor een site wordt alleen gemaakt als er iets is om mee te werken, dat wil zeggen als er al navigatie-items zijn toegevoegd. De meest optimale menuoptie voor mobiele apparaten en tablets is het hamburgerpictogram - een vierkant veld waarin er drie zijn getekend. Als u hierop drukt, worden alle menu-items geopend. Om een dergelijke navigatie te maken, moet u tags aan het HTML-document toevoegen.

Vervolgens moet u de juiste stijlen aan deze tags toevoegen om een visueel aantrekkelijk en leesbaar menu te creëren. Naast het visuele ontwerp van het navigatie- en menupictogram, moet u de positie van de afbeelding dienovereenkomstig ontwerpen. Dus de voorwaarde menu_icon span:nth-child(1) (top:0 px); Dat wil zeggen dat de inkeping van de afbeelding van bovenaf nul pixels zal zijn. Op dezelfde manier moet u waarden voor andere zijden instellen.

Nu is het responsieve menu bijna klaar. Het is de moeite waard om op de voorwaarde te letten: standaard is het menupictogram niet zichtbaar op de site, dus u moet een extra klasse met de volgende voorwaarde toevoegen aan het CSS-document: .menu__icon (display: inline-block;) . Hierdoor wordt de navigatie zichtbaar.

Bovendien moet u een taak aan het trapsgewijze opmaakmodel toevoegen, waardoor alinea's en subparagrafen indien nodig worden verborgen. Om dit te doen, moet u een vaste menupositie in CSS instellen, de weergave en uitlijning ontwerpen. Items worden verborgen onder de voorwaarden overflow:auto; dekking:0; z-index:1000. Je kunt ook de klasse menu__links-item toevoegen, die de stijl voor de menu-items aangeeft, maar dit is op verzoek van de ontwikkelaar.

Afwerking

Het CSS-responsieve menu is dus bijna voltooid. Om ervoor te zorgen dat het wordt weergegeven wanneer u op het pictogram klikt, moet u functies toevoegen. Voor de eenvoud is het beter om jQuery te gebruiken, maar als je wilt, kun je puur JavaScript maken. In beide gevallen wordt dezelfde voorwaarde gebruikt:

(function($)($(function() $(".menu__icon").on("click", function() $(this).closest(".menu").toggleClass("menu_state_open");)) ;));))(jQuery).

Hiermee is de lay-out van adaptieve navigatie voltooid. Maar dit is slechts een van de vele opties om dit soort functionaliteit te creëren, dus het is de moeite waard om de andere te overwegen. In ieder geval een paar.

Zonder veranderende normen

De meerderheid van de internetgebruikers verwacht een navigatiebalk bovenaan de site te zien. Dit is al een soort standaard geworden, dus het adaptieve horizontale menu moet er netjes uitzien. Dit kan worden gedaan met behulp van CSS, zowel in de bovenstaande voorbeelden, als door een handler-script aan te sluiten. Over het algemeen bestaat het maken van een responsief menu uit 3 stappen:

HTML-tags schrijven

Stijl ze met behulp van Cascading Style Sheets (CSS).

Aanpassing van een bestaand menu.

Uiteraard hebben alle sites hun eigen menubalken, maar als de bron op een CMS is gemaakt, zal het veel eenvoudiger zijn om een nieuw adaptief menu te maken.

Bootstrap

Het creëren van responsieve functionaliteit is niet zo’n serieus probleem als je Bootstrap-tools gebruikt. Sjablonen voor het maken van een horizontaal menu zijn hier al vastgelegd. U hoeft alleen maar verbinding te maken met de bestandsbron bootstrap.js. Met behulp van dit raamwerk krijgt de webmaster de mogelijkheid om navigatie van elke complexiteit te creëren. Met behulp van een code wordt een responsief menu met Bootstrap gemaakt.

Kenmerken van de methode

Deze code kan omslachtig zijn, maar is begrijpelijk. Het is vermeldenswaard dat de tag hier de hoofdrol speelt navigatie, die verantwoordelijk is voor het creëren van navigatie en het uiterlijk ervan. Hier worden ook containers aangesloten container-vloeistof En houder, waarmee de breedte van de punten wordt ingesteld. Met hun hulp kun je het menu dwingen uit te vouwen op schermen met verschillende resoluties, of het vast laten staan.

Klassen spelen hier een belangrijke rol bij het creëren van adaptieve functionaliteit. instorten En navigatiebalk-samenvouwen die verantwoordelijk zijn voor de stijl. Het menu zelf wordt gemaakt door items op te schrijven die horizontaal zijn geplaatst.

Als u deze framecode gebruikt om navigatie te creëren, ziet deze er op brede schermen uit als een horizontale banner. Aan het begin staat de naam van de bron en vervolgens de items in een strikt gespecificeerde volgorde. Op smalle schermen worden alleen de sitenaam en het hamburgerpictogram weergegeven. Wanneer erop wordt geklikt, worden de menu-items in een verticale lijst weergegeven.

Vervolgkeuzemenu

De Bootstrap-bron zal een grote hulp zijn bij het maken van een responsief vervolgkeuzemenu. Om dit te doen, vervangt u eenvoudigweg de slogan

van het vorige voorbeeld naar de onderstaande code.

Dropdown-items

Dit kan voor één artikel, maar ook voor meerdere. Er verschijnt een pijl die naar beneden wijst in de buurt van de positie met vervolgkeuzemenu-items. Wanneer erop wordt geklikt, verschijnt de aangemaakte lijst. Als de navigatie op een klein scherm wordt weergegeven, wordt het item met de vervolgkeuzelijst ook aangegeven met een pijl, maar dan met de richting naar rechts. Wanneer erop wordt geklikt, verschijnt er nog een verticale lijst met subitems.

Menu met meerdere niveaus

U kunt echter niet alleen creëren met Bootstrap. Als deze bibliotheek niet is aangesloten, kunt u een responsief menu met meerdere niveaus maken met behulp van HTML en CSS en vervolgens de PHP-functie inschakelen.

Eerst moet u een ongeordende lijst maken in een HTML-bestand dat andere lijsten bevat. Om dit te doen, moet u standaardtags gebruiken

. We mogen ook de vorming van klassen niet vergeten die later zullen worden verwerkt door het CSS-cascading stylesheet. Om het duidelijker te maken, is het de moeite waard om een klein voorbeeld te geven van het schrijven van lijsten en het maken van klassen.
De animatie van een responsief vervolgkeuzemenu wordt ingesteld met behulp van een trapsgewijze stijlpagina. Hier moet u de parameters voor het menu opgeven wanneer het scherm met 50, 75 en 25% wordt verkleind. Deze aanpak voor het creëren van adaptieve functionaliteit zorgt voor een competente lay-out, waarbij het menu niet "verhuist".
En ten slotte moet u de hieronder aangegeven functie in het document invoeren.

Als de site niet heeft nagedacht over het gebruik van andere functies dan deze, moet u er nog steeds een apart scriptdocument voor maken. Als u het in gewone HTML plaatst, verschijnt het eenvoudigweg in het browservenster als onderdeel van de tekst en werkt het niet.
JQuery
Een andere geweldige oplossing zou zijn om een navigatiebalk te maken met behulp van een JQuery-plug-in. Een adaptief menu op zo'n dienst duurt slechts een paar minuten. De plug-in zelf kan op internet worden gedownload en heeft een eenvoudige en duidelijke interface die gemakkelijk en eenvoudig te gebruiken is. Er zouden dus geen problemen moeten zijn bij het verbinden van het stijlenbestand.
Nadat het stijlbestand is verbonden, moet u een script schrijven om adaptieve navigatie te creëren.
Hierna moet u de navigatie maken als deze nog niet bestaat. Alles werkt hier volgens het principe: “Alles ingenieus is eenvoudig.” In een HTML-document moet u een lijst met opsommingstekens in een tag maken navigatie. U kunt het eerder gegeven voorbeeld gebruiken of een vereenvoudigde versie ervan, die eruitziet als hieronder weergegeven.
In deze fase van het werk wordt alleen het logo in de browser weergegeven en is het menu zelf verborgen. Om het te laten verschijnen, moet je een functie toevoegen die wijzigingen in de plug-in veroorzaakt: okeNav.

var navigatie = $("#nav-main").okayNav();

Nu kunt u de resultaten van het werk bekijken. Bij de normale breedte van het browservenster ziet dit menu er volkomen normaal uit, maar als je het scherm verkleint, verdwijnen de laatste items. In plaats daarvan verschijnen er drie grote stippen, verticaal geplaatst. Als je erop drukt, lijken ze om te draaien en een horizontale positie in te nemen, en verborgen menu-items worden zichtbaar in een verticale lijst in de rechterbovenhoek van het scherm.
Deze oplossing ziet er zeer modern uit en het gebruikte animatie-effect plaatst de bron in een gunstig daglicht voor bezoekers.
Joomla
En de laatste optie voor het maken van een adaptief menu met behulp van het Joomla-systeem. Dit is een gratis service voor het maken van websites die een CMS-inhoudsbeheersysteem is. En zoals in het begin al werd vermeld: als de site is gemaakt met behulp van een CMS en u het bestaande menu moet wijzigen in adaptief, dan kunt u het beste beginnen met het creëren van de functionaliteit van de site vanaf de allereerste tag. Net als in de vorige voorbeelden moet u een menulijst met opsommingstekens maken in HTML. Alleen voor elk item moet je je eigen klasse schrijven. In totaal ziet alles er als volgt uit.
Vervolgens moet je stijlen toevoegen. Het is het beste om alle opvulling in te stellen op 0 px en box-sizing toe te passen: border-box. Dit maakt het mogelijk om de opgegeven breedte van de elementen te behouden, ongeacht het aantal inspringingen. Vervolgens moet u voor het bovenliggende menu-element (div) de breedte instellen op 90% en vervolgens elk item afzonderlijk opmaken.
U kunt randen verwijderen, de kleur en vulling wijzigen en een ontwerp maken dat verschijnt als u met de cursor beweegt. Kortom, doe alles wat overeenkomt met het ontwerp van de hulpbron. De laatste stap bij het maken van een responsief Joomla-menu is het converteren ervan. Meestal maakt Joomla een menu dat, wanneer de schermgrootte verandert, automatisch opnieuw wordt opgebouwd en in verschillende regels wordt verdeeld. Dit gebeurt allemaal in CSS, de enige functie die moet worden opgenomen is de cross-browser voorwaarde. Hierdoor kan het menu er in verschillende browsers hetzelfde uitzien.
Cross-browser functionaliteit

Een responsive menu maken is echt niet eenvoudig; het vereist kennis en ervaring. Alle beschreven voorbeelden vormen slechts een klein deel van de mogelijke variaties, maar zelfs zij kunnen nuttig zijn als iemand basiskennis heeft van HTML en CSS.

Portaal met ingewikkelde menu's. We hebben besloten alleen scripts te schrijven als we online niet vinden wat we nodig hebben. Er zijn verschillende navigatiesystemen met verschillende functies bedacht. Gelukkig voor ons werd bijna alles gevonden behalve één. Maar net voordat we begonnen met het schrijven van dit menu, zijn we er toch in geslaagd om te vinden wat we nodig hadden.
We hebben een flink aantal adaptieve menu's geprobeerd. In dit onderwerp besloot ik een selectie te maken van de meest waardevolle en interessante die we moesten proberen. Alle adaptieve menu's zijn niet hetzelfde en zijn exclusief ontworpen voor specifieke taken.
Dus. Hier zijn 5 adaptieve menu's voor alle gelegenheden.
flexMenu Dit is precies het menu dat zo moeilijk te vinden was en waarvan we de functionaliteit wilden gaan schrijven.
flexMenu - een menu dat geschikt is voor sites met dynamisch veranderende breedte. Het belangrijkste en unieke kenmerk is de toevoeging van het item “Meer” en de overdracht naar de vervolgkeuzelijst met items die niet in de breedte van de volledige navigatie passen. Dat wil zeggen, als we naar grote monitoren kijken, zullen we alle punten zien. Zodra we het browservenster beginnen te verkleinen, verschijnt het item 'Meer' aan het einde van het menu en worden items die niet passen als het venster kleiner wordt, dynamisch verplaatst naar de vervolgkeuzelijst. We krijgen dus een menu met een vaste hoogte en een “speelbreedte”.
Bij het werken met flexMenu kwamen we één probleem tegen. In ons geval stond aan de rechterkant een logo met float: left;, aan de rechterkant was dit menu ook met float: left; en rechts met vlotter: rechts; er was nog een blok. Bij het wijzigen van het formaat van het browservenster bleek dat het blok aan de rechterkant onder het menu sprong, vervolgens sprong dit allemaal onder het logo en vervolgens werd de menucompressiefunctionaliteit geactiveerd. Hoe u met deze lay-outfunctie omgaat, wordt in de volgende onderwerpen besproken. Blijf op de hoogte. Codeer een responsief navigatiemenu Een goed voorbeeld van een navigatiemenu. Wanneer we het formaat van het browservenster wijzigen, zullen we zien dat de items elkaar overlappen en in de breedte zijn uitgelijnd. Ziet er heel netjes uit. Het belangrijkste is dat dit adaptieve menu er geweldig uitziet op mobiele apparaten en, nog belangrijker, dat het handig te gebruiken is op apparaten met een aanraakscherm.
Flat Menu met meerdere niveaus - adaptieve navigatie Multi-level Flat Menu is een adaptief menu met meerdere niveaus dat werkt met JQuery-bibliotheken. Op desktopmonitors zien we het gebruikelijke, vertrouwde horizontale menu. Op mobiele apparaten verandert de horizontale navigatie in een vervolgkeuzelijst.
Flat Menu met meerdere niveaus is een goede keuze als u ruimte op de pagina wilt besparen.

Habr, hallo!
Er verschijnen veel goede oplossingen van verschillende specialisten op Codepen, en ik ben van mening dat de beste daarvan op één plek moeten worden verzameld. Daarom ben ik 2 jaar geleden begonnen met het opslaan van interessante scripts over verschillende onderwerpen op mijn computer.
Ik plaatste ze altijd in de mr cloud IDE-productgroep. Beste, dit waren assemblages van 5-8 oplossingen. Maar nu ben ik begonnen met het verzamelen van 15-30 scripts over verschillende onderwerpen (knoppen, menu's, tooltips, enzovoort).
Dergelijke grote sets moeten aan meer specialisten worden getoond. Daarom plaats ik ze op Habr. Ik hoop dat ze nuttig voor je zullen zijn.

In deze review zullen we kijken naar menu's met meerdere niveaus.
Vlakke horizontale navigatie
Mooie navigatiebalk met vloeiend verschijnende submenu's. De code is goed gestructureerd en maakt gebruik van js. Afgaande op de gebruikte functies werkt het in ie8+.
http://codepen.io/andytran/pen/kmAEy
Materiaalnavigatiekop met uitgelijnde vervolgkeuzelijsten
Adaptieve linkbalk met submenu met twee kolommen. Alles gebeurt in css en html. Gebruikte CSS3-kiezers die niet worden ondersteund in IE8.
http://codepen.io/colewaldrip/pen/KpRwgQ
Vloeiend accordeon vervolgkeuzemenu
Stijlvol verticaal menu met soepel openende elementen. Overgang, transformatie js-code wordt gebruikt.
http://codepen.io/fainder/pen/AydHJ
Pure CSS Dark Inline navigatiemenu
Donkere verticale navigatiebalk met iconen van ionicons. Er wordt gebruik gemaakt van JavaScript. In IE8 zal het waarschijnlijk zonder animatie werken.
http://codepen.io/3lv3n_snip3r/pen/XbddOO
Pure CSS3 Mega vervolgkeuzemenu met animatie
Stijlvol menu met twee uitvoerformaten: horizontaal en verticaal. Er wordt gebruik gemaakt van iconen en css3-animatie. Het zal er zeker verschrikkelijk uitzien in ie8, maar in andere browsers is alles cool.
Verticale link: http://codepen.io/rizky_k_r/full/sqcAn/
Link naar horizontaal: http://codepen.io/rizky_k_r/pen/xFjqs
CSS3 vervolgkeuzemenu
Horizontaal menu met grote elementen en een vervolgkeuzelijst met links. Schone en minimalistische code zonder js.
http://codepen.io/ojbravo/pen/tIacg
Eenvoudig Pure CSS-dropdownmenu
Eenvoudig maar stijlvol horizontaal menu. Gebruikt lettertype-geweldig. Alles werkt op css en html, zonder js. Het zal werken in ie8.
http://codepen.io/Responsive/pen/raNrEW
Bootstrap 3 mega-dropdownmenu
Een uitstekende oplossing voor online winkels. Toont verschillende niveaus van categorieën en grote afbeeldingen (bijvoorbeeld een product in de uitverkoop). Het is gebaseerd op boosttrap 3.
http://codepen.io/organizedchaos/full/rwlhd/
Platte navigatie
Stijlvolle navigatiebalk met soepel submenu. In oudere browsers zullen er problemen optreden.
http://codepen.io/andytran/pen/YPvQQN
3D geneste navigatie
Horizontaal menu met hele coole animatie zonder js!
http://codepen.io/devilishalchemist/pen/wBGVor
Responsief megamenu - navigatie
Horizontaal responsief menu. Het ziet er goed uit, maar de mobiele versie is een beetje zwak. Er wordt gebruik gemaakt van CSS, html en js.
http://codepen.io/samiralley/pen/xvFdc
Puur CSS3-menu
Origineel menu. Met eenvoudige en schone code zonder js. Gebruik voor "wauw"-effecten.
http://codepen.io/Sonick/pen/xJagi
Volledig CSS3 vervolgkeuzemenu
Kleurrijk vervolgkeuzemenu met één nestniveau. Er wordt gebruik gemaakt van iconen uit font-awesome, html en css.
http://codepen.io/daniesy/pen/pfxFi
Alleen CSS3 vervolgkeuzemenu
Een redelijk goed horizontaal menu met drie nestniveaus. Werkt zonder js.
http://codepen.io/riogrande/pen/ahBrb
Vervolgkeuzemenu's
Een minimalistisch menu met een origineel effect van het uiterlijk van een geneste lijst met elementen. Ik ben blij dat deze oplossing ook zonder javascript is.
http://codepen.io/kkrueger/pen/qfoLa
Pure CSS vervolgkeuzemenu
Een primitieve maar effectieve oplossing. Alleen css en html.
http://codepen.io/andornagy/pen/xhiJH
Pull-menu - Menu-interactieconcept
Interessant menuconcept voor een mobiele telefoon. Ik heb nog nooit zoiets gezien. Maakt gebruik van html, css en javascript.
http://codepen.io/fbrz/pen/bNdMwZ
Maak een eenvoudig vervolgkeuzemenu
Schone en eenvoudige code, geen js. Het zal zeker werken in IE8.
http://codepen.io/nyekrip/pen/pJoYgb
Pure CSS-dropdown
De oplossing is niet slecht, maar er worden te veel klassen gebruikt. Ik ben blij dat er geen js is.
http://codepen.io/jonathlee/pen/mJMzgR
Vervolgkeuzemenu
Mooi verticaal menu met minimale javascript-code. JQuery wordt niet gebruikt!
http://codepen.io/MeredithU/pen/GAinq
CSS 3 vervolgkeuzemenu
Een horizontaal menu met extra bijschriften kan uw website goed aankleden. De code is eenvoudig en duidelijk. Er wordt geen Javascript gebruikt.
http://codepen.io/ibeeback/pen/qdEZjR
Mooie oplossing met veel code (html, css en js). Er zijn 3 submenuformaten gemaakt. De oplossing is zeer geschikt voor online winkels.
http://codepen.io/martinridgway/pen/KVdKQJ
CSS3 Menu Dropdowns (speciale oplossing)!
Donker horizontaal menu met dertien (13) animatie-opties! Ik raad je zeker aan om het te lezen, het zal nuttig zijn in het dagelijks leven.
http://codepen.io/cmcg/pen/ofFiz
P.S.
Ik hoop dat je de verzameling van 23 oplossingen leuk vond. Als u ze wilt blijven lezen, vul dan de onderstaande enquête in.
Geniet van jullie werk allemaal.

Hallo vrienden, collega's! Hoe is het met je? Ik hoop dat het goed met iedereen gaat :) Vandaag gaan we een eenvoudig aanpasbaar menu maken voor onze landingspagina. Mensen stellen hier steeds vaker vragen over, en ik schrijf dergelijke vragen op en probeer in mijn vrije tijd artikelen over deze onderwerpen te schrijven.
Bedankt dat je me op deze manier nieuwe ideeën hebt gegeven en hebt geholpen bij het ontwikkelen van de blog. Trouwens, over welk onderwerp zou je het volgende artikel willen lezen? Schrijf alstublieft in de reacties, dit is erg belangrijk voor mij. Laten we beginnen...
Hoe maak je een responsief menu voor een website?
Google heeft bevestigd dat vanaf half april de responsiviteit van websites voor mobiele apparaten een van de rankingfactoren zal worden. In dit opzicht zijn alle materialen over hoe u uw landingspagina adaptief kunt maken relevanter dan ooit. Vandaag zal ik niets ingewikkelds uitleggen, maar integendeel, ik zal je vertellen hoe je met een minimum aan tijd een heel eenvoudig adaptief menu kunt maken.
In principe zal het html + css zijn, maar je hebt een heel klein script nodig om de klik te verwerken. Dus…
Responsief horizontaal menu
Laten we beginnen met HTML. Laten we eerst de jQuery-bibliotheek opnemen. Je gebruikt hem waarschijnlijk al een hele tijd, dus zorg ervoor dat je hem niet voor de tweede keer aansluit:

Nu de markeringen. Een gewone ongeordende lijst en een kleine div met een menupictogram. Het is alleen zichtbaar bij lage resoluties.
Prijs downloaden
Contacten
Recensies

Zoals je ziet is het niet ingewikkeld, ik denk dat je het zelf kunt verbeteren als dat nodig is.
Laten we nu stijlen toevoegen:

#menu ( achtergrond: #2ba9c0; breedte: 100%; opvulling: 10px 0; tekst uitlijnen: midden; ) #menu a ( kleur: #fff; tekstdecoratie: geen; opvulling: 12px 12px; ) #menu a: hover ( border-bottom: 4px effen #fff; achtergrond: #078ecb; ) .itemsMenu li ( display:inline; vulling-rechts: 35px; breedte:100%; marge: 0 auto; ) .itemsMenu li img( verticaal uitlijnen : midden; marge-rechts: 10px; .iconMenu (kleur: #fff; cursor: aanwijzer; weergave: geen; ) .showitems (weergave:blok !belangrijk; ) @mediascherm en (max. breedte: 600px) ( # menu a( padding-bottom: 13px; ) #menu a:hover ( border-bottom: geen; ) .iconMenu ( display:block; ) .itemsMenu ( display:none; ) .itemsMenu li ( display:block; padding:10px 0 ;)

Wanneer u nu het browservenster verkleint, ziet u de volgende afbeelding:

Ik zou echt niet elke regel willen beschrijven, omdat de blog niet over de lay-out als zodanig gaat. Laat me het gewoon proberen uit te leggen.

Eerst stellen we de eigenschap display:inline in op de li-elementen, zodat ze horizontaal naast elkaar verschijnen. Ik had float:left kunnen gebruiken, maar ik besloot het op deze manier te doen. En verberg het menupictogram met de eigenschap display:none. Wanneer de schermresolutie minder dan 600 pixels is, verwijdert u de inline van de li-elementen, verbergt u deze en geeft u het pictogram weer. In een notendop - ja.

Nu hebben we een eenvoudig script nodig dat een klik op het menupictogram verwerkt en de elementen ervan toont:

$(function() ( $(".iconMenu").click(function() ( if($(".itemsMenu").is(":visible")) ( $(".itemsMenu").removeClass(" showitems"); ) else ($(".itemsMenu").addClass("showitems"); ) )); ));

Zoals dit. Ik heb het in een apart bestand geplaatst en vóór de afsluitende body-tag opgenomen.

Dat is het. Zo maak je snel een eenvoudig adaptief menu voor je landingspagina.

Natuurlijk zijn er nadelen. Inspringingen worden aangegeven in pixels, maar u kunt alle afstanden ook als percentage instellen. Het was gewoon niet nodig. Als dit een volwaardige site zou zijn, zou ik SVG- of lettertypepictogrammen gebruiken, en niet PNG, en zou ik de streepjes opnieuw berekenen als een percentage. En dus was het een beetje geïmproviseerd :) Ik hoop dat alles duidelijk is? Doei.

Wanneer we met responsive design aan de slag gaan, komen we verschillende technieken tegen over hoe we het beste kunnen omgaan met het wijzigen van ons navigatiemenu voor schermen met een lage resolutie. De mogelijkheden lijken eindeloos. Daarom zal ik u vier hoofdbenaderingen laten zien, met hun voor- en nadelen. Drie ervan zijn gemaakt met alleen CSS en één met een kleine hoeveelheid JavaScript.

Alle benaderingen in dit artikel maken gebruik van eenvoudige HTML-code, die ik een 'basismenu' noem. Het rolattribuut wordt gebruikt om een specifiek type aan te duiden: horizontaal menu (volledig horizontaal), vervolgkeuzelijst (select), vervolgkeuzemenu (custom-dropdown) en canvas.

Stroom
Laboratorium
Projecten
Over
Contact

@mediascherm en (max. breedte: 44em) ( )

Stroom
Laboratorium
Projecten
Over
Contact

@mediascherm en (max. breedte: 44em) (nav (ul > li (breedte: 100%; ) ))

Geen JavaScript vereist
Geen extra opmaak
Eenvoudige stijlcode

Neemt te veel schermruimte in beslag

Om dit effect te bereiken, moeten we een vervolgkeuzelijst toevoegen aan de basismarkering. Om het te laten werken, zullen we JavaScript-code moeten toevoegen die de waarde van window.location .href verandert wanneer de onchange-gebeurtenis plaatsvindt
Stream Lab-projecten Over Contact
De lijst verbergen op grote schermen:
nav ( > selecteren ( weergave: geen; ) )
Op kleine schermen verbergen we het hoofdmenu en tonen we een vervolgkeuzelijst. Om de gebruiker te helpen begrijpen dat dit een menu is, zullen we een pseudo-element toevoegen met de tekst "Menu"
@mediascherm en (max-breedte: 44em) ( nav ( ul ( weergave: geen; ) select ( weergave: blok; breedte: 100%; ) &: na ( positie: absoluut; inhoud: "Menu"; rechts: 0 ; onderkant: -1em;
Met extra ontwerp ziet het er zo uit op schermen met een lage resolutie:

Neemt niet veel ruimte in beslag
Maakt gebruik van "native" besturingselementen

Vereist JavaScript om te werken
Dubbele inhoud komt voor
De vervolgkeuzelijst kan niet in alle browsers worden opgemaakt

Het werkt niet op mobiele versies van Safari (iOS< 6.0) . Невозможно кликнуть на label в браузере под iOS < 6.0, чтобы сработал input из-за бага. Решается добавлением пустого события onclick на label
Het werkt niet in de hoofdbrowser van Android OS-versie kleiner dan of gelijk aan 4.1.2.

Lang geleden was er een bug in de WebKit-engine die het gebruik van pseudo-klassen met een combinatie van selectors + en ~ niet toestond
H1 ~ p ( kleur: zwart; ) h1:hover ~ p ( kleur: rood; )

4. Canvas Bij deze aanpak is op kleine schermen het basismenu verborgen en worden de invoer en het label weergegeven zoals in optie 3. Wanneer de gebruiker op het label klikt, zweeft het basismenu naar links en beweegt de inhoud naar rechts . Het scherm is opgesplitst in 80% menu en 20% inhoud (afhankelijk van de resolutie en eenheden die in de CSS worden gebruikt)
Op grote schermen verbergen we het label.
label ( positie: absoluut; links: 0; weergave: geen; )

Op kleine schermen plaatsen we het menu buiten de vensterinhoud en tonen het label en de invoer. Om het menu te verbergen, stellen we de breedte en de negatieve positiewaarde in. Om de gebruiker te helpen dit menu te begrijpen, zullen we ook een pseudo-element toevoegen met de tekst "≡" in het label (als de code "\2261" om te gebruiken als de inhoud van het pseudo-element).

@media scherm en (max-breedte: 44em) ( $menu_width: 20em; body ( overflow-x: verborgen; ) nav ( positie: absoluut; links: -$menu_width; breedte: $menu_width; ul > li ( breedte: 100 %; ) label (weergave: blok; ) label:na ( positie: absoluut; inhoud: "\2261"; ) invoer:gecontroleerd ~ nav (links: 0; ) invoer:gecontroleerd ~ .content (marge-links: $ menu_width + .5em; marge-rechts: -($menu_width + .5em) )