nieuwe speler 16 januari 2017 om 01:28 Mobiel menu voor de site. JQuery mmenu-plug-in

• jQuery

In dit artikel zullen we het hebben over hoe je een menu kunt maken voor de mobiele versie van de site dat daarin zou passen responsief ontwerp. Ik wil je vertellen over een plug-in voor JQuery genaamd mmenu (je kunt de link volgen om de plug-in te downloaden en meteen zien hoe het menu dat we gaan maken eruit zal zien). We zullen de plug-in gebruiken omdat het niet de beste praktijk is om elke keer je eigen fiets te bouwen. Onze manier is om de best practices te gebruiken. Laten we beginnen.

Verbinding. De auteur adviseert om html 5 doctype te gebruiken, nou, hier denk ik dat we geen alternatieven nodig hebben, we gebruiken het. In het hoofdgedeelte van ons document moeten we JQuery zelf verbinden en twee plug-inbestanden, we verbinden:

Als we een menu op het canvas nodig hebben, moeten we de bestanden jquery.mmenu.oncanvas.min.js en jquery.mmenu.oncanvas.css opnemen. On-canvas is een versie van het menu met position:absolute; breedte:100%; height:100%, waardoor het wordt uitgerekt om het hele scherm te vullen.

Een menu maken Het menu is heel eenvoudig gemaakt: net als een ongeordende HTML-lijst ondersteunt de plug-in het nesten van lijsten. Dit alles moet worden verpakt in een navigatietag, die een ID heeft.

• Thuis
• Over ons
  • Geschiedenis
  • Het team
  • Ons adres
• Contact

Menustijlen 1. Als de plug-in een geneste lijst tegenkomt, voegt hij binnen de bovenliggende li-tag een link toe naar de link die al in deze li bestaat. Wanneer u op de toegevoegde link klikt, wordt een submenu geopend. Om van een menu-item een ​​link naar een volledig submenu te maken in plaats van slechts twee links, moet je een span-tag gebruiken.

• Thuis
• Over ons
  • Geschiedenis
  • Het team
  • Ons adres
• Contact

2. Om het submenu altijd zichtbaar te maken, moet u er de klasse “Inset” aan toevoegen.
3. Voeg de klasse "Geselecteerd" toe aan het menu-item om het gemarkeerd te maken.
4. U kunt als volgt scheidingstekens maken

• Website
• Thuis
• Over ons
• Contact

Javascript Je hebt een knop nodig die, wanneer erop wordt geklikt, een menu opent. Ik raad aan deze hamburgers te gebruiken. Daar leest u hoe u ze kunt gebruiken. Kortom, u moet de hamburgerstijlen downloaden, deze aan de pagina koppelen en ongeveer de volgende html-code toevoegen

Ik heb de klasse Fixed gebruikt om position:fixed in te stellen

Zodat onze mobiel menu het werkte, het enige dat overblijft is om de volgende javascript-code aan de pagina te koppelen:

$(document).ready(function() ( var $menu = $("#mijn-menu").mmenu(); var $icon = $("#mmenu-icon"); var API = $menu.data ("mmenu"); $icon.on("klik", function() ( API.open(); )); API.bind("geopend", function() ( setTimeout(function() ( $icon.addClass ("is-actief"); $icon.on("klik", function() ( API.close(); )); setTimeout(function() ( $icon.removeClass("is-actief") ; , 100); $icon.on("klik", function() (API.open(); ));

Problemen bij het gebruik van mmenu Ik ben twee problemen tegengekomen. In eerste instantie probeerde ik de hele inhoud van het lichaam erin te wikkelen div-tag, omdat dit nodig is om de plug-in te laten werken. Maar in dit geval verborg het om de een of andere reden alle inhoud die ik had ingepakt. Dus ik gaf het op. Als je niet alles in je lichaam in een div verpakt, dan zal de plug-in het voor je doen. Maar er zullen problemen zijn met het dubbel uitvoeren van js-scripts en andere. Daarna kwam ik meteen het tweede probleem tegen: de plug-in verpakt niets anders dan een div. Dat wil zeggen, als je h1 direct in de body hebt (body > h1), zoals ik bijvoorbeeld had, dan zal mmenu ze overslaan en de div's die erachter staan ​​inpakken. Ik heb dit opgelost door simpelweg alle andere tags in div's te verpakken. zodat er direct in het lichaam alleen divs over zijn.

Hierdoor werkte alles voor mij. Ik hoop dat dit artikel nuttig voor je was.

Tags: responsief ontwerp, lay-out, jQuery-plug-ins

Shifter is een JQuery-plug-in voor eenvoudige mobiele navigatie. Shifter werkt door doelelementen in de DOM te controleren en daaraan gebeurtenissen te binden.

SlickNav SlickNav is een responsieve mobiele menuplug-in voor jQuery met functies zoals menuondersteuning op meerdere niveaus, compatibiliteit met verschillende browsers, flexibele, eenvoudige opmaak en degradeert gracieus zonder JavaScript.

Menutron Menutron converteert uw navigatiemenu's van een lijst naar een selectiemenu wanneer u het formaat van uw browser wijzigt. Op mobiele apparaten selecteert u het menu dat verschijnt eigen onderdeel bedieningselementen, waardoor het gemakkelijker wordt om een ​​item te selecteren.

Responsief en aanraakmenu Tutorial voor het maken van responsieve en aanraakvriendelijke vervolgkeuzemenu's. De techniek bestaat uit 3 hoofdonderdelen, namelijk: Eenvoudige navigatie met vervolgkeuzelijst HTML-gebaseerd en CSS, waarbij Responsiviteit wordt geïmplementeerd met behulp van mediaquery's en deze beschikbaar worden gemaakt voor apparaten met een aanraakscherm met behulp van een superkleine jQuery-plug-in.

jQuery.mmenu MMENU is een jQuery-plug-in voor het maken van strakke, app-achtige schuifmenu's voor uw mobiele website of responsieve site.

Navobile JQuery Navobile is een jQuery-plug-in die mobiele navigatie eenvoudig maakt. Navobile gebruikt CSS om CSS3-vertalingen, detectie van mobiele apparaten en fixatie van de navigatiepositie toe te passen.

FlexNav FlexNav is een mobile-first voorbeeld van het gebruik van mediaquery's en het hebben van een mooi menu met meerdere niveaus met aanraakondersteuning, hover-openingen en toegankelijkheid van het tabbladtoetsenbord.

Responsief Retina-Ready-menu Adaptief menu met drie lay-outs voor verschillende maten browser. Het menu verandert automatisch naar een van de drie verschillende lay-outs, afhankelijk van de grootte van het browservenster: een "desktop" inline-versie, een tablet-geoptimaliseerde versie met twee kolommen en een mobiele versie met een menulink om de navigatie voor te tonen en te verbergen kleine schermen. Er wordt een lettertype gebruikt als pictogrammen om vervaging te voorkomen verschillende resoluties.

slimMenu slimMenu is een lichtgewicht JQuery-plug-in die is gemaakt om snel en menu's met meerdere niveaus navigatie tijdens het vliegen. Met slimMenu zult u niet langer worstelen met mediaverzoeken om responsieve menu's te maken, of andere zware plug-ins om submenu's met meerdere niveaus te maken. Het is 100% mobiel responsief.

Horizontaal uitschuifmenu Een eenvoudig, horizontaal schuifmenu met een miniatuurrasterindeling, zoals bij een submenu. Het menu schuift vanaf de bovenkant naar buiten wanneer op een hoofdmenu-item wordt geklikt en subitems verdwijnen. Zodra op een ander item wordt geklikt, verandert de hoogte van het submenu. aanpassen en de inhoud zal in- en uitfaden wanneer er wordt geschakeld.

Een van de gebieden die dit vereisen speciale aandacht bij het ontwikkelen van interfaceontwerp voor mobiel apparaat, is navigatiemenu. Als de site veel secties of pagina's heeft, is speciale vaardigheid vereist om alle items in een kleine schermresolutie onder te brengen. Heel vaak verandert de navigatie in een aantal lijnen of een aantal op elkaar gestapelde knoppen. IN deze les We zullen kijken naar een manier om navigatie te maken met jQuery.

Taak

De onderstaande schermafbeeldingen tonen situaties met sjablonen op schermen van mobiele apparaten. Als de navigatie 3 of 4 knoppen heeft, wordt de locatie op één regel opgeslagen. Maar als het menu 6 of meer items bevat, wordt het een lelijke stapel.

Oplossing

Een gebruikelijke manier is om de navigatie om te zetten in een vervolgkeuzelijst op basis van het geselecteerde element. Deze oplossing heeft als nadeel dat het select-element niet gestyled kan worden met behulp van CSS. Met Javascript-plug-ins zoals Chosen kunt u het menu aanpassen, of u zult genoegen moeten nemen met systeemstijlen voor de vervolgkeuzelijst. De gebruiker kan ook in verwarring raken wanneer de breedbeeldversie van de menustructuur verandert in een vervolgkeuzelijst op een mobiel apparaat.

2) Uitvoer als blok

Een andere populaire manier- vorm menu-items als blokelementen met verticale rangschikking van items. Deze aanpak duurt echter grote ruimte in de titel. Als de navigatie veel knoppen bevat, zal de gebruiker door een lange lijst moeten scrollen om bij de informatie te komen.

3) Menupictogram

EN laatste methode die we in onze tutorial zullen behandelen, is het gebruik van het menupictogram om navigatie in te schakelen. Deze aanpak bespaart ruimte op de pagina (wat belangrijk is voor een mobiel apparaat) en geeft volledige controle over verschijning met behulp van CSS. Het menupictogram en de navigatie zelf kunnen worden gepresenteerd in overeenstemming met de algemene stijl van de site.

Mobiele navigatie ingeschakeld met jQuery

In deze tutorial laten we zien hoe je een navigatie voor klein scherm. jQuery zal worden gebruikt om het menupictogram voor te bereiden en navigatie mogelijk te maken. Geen extra HTML-tags Voor de bediening is navigatie niet nodig.

Voor ons menu zullen we gebruiken eenvoudige structuur:

• Knop
• Knop

Het menu vereist JavaScript-code. De functie bereidt het element voor in het . Wanneer een bezoeker op het #menu-icon element klikt, schuift de navigatie uit.

jQuery(document).ready(function($)( /* Bereid het menupictogram voor */ $("#nav-wrap").prepend("Menu"); /* Schakel navigatie in */ $("#menu-icon " ).on("klik", function())( $("#nav").slideToggle(); $(this).toggleClass("actief"); ));

Als gevolg van het script zal de structuur van het document veranderen:

Menu

• Knop
• Knop

Onze demo maakt gebruik van vrij eenvoudige CSS-code. Sleutelpunt wordt weergegeven in de onderstaande figuur. Het element #menu-icon heeft aanvankelijk de eigenschap display:none. Gebruikt een mediaquery om #menu-icon te wijzigen in display:block als de viewport-breedte kleiner is dan 600px.

Het resultaat is navigatie met de gepresenteerde functionaliteit:

Tegenwoordig zijn jQuery-navigatiemenu's meer dan alleen tekstblokken met links erin. Ik heb je verteld hoe met behulp van JQuery en CSS3 kun je een navigatiemenu maken dat er echt cool uitziet.

Met behulp van de kracht van JQuery kunnen we het navigatiemenu omzetten in dynamische menukaart. Hoewel je momenteel alleen CSS3 kunt gebruiken om dynamische navigatie te creëren, maakt JQuery menu's nog krachtiger.

Daarnaast dynamische functies Ook design speelt een belangrijke rol. Al was het maar omdat dit is wat bezoekers als eerste zien als ze op uw site komen.

Als het menu niet representatief is, levert dit gebruikers een slechte gebruikerservaring op. Goed ontwerp het menu zal op zijn beurt de kwaliteit van uw site verhogen en geven beste ervaring gebruikersinteracties.

Vandaag presenteer ik u er 30 geweldige voorbeelden JQuery-navigatiemenu.

1. Opdringerig

Pushy is een responsief navigatiemenu zonder canvas dat gebruikmaakt van CSS-transformaties en -overgangen. Het werkt prima op mobiele apparaten. Bekijk zeker de demo en je zult hem zeker leuk vinden.

Demonstratie | Downloaden

2. Slinky

Dit is weer een geweldig jQuery-menu voor het maken van prachtige schuifbare navigatielijsten. Zijn onderscheidend kenmerk is de kleine omvang van de bronbestanden.

Demonstratie | Downloaden

3. jQuery Pop-menu

Dit is een eenvoudig responsief pop-upmenu met zeer interessante kenmerken. Wanneer u op het menupictogram klikt, verschijnt er een menuvenster met elementpictogrammen. Bekijk de demo.

Demonstratie | Downloaden

4. Schuifbalken

Slidebars is een JQuery-framework voor het snel en eenvoudig implementeren van applicatiestijlen zonder gebonden te zijn aan een canvas. Met schuifbalken kunt u ook oriëntatiewijzigingen en formaatwijzigingen verwerken.

Demonstratie | Downloaden

5. jQuery Square-menu

JQuery Menu, dat een vierkant geanimeerd websitemenu weergeeft met behulp van JQuery en CSS3. Zorg ervoor dat u dit zeker weet door de demo te bekijken.

Demonstratie | Downloaden

6. Navigatie per perspectiefpaginaweergave

Dit jQuery-navigatiemenu verandert een pagina in een 3D-menu. Het idee is om een ​​ontwerp te maken mobiele applicatie, waarbij wanneer u op het menupictogram klikt, de inhoud van de pagina naar de zijkant wordt verschoven en het menu naar de voorgrond wordt gebracht.

Demonstratie | Downloaden

7. SlickNav

Plug-in voor het maken van een responsief mobiel jQuery-menu met verschillende niveaus en flexibele maar eenvoudige instellingen. Compatibel met verschillende browsers, navigatie met behulp van het toetsenbord is mogelijk.

Demonstratie | Downloaden

8. Menu

jQuery-menu voor toepassingen met en zonder binding aan het canvas met pop-up-subitems. Dankzij talrijke opties, add-ons en uitbreidingen is een zeer flexibele menuaanpassing mogelijk.

Demonstratie | Downloaden

9. Sidr

jQuery-plug-in voor het maken van menu's en eenvoudige toevoeging adaptieve functies. Met Sidr kun je creëren verschillende elementen uw website, evenals adaptieve menu's.

Demonstratie | Downloaden

10. slimMenu

slimMenu is een kleine jQuery-plug-in waarmee u responsieve navigatiemenu's met meerdere niveaus kunt ontwikkelen. Het leuke ervan is dat je er meerdere kunt hebben verschillende menu's, en ze zullen allemaal volledig adaptief zijn.

Demonstratie | Downloaden

11. Horizontale navigatie

jQuery-navigatiemenu waarmee u kunt instellen horizontale menukaart over de gehele breedte van de container. Deze plug-in maakt het heel gemakkelijk. Bovendien kan ondersteuning voor IE7 worden geïmplementeerd.

Demonstratie | Downloaden

12.FlexNav

Dit is een mobile-first voorbeeld van het gebruik van mediaquery's en JavaScript om een ​​geweldig menu met meerdere niveaus en ondersteuning te creëren aanraakschermen, hover-effecten en toetsenbordnavigatie.

Demonstratie | Downloaden

13. jQuery-menu-doel

jQuery-menu dat gebeurtenissen activeert wanneer de muis over een vervolgkeuzemenu-item beweegt. Ideaal voor het maken van responsieve vervolgkeuzemenu's zoals die van Amazon.

Demonstratie | Downloaden

14. SmartMenu's

Een jQuery-menuplug-in die een eenvoudige en intuïtieve manier biedt om menu's weer te geven. Creëert responsieve menulijsten. Werkt op alle apparaten!

Demonstratie | Downloaden

15. Versteller

Shifter is een gebruiksvriendelijke, mobile-first jQuery-plug-in voor het maken van diamenu's die van rechterkant wanneer u op de schakelknop drukt. Er is slechts één maxWidth-optie om te configureren. Hiermee kunt u de resolutie/oriëntatie voor mobiele apparaten aanpassen.

Demonstratie | Downloaden

16.Hamburger

Hamburger is een jQuery-plug-in voor het maken van diamenu's in Android-stijl App, met een pop-upmenu aan de rechterkant van het scherm. Wanneer het menu wordt uitgevouwen tot volledige grootte, overlapt het het inhoudsgebied, maar niet de actiebalk.

Demonstratie | Downloaden

17. Focus

Focucss is een jQuery-navigatiemenu dat een zijbalkmenu zonder canvas creëert met coole vervagingsfuncties waarmee u de aandacht van gebruikers kunt vestigen op de hoofdgedeelten van de site en minder opvallende gedeelten minder opvallend kunt maken.

Demonstratie | Downloaden

18. Lade

Drawer is een jQuery-plug-in voor het maken van een responsief, geanimeerd menu dat vanaf de zijkant van het scherm tevoorschijn komt als erop wordt geklikt. Soortgelijke kenmerken die je misschien hebt gezien in Android-applicaties.

Demonstratie | Downloaden

19.Datamenu

Datmenu - premium jQuery responsief menu Met verschillende functies CSS3-animaties. Het mooie aan deze plug-in is de mogelijkheid om volledige maatwerk js-opties gebruiken.

Demonstratie | Downloaden

20. jPanelMenu

jPanelMenu is een mooi en modern jQuery-menu waarmee u een paneelnavigatiemenu kunt maken met CSS3-animatie-overgangsfuncties. jPanelMenu-stijl lijkt op mobiele versies Facebook en Google. De plug-in kan voor verschillende mobiele toepassingen worden gebruikt.

Demonstratie | Downloaden

21. Fly-zijmenu

Fly Side Menu is een coole plug-in voor navigatiemenu's die CSS3 gebruikt om te creëren zijmenu met 3D-transformaties en overgangen.

Demonstratie | Downloaden

22. PageScroll jQuery-menuplug-in

PageScroll is een aangepast mobiel jQuery-menu dat wordt aanbevolen voor gebruik op elke website en op landingspagina's.

Demonstratie | Downloaden

23.DD-pictogrammenu

DD Icon Menu is een jQuery-plug-in waarmee u een verticaal menu met pictogrammen aan de rand van het scherm kunt maken, met menu-subitems die uitklappen als u de muis beweegt.

Demonstratie | Downloaden

24. JQuery mobiele datumnavigatie

jQuery-menu waarmee u kunt navigeren op datums in een geselecteerd bereik (week, maand of jaar). Ideaal voor het opvragen van informatie via AJAX-oproepen.

Demonstratie | Downloaden

25. Navobile

jQuery navigatiemenu-plug-in waarmee u heel eenvoudig mobiele menu's kunt maken. Gebruikt CSS-overgangen om de menupositie op mobiele apparaten in te stellen.

Demonstratie | Downloaden

26. Push-menu op meerdere niveaus

Multi-Level Push Menu is een Javascript-bibliotheek gemaakt door MARY LOU van Codrops. Het creëert menu's met meerdere niveaus die vanaf de linkerkant van het scherm naar buiten schuiven en de inhoud naar rechts verschuiven.

Demonstratie | Downloaden

Een van de gebieden die speciale aandacht vereisen bij het ontwikkelen van een interfaceontwerp voor een mobiel apparaat is het navigatiemenu. Als de site veel secties of pagina's heeft, is speciale vaardigheid vereist om alle items in een kleine schermresolutie onder te brengen. Heel vaak verandert de navigatie in een aantal lijnen of een aantal op elkaar gestapelde knoppen. In deze zelfstudie bekijken we één manier om navigatie te maken met jQuery.

Taak

De onderstaande schermafbeeldingen tonen situaties met sjablonen op schermen van mobiele apparaten. Als de navigatie 3 of 4 knoppen heeft, wordt de locatie op één regel opgeslagen. Maar als het menu 6 of meer items bevat, wordt het een lelijke stapel.

Oplossing

Een gebruikelijke manier is om de navigatie om te zetten in een vervolgkeuzelijst op basis van het geselecteerde element. Deze oplossing heeft als nadeel dat het select-element niet met CSS kan worden gestyled. Met Javascript-plug-ins zoals Chosen kunt u het menu aanpassen, of u zult genoegen moeten nemen met systeemstijlen voor de vervolgkeuzelijst. De gebruiker kan ook in verwarring raken wanneer de breedbeeldversie van de menustructuur verandert in een vervolgkeuzelijst op een mobiel apparaat.

2) Uitvoer als blok

Een andere populaire manier is om menu-items te vormen als blokelementen met items verticaal gerangschikt. Deze aanpak neemt echter veel titelruimte in beslag. Als de navigatie veel knoppen bevat, zal de gebruiker door een lange lijst moeten scrollen om bij de informatie te komen.

3) Menupictogram

En de laatste methode die we in onze tutorial zullen bekijken, is het gebruik van het menupictogram om navigatie in te schakelen. Deze aanpak bespaart ruimte op de pagina (wat belangrijk is voor een mobiel apparaat) en geeft volledige controle over het uiterlijk met behulp van CSS. Het menupictogram en de navigatie zelf kunnen worden gepresenteerd in overeenstemming met de algemene stijl van de site.

Mobiele navigatie ingeschakeld met jQuery

In deze tutorial laten we u zien hoe u navigatie voor het kleine scherm maakt. jQuery zal worden gebruikt om het menupictogram voor te bereiden en navigatie mogelijk te maken. Er zijn geen extra HTML-tags vereist om de navigatie te laten werken.

Ons menu zal een eenvoudige structuur gebruiken:

• Knop
• Knop

Het menu vereist JavaScript-code om te functioneren. De functie bereidt het element voor in het . Wanneer een bezoeker op het #menu-icon element klikt, schuift de navigatie uit.

jQuery(document).ready(function($)( /* Bereid het menupictogram voor */ $("#nav-wrap").prepend("Menu"); /* Schakel navigatie in */ $("#menu-icon " ).on("klik", function())( $("#nav").slideToggle(); $(this).toggleClass("actief"); ));

Als gevolg van het script zal de structuur van het document veranderen:

Menu

• Knop
• Knop

Onze demo maakt gebruik van vrij eenvoudige CSS-code. Het belangrijkste punt is weergegeven in de onderstaande figuur. Het element #menu-icon heeft aanvankelijk de eigenschap display:none. Gebruikt een mediaquery om #menu-icon te wijzigen in display:block als de viewport-breedte kleiner is dan 600px.

Het resultaat is navigatie met de gepresenteerde functionaliteit: