Skapa en separat meny för mobilversionen. Olika vanliga och mobila menyer i WordPress, wp_is_mobile funktion, WP Responsive Menu plugin
För närvarande jQuery tid Navigationsmenyer är mer än bara textblock med länkar i dem. I delade jag hur du kan använda JQuery och CSS3 för att skapa en navigeringsmeny som ser riktigt cool ut.
Med kraften i JQuery kan vi förvandla navigeringsmenyn till dynamisk meny. Även om nu att skapa dynamisk navigering Du kan bara använda CSS3, JQuery gör menyn ännu mer funktionell.
Förutom dynamiska funktioner, design spelar också en viktig roll. Om så bara för att det är detta som besökarna ser först när de kommer till din webbplats.
Om menyn inte kan presenteras kommer den att ge användarna en dålig användarupplevelse. Bra design menyn i sin tur kommer att öka kvaliteten på din webbplats och ge bästa upplevelsen användarinteraktioner.
Idag presenterar jag för dig 30 fantastiska jQuery exempel Navigeringsmeny.
1. PåträngandePushy är en lyhörd, icke-canvas navigeringsmeny som använder CSS-transformationer och övergångar. Den fungerar utmärkt på Mobil enheter. Se till att titta på demon så kommer du definitivt att gilla den.
Demo | Ladda ner
2. Slinky
Detta är en annan bra jQuery-meny för att skapa vackra rullningsbara navigeringslistor. Hans särdragär den lilla storleken på källfilerna.
Demo | Ladda ner
3. jQuery popmeny
Detta är en enkel responsiv popup-meny med mycket intressanta funktioner. När du klickar på menyikonen dyker ett menyfönster med elementikoner upp. Kolla in demon.
Demo | Ladda ner
4. Skjutreglage
Slidebars är ett JQuery-ramverk för att snabbt och enkelt implementera applikationsstilar utan att vara bunden till en duk. Slidbars hanterar också orienteringsändringar och storleksändring.
Demo | Ladda ner
5. jQuery Square Menu
JQuery Menu, som visar en fyrkantig animerad webbplatsmeny med JQuery och CSS3. Försäkra dig om detta genom att titta på demon.
Demo | Ladda ner
6. Perspektiv sidvynavigering
Denna jQuery-navigeringsmeny förvandlar en sida till en 3D-meny. Tanken är att skapa en design mobil-app, där när du klickar på menyikonen flyttas sidans innehåll åt sidan och menyn förs i förgrunden.
Demo | Ladda ner
7. SlickNav
Plugin för att skapa responsiv mobil jQuery meny med flera nivåer och flexibla men enkla inställningar. Kompatibel med olika webbläsare, navigering med tangentbordet är möjlig.
Demo | Ladda ner
8. Meny
jQuery-meny för applikationer med och utan bindning till duken med popup-underobjekt. Tack vare många alternativ, tillägg och tillägg är det möjligt att flexibel inställning meny.
Demo | Ladda ner
9. Sidr
jQuery plugin för att skapa menyer och enkelt tillägg adaptiva funktioner. Med Sidr kan du skapa olika element din webbplats, samt adaptiva menyer.
Demo | Ladda ner
10. slimMeny
slimMenu är ett litet jQuery-plugin som hjälper dig att utveckla responsiv, flernivåmenyer navigering. Det som är häftigt med det är att du kan ha flera olika menyer och de kommer alla att vara helt responsiva.
Demo | Ladda ner
11.HorizontalNav
jQuery navigeringsmeny som låter dig ställa in horisontell menyöver hela behållarens bredd. Denna plugin gör det väldigt enkelt. Dessutom kan stöd för IE7 implementeras.
Demo | Ladda ner
12.FlexNav
Detta är ett mobilt första exempel på att använda mediafrågor och JavaScript för att skapa en fantastisk meny på flera nivåer med stöd pekskärmar, hovringseffekter och tangentbordsnavigering.
Demo | Ladda ner
13. jQuery Meny-Aim
jQuery-meny som utlöser händelser när musen svävar över en rullgardinsmeny. Idealisk för att skapa responsiva rullgardinsmenyer som Amazons.
Demo | Ladda ner
14. Smarta menyer
En jQuery meny plugin som erbjuder ett enkelt och intuitivt sätt att visa menyer. Skapar adaptiva menylistor. Fungerar på alla enheter!
Demo | Ladda ner
15. Växel
Shifter är ett lättanvänt mobil-först jQuery-plugin för att skapa bildmenyer som glider ut från höger sida när du klickar på växlingsknappen. Det finns bara ett maxWidth-alternativ att konfigurera. Det låter dig justera upplösningen/orienteringen för mobila enheter.
Demo | Ladda ner
16.Hamburgare
Hamburger är ett jQuery-plugin för att skapa bildmenyer i stilen Android App, där en popup-meny finns till höger på skärmen. När du öppnar menyn i full storlek, det överlappar innehållsområdet men inte åtgärdsfältet.
Demo | Ladda ner
17. Fokus
Focucss är en jQuery-navigeringsmeny som skapar en sidofältsmeny utan canvas med coola oskärpa funktioner som kan hjälpa dig att dra användarnas uppmärksamhet till de viktigaste delarna av webbplatsen och göra mindre märkbara avsnitt mindre märkbara.
Demo | Ladda ner
18. Låda
Drawer är ett jQuery-plugin för att skapa en responsiv, animerad meny som dyker upp från sidan av skärmen när du klickar på den. Du kanske har sett liknande funktioner i Android-applikationer.
Demo | Ladda ner
19.Datumeny
Datmenu - premium jQuery responsiv meny Med olika funktioner CSS3-animationer. Det som är bra med detta plugin är möjligheten att fullständig anpassning använder js-alternativ.
Demo | Ladda ner
20. jPanelMenu
jPanelMenu är en vacker och modern jQuery-meny som låter dig skapa en panelnavigeringsmeny med CSS3-animationsövergångsfunktioner. jPanelMenu-stilen liknar mobila Facebook-versioner och Google. Insticksprogrammet kan användas för en mängd olika mobilapplikationer.
Demo | Ladda ner
21. Fly Side Menu
Fly Side Menu är ett coolt navigeringsmenyplugin som använder CSS3 för att skapa en sidomeny med 3D-transformationer och övergångar.
Demo | Ladda ner
22. PageScroll jQuery Menu Plugin
PageScroll är en anpassad mobil jQuery-meny som rekommenderas för användning på alla webbplatser såväl som på landningssidor.
Demo | Ladda ner
23.DD Ikonmeny
DD Icon Menu är ett jQuery-plugin som låter dig skapa vertikal meny ikoner placerade på kanten av skärmen med menyunderpunkter som expanderar när du håller muspekaren över.
Demo | Ladda ner
24. JQuery Mobile Date Navigation
jQuery-meny som låter dig navigera efter datum inom ett valt intervall (vecka, månad eller år). Idealisk för att begära information med AJAX-samtal.
Demo | Ladda ner
25. Navobile
jQuery navigation meny plugin som gör det väldigt enkelt att skapa mobilmenyer. Använder CSS-övergångar för att ställa in menypositionen på mobila enheter.
Demo | Ladda ner
26. Multi-Level Push Menu
Multi-Level Push Menu är ett Javascript-bibliotek skapat av MARY LOU från Codrops. Det skapar menyer på flera nivåer som glider ut från skärmens vänstra sida och flyttar innehållet åt höger.
Demo | Ladda ner
Att arbeta med kapslade element är inte lätt eftersom, säg, när du flyttar ett överordnat element tillsammans med det, flyttar alla dess underordnade element också. Därför kommer vi att använda flera tekniker som kommer att stödja de önskade 3D-översättningarna av undermenyer och deras barnelement. Huvudidén är att öka översättningsvärdet för att säkerställa att underskikten inte visas när vi flyttar allt lite för att visa kanterna på de överordnade elementen. Naturligtvis är detta inte nödvändigt i det fall där undermenyn täcker det överordnade elementet.
Observera att vi använder CSS-egenskaper(omvandla, övergång), som bara fungerar i moderna webbläsare. Exempel alternativt alternativ för webbläsare som inte stöder hittar du den i slutet av filen component.css, som helt enkelt visar menyn på första nivån. Vi gör samma sak om det inte finns någon JS.
För menyn behöver vi följande kapslade struktur:
Alla kategorier
- Enheter Enheter
- Mobiltelefoner Mobiltelefoner
- Mobiltelefoner Mobiltelefoner
Här är varje nivå insvept i en div-tagg med en klass av mp-level . Vi kommer inte att kunna tillämpa den här typen av fast positionering på menyn eftersom omvandlingarna kommer att få den att bete sig som ett absolut positionerat element, så vi måste använda absolut positionering, vilket kommer att leda till problemet med oönskat webbplatsbeteende (meny) rullning och beroende på dokumenthöjd).
För att undvika att menyn rullar och blir avskuren om webbplatsens innehåll är för kort, kommer vi att använda ett litet trick, med följande sidstruktur:
Nu tilldelar vi följande CSS-stilar till elementen:
Html, body, .container, .scroller ( höjd: 100%; ) .scroller ( overflow-y: scroll; ) .scroller, .scroller-inner ( position: relativ; ) .container ( position: relativ; overflow: dold; bakgrund: #34495e )
Detta gör att du kan rulla innehåll när menyn är stängd mobilversion webbplats, och den blir också lika med höjden på webbläsarfönstret. Därmed imiterar vi vad vi skulle uppnå med fast positionering. Själva pluginet kan kallas så här:
Ny mlPushMenu(document.getElementById("mp-menu"), document.getElementById("trigger"));
Eller, om undermenyerna skulle stänga tidigare nivåer:
Ny mlPushMenu(document.getElementById("mp-menu"), document.getElementById("trigger"), (typ: "omslag"));
ny spelare 16 januari 2017 kl 01:28 Mobilmeny för sajten. JQuery mmenu plugin- jQuery
I den här artikeln kommer vi att prata om hur man skapar en meny för den mobila versionen av webbplatsen som skulle passa in i den adaptiva designen. Jag vill berätta om ett plugin för JQuery som heter mmenu (du kan följa länken för att ladda ner plugin och direkt se hur menyn vi kommer att skapa kommer att se ut). Vi kommer att använda pluginet eftersom att bygga din egen cykel varje gång inte är den bästa praxisen. Vårt sätt är att använda bästa praxis. Låt oss börja.
Förbindelse. Författaren rekommenderar att du använder html 5 doctype, ja, här tror jag att vi inte behöver alternativ, vi använder det. I huvudområdet i vårt dokument måste vi ansluta JQuery själv och två plugin-filer, vi ansluter:
Om vi behöver en meny på arbetsytan måste vi inkludera filerna jquery.mmenu.oncanvas.min.js och jquery.mmenu.oncanvas.css. On-canvas är en version av menyn som har position:absolute; bredd:100%; höjd: 100 %, vilket sträcker ut den för att fylla hela skärmen.
- Hem
- Om oss
- Historia
- Laget
- Vår adress
- Kontakt
- Hem
- Om oss
- Historia
- Laget
- Vår adress
- Kontakt
2. För att undermenyn alltid ska vara synlig måste du lägga till klassen "Infogad" till den.
3. Lägg till klassen "Vald" till menyalternativet för att göra den markerad.
4. Du kan skapa separatorer enligt följande
- Hemsida
- Hem
- Om oss
- Kontakt
Jag använde klassen Fixed för att ställa in position:fixed
För att vår mobilmeny ska fungera behöver vi bara ansluta följande javascript-kod till sidan:
$(document).ready(function() ( var $menu = $("#my-menu").mmenu(); var $icon = $("#mmenu-icon"); var API = $menu.data ("mmenu"); $icon.on("klick", function() ( API.open(); )); API.bind("opened", function() ( setTimeout(function() ( $icon.addClass ("is-active"); $icon.on("click", function() ( API.close(); )); , 100 $icon.on("klick", function() (API.open(); ));
Problem med att använda mmenu Jag stötte på två problem. Först försökte jag linda in allt innehåll i kroppen i en div-tagg, eftersom detta är nödvändigt för att pluginet ska fungera. Men i det här fallet gömde den av någon anledning allt innehåll som jag slog in. Så jag gav upp det. Om du inte lindar in allt i din kropp i en div så kommer plugin att göra det åt dig. Men det kommer att finnas problem med dubbelkörning av js-skript och andra. Efter det stötte jag omedelbart på det andra problemet: pluginet omsluter inget annat än en div. Det vill säga, om du har h1 direkt inuti kroppen (kropp > h1), som jag till exempel hade, så hoppar mmenu över dem och lindar in diverna som ligger bakom. Jag löste detta genom att helt enkelt slå in alla andra taggar i div. så att direkt Inuti kroppen finns det bara divs kvar.Detta gjorde att allt fungerade för mig. Jag hoppas att den här artikeln var användbar för dig.
Taggar: responsiv design, layout, jquery-plugins
Många försöker redan anpassa sin webbplats för mobila enheter. De använder de nya funktionerna i CSS3 både på enkla sajter och på mycket mer komplexa. Vissa svårigheter uppstår i processen, och en av de viktigaste är beteendet hos webbplatsmenyn när den visas på små skärmar. Besluta det här problemet, som det visade sig, på flera sätt. För mig har denna uppgift nyligen blivit särskilt relevant, så jag håller ett öga på material på Internet relaterat till adaptiv design. Och nyligen kom jag över bra analys befintliga mönster adaptiv navigering.
Eftersom jag är relaterad till den adaptiva HTML5-mallen Simpliste med öppen källkod bestämde jag mig Allt befintliga möjligheter arbetar med navigering prova det i praktiken. Men förutom att skaffa mig egen erfarenhet så lyckades jag skapa flera belysande exempel, tillgänglig för användning av vem som helst, och förbered också en beskrivning av processen, som jag inbjuder dig att bekanta dig med.
Själva artikeln, som intresserade mig och drev mig till handling, heter Responsive Navigation Patterns. Jag kommer att lita på det, och exemplen kommer att vara sidorna i Simpliste-mallen med implementering av mönster och full beskrivning hur man uppnår samma resultat.
Det finns flera metoder för adaptiv navigering. Låt oss titta på dem i ordning.
Detta tillvägagångssätt används i Simpliste-teman.
Fördelar Enklast att uppnå. Inget behov av att använda Javascript (och inget beroende av det), inga snygga CSS-manövrar krävs. Problemet kan uppstå när antalet menyalternativ är för stort. För det första kan höjden på navigeringsblocket bli sådan att det helt täcker innehållet på webbplatsen på första sidan och användaren måste "scrolla" ner på sidan för att komma till den information han behöver. Och så på varje sida på webbplatsen. För det andra uppstår frågan om flernivåmenyer. Om de helt enkelt är uppradade under varandra, återgår vi till problemet med höjden på navigeringsblocket. För det tredje, om allt inte är förutsett i förväg, kan lägga till nya menyalternativ orsaka obehaglig "flyttning" och överföringar.
Denna metod är inte så vanlig. Dess kärna är att en länk skapas i rubriken, som döljs på breda bildskärmar och visas, om nödvändigt, på mobila enheter. Denna ankarlänk leder till menyn, som finns i sidfoten på sajten. I det här fallet är själva menyn antingen placerad med använder CSS, eller duplicerat i sidhuvudet och sidfoten, döljs menyn i sidhuvudet vid låga upplösningar. Du kan använda antingen text eller någon tydlig ikon som länk.
Fördelar Det finns bara en länk kvar i rubriken, som tar väldigt lite plats. Det finns inget beroende av skript Nackdelar Du måste lägga till ytterligare CSS-kod för att antingen flytta menyn från sidfoten upp till stationära datorer(med position:absolute eller position:fixed), eller dölj menyn i sidhuvudet på mobila enheter om den duplicerar sidfotsmenyn. Dessutom kan känslan av ett skarpt "hopp" när du navigerar genom en sådan länk överraska användaren.
Detta tillvägagångssätt blir allt vanligare. Den använder Javascript, som "kör igenom" alla menyalternativ och skapar en lista från dem. Det vill säga, navigeringen kommer att vara det gränssnittselement som stöds operativ system besökare.
Processen att skriva ett manus för en sådan meny beskrevs i detalj i en artikel på Smashing Magazine. Men du kan använda ett färdigt jQuery-plugin, som jag gjorde i min egen lösning.
Fördelar Stryks kompakt. Känns igen som ett navigeringselement och bekant för användaren. För webbplatser med svår navigering och kapslade menyer kan vara en bra lösning. Nackdelar Det kommer att vara svårt att få ett mobilt OS-gränssnitt att se ut som du vill. På olika enheter utseende och beteendet kommer att vara något annorlunda. Javascript-beroende. Det är obekvämt när man navigerar i riktigt stora storlekar, när alla föremål är uppradade i en lång, monoton rad, även om nivåerna är bevarade.
Detta tillvägagångssätt är också ganska populärt. Speciellt med tanke på möjligheten att experimentera med design. Dess kärna är att i mobilversionen är menyn dold, men en länk eller knapp finns kvar, genom att klicka på vilken du kan öppna navigeringen. Allt fungerar med med hjälp av Javascript. Du kan jämföra tillvägagångssättet med en sidfotslänk, men i I detta fall menyn visas på samma ställe där användaren klickade på knappen, det vill säga högst upp på sidan. Alternativt kan du lämna ett par av de viktigaste länkarna, och när du klickar på knappen expanderar du resten.
Fördelar Du kan se ut som du vill. Användaren överförs inte någonstans. För kapslade menyer är det möjligt att skapa hierarkier som expanderar när man klickar på dem. Möjliga problem med prestanda om du behöver animera menyn.
Detta alternativ har beskrivits som ett separat tillvägagångssätt. Men i verkligheten är det mer en variant av en rullgardinsmeny. Dess kärna är att när du klickar på en länk eller knapp öppnas menyn inte bara, utan flyttas ut från kanten av webbläsarfönstret, och flyttar därigenom innehållet utanför fönstret.
Det gick inte att hitta en färdig lösning så vi skapade en egen.
$(function())( $("body").addClass("js"); $(".link_nav").click(function())( $("body").toggleClass("mobile_nav"); )) ; ))
Egentligen inte många manus.
Huvudarbetet utförs av CSS. När du byter klass för body-taggen menyposition ändras, som placeras med position:fixed, och innehållet får extra utrymme kvar, ger vika för menyn. I Webkit-webbläsare var det till och med möjligt att uppnå animering genom CSS-övergångar, det vill säga på iPhones och Androids kommer menyn att flyttas ut effektivt. Återigen kan du titta och ta in de nödvändiga stilarna
Ett av de vanligaste problemen när man skapar grundläggande webbdesign för mobiltelefoner- Det här Navigeringsmeny. Om sajten har många sektioner och sidor bör detta få dig att tänka på att göra menyn kompakt, den mest koncisa, men samtidigt funktionell och effektiv. Troligtvis kommer din meny antingen ha flera rader, eller så kan knapparna vara placerade ovanpå varandra. Det ser inte särskilt estetiskt tilltalande ut. I den här handledningen kommer vi att titta på hur man gör använder jQuery Du kan rationellt placera menyalternativ och säkerställa snabb navigering.
Problem.Skärmbilderna nedan visar vanliga problem när man bygger menyer. Om det bara finns fyra objekt i menyn kommer de att ligga på samma nivå, men om det finns fem eller sex knappar kommer menyn att visa sig vara flera rader, vilket är ganska opraktiskt.
http://bitfoundry.ca/
Detta är en av de vanligaste lösningarna. Men här finns också fallgropar. Det är inte möjligt att tillämpa stilar på elementen i en sådan meny. CSS-tabell. Men du kan formatera menyn med hjälp av det valda plugin-programmet, annars kommer rullgardinsstilen att förbli standard. Dessutom ser listrutan ganska oprofessionell ut. Även om du är nöjd med det här alternativet kan du lära dig hur du implementerar en sådan meny på din webbplats med hjälp av CSS-tekniker.
http://www.smashingmagazine.com/ 
http://informationarchitects.net/
En annan snabb lösning är att ställa in varje enskilt menyalternativ i form av block som är anordnade vertikalt. Men den här metoden tar upp utrymme från titeln. Om det finns många objekt på menyn är det här alternativet definitivt inte lämpligt för dig. Det är osannolikt att läsare kommer att njuta av att bläddra igenom en lång lista med objekt tills de hittar det webbplatsinnehåll de behöver.
http://forefathersgroup.com/
http://loveandluxesf.com/
http://www.londonandpartners.com/
Detta sista beslutetär att en ikon/knapp används för att växla navigering. Det är det mest optimala för webbplatsanvändare. Den här metoden är också bra eftersom den sparar utrymme (vilket är mycket viktigt för mobiltelefoner), och ger dessutom full frihet för modellering i CSS. Dessutom kan menysymbolen utformas för att matcha webbplatsens övergripande tema.
http://www.sony.com
http://twitter.github.com/bootstrap/
http://zync.ca/
http://www.paulrobertlloyd.com/
Denna handledning visar dig hur du skapar navigeringsmenyn för mobilwebbplatser som beskrivs ovan med hjälp av jQuery. jQuery kommer att användas för att lägga till menysymboler och navigeringsbrytare. Denna teknik kräver inga ytterligare HTML-taggar.
Nedan är den enkla HTML-koden för menyn som används i denna handledning:
< nav id = "nav-wrap" > < ul id = "nav" > < li > < a href = "#" >Knapp< / a > < / li > < li > < a href = "#" >Knapp< / a > < / li > < / ul > < / nav > |
jQuery-kod
Placera en kopia av jQuery och funktionen nedan mellan taggarna< head >. Funktionen lägger till en tagg< div id = "menu-icon" в тег < nav id = "#nav-wrap" >. Och när du klickar på "MENY"-elementet/ikonen öppnas menyn med ytterligare ett element.
jQuery(document).ready(function($)( /* prepend menyikon */ $("#nav-wrap").prepend("Meny"); /* toggle nav */ $("#menu-icon" ).on("klick", function())( $("#nav").slideToggle(); $(this).toggleClass("active"); ));
jQuery(dokument). redo(funktion($)( /* prepend menyikon */ $("#nav-wrap") . prepend("Meny"); /* växla nav */ $("#menyikon"). på ("klicka", funktion () ( $("#nav") . slideToggle(); $(detta). toggleClass("aktiv"); } ) ; } ) ;
|
HTML-koden kommer att se ut som nedan (för att göra detta, klicka på "Visa element" eller se den genererade koden)
Meny
< nav id = "nav-wrap" > < div id = "menu-icon" >Meny< / div > < ul id = "nav" > |