Efter en lång period av undersökning av mobila responsiva layouter spenderas jag lite tid på att experimentera med olika UI-design. En viktig hotspot på sidan är ofta webbplatsens huvudnavigering. Användare vill ha snabb åtkomst till dina innehållssidor - och det kommer alltid att vara fallet, antingen på en hel bildskärm eller på en mindre mobilmottagande skärm.
För den här handledningen vill jag demonstrera hur vi kan använda en kombination av CSS3-mediafrågor tillsammans med några jQuery för att hantera en glidande navigationsmeny. Länkarna kommer att visas som vanliga på frontend men släppa in i en dold meny efter att ha ändrats under 600px. Istället ser vi en liten meny-nedrullningsikon som kommer att växla öppen och stängd på kommando.
Live Demo - Hämta källkod
Ställa in dokumentet
Topprubrikområdet innehåller ett litet urval av filer som vi behöver för att skapa denna effekt. Jag inkluderar ett anpassat formatblad tillsammans med en kopia av det senaste jQuery-biblioteket som hostas av Google. Alla anpassade JS-funktioner lagras i en extern fil med namnet menu.js.
Det mesta av sidmarkeringen är ganska oväsentligt bortsett från rubrikområdet. Jag har försökt att hålla allt på en fast höjd, men rubriken kan inte använda en fast CSS-egenskap, annars kommer sidan inte att expandera när man skjuter menyn öppen och stängd. Så kopplings- och navigeringslänkarna ställs in av radavstånd värden i CSS.
Sidan h1 Titeln passar bäst som sista elementet så huvudet kommer alltid att hålla sin konstanta höjd. Höger bredvid rubriken finns en ankarlänk med ID #navbtn och detta innehåller ikonen för glidande menylänk. Den kommer endast att visas med hjälp av CSS efter att bredden sjunker under en viss tröskel.
Markup Positioner i CSS
Normalt anser jag inte ens att kräva jQuery när det är möjligt. Det enda problemet med växlande menyer är att vi inte kan göra detta effektivt i CSS. Och jQuery-metoderna kommer att tillämpas inline CSS-format som överrullar standard stilark. Så det kommer ner till att positionera elementen med hjälp av CSS och hjälpa dem att animera ordentligt med JavaScript.
Min standard CSS-webbläsaråterställning innehåller en uppsättning anpassade koder för sidtypografi. Också vår kroppsbakgrundsplatta är PS Neutral sparad från Subtle Patterns. Jag var tvungen att dela upp förpackningsbehållaren och kroppsbehållaren i 2 divs eftersom vi använder sidpolstringen till vänster och höger för att hålla sidan från att växa till 100% bredd. Lägga till marginalvärden på marginal: 0 auto; egendom kommer att leda till att den centrala positioneringen förloras.
Genom att utforma det inre #navbtn kommer att visas dolt tills storleken är lägre än 560px med hjälp av mediafrågor. Allt annat är setup inklusive höjd, bredd och positionering.
Responsive Styles
Det finns bara ett fåtal förändringar jag har gjort när webbläsarfönstret ändras mindre än 560px. Jag tror inte att detta är ett magiskt nummer, det råkar bara vara ett bra område när standardnavigering börjar hoppa mot logotypen. Det här är när vi måste gömma nav-menyn och visa växelikonet.
Det betyder också att man tar bort den absoluta positioneringen från navelementet så att den kommer att göra som ett statiskt block. Nav-ankarlänkarna visas som fulla rader med 100% bredd för snabbare tillgänglighet när du knackar på en mobil skärm. Även de inre sidhuvudena + styckena kommer att ändras lite mindre, tillsammans med inställda linjans höjdvärden.
Interaktioner med JavaScript
Den sista biten av kod i menu.js kan också inkluderas direkt i HTML-dokumentet. Men eftersom vi behöver hantera mer än en enda växelmetod är det renare och effektivare att skilja markeringen från dynamiska effekter. Jag kommer att bryta ner den här filen i avsnitt så att det är lättare att läsa.
Den första stora biten är förmodligen det mest förvirrande. Det handlar om mindre fel när du ändrar storlek på webbläsare från mottagliga till icke-mottagliga och borde inte påverka smartphones alls. Vi bifogar en händelsehanterare till fönsterkontrollen .on () resize. De två distinkta logiska utsagnen kontrollerar mot variabeln som riktar sig på nav-nav-elementet, tillsammans med nav-menyns växelkoppling.
När webbläsaren svarar och användaren växlar menyn öppen / stängd kommer den att lägga till en inline stil attribut. Detta kommer att ha företräde framför allt som skrivs i stilarket och det är ett problem efter att menyn har öppnats och stängts. Navet kommer att ha en permanent stil av display: none; även efter att ha ändrats större än 560px.
Det här är vad den 2: a om {} uttalandet söker efter. När nav och menyknappen är båda gömda så var layouten responsiv, användaren öppnade / stängde menyn och ändrades sedan till vanlig visning. Så vi behöver bara visa nav igen men det finns ett problem. jQuery's show () -metoden kommer också att bifoga stilar inline vilket innebär att när storlek ändras till responsiv, fortsätter nav-menyn permanent. För att fixa detta lägger jag till en klass .keep-nav-stängd. Detta kommer bara att läggas till om naven är stängd och sedan ändrats större - om den är öppen när den lyssnar kommer den att vara öppen när den ändras större och tillbaka igen.
Nu skulle den andra om {} uttalandet vara meningsfullt för varför vi letar efter den här klassen. Det kommer bara att visas efter den andra tiden för att ändra storlek och öppna naven, så vi vet att du istället tar av klassen så att den stannar när du ändrar storlek till en mottaglig bredd. Det är en konstig bugg och jag har ännu inte hittat en mindre eller snabbare lösning för hantering av inline jQuery-stilar, annat än att helt bortse attributet (vilket fortfarande orsakar problem). Så nu går vi vidare och tittar på det sista segmentet av JavaScript.
Båda händelsehanterarna letar efter klickhändelser på olika mål. Den första är låst på alla de olika ankarlänkarna i navigeringsnavigering och sidfot. Href-värdena är hash-symboler (#) som inte går någonstans så jag satte dem bara för att inte ladda något. Det här är liknande när du klickar på nav-växeln eftersom vi inte vill ladda en hash till webbadressen för webbsidan. I stället växlar den responsiva dolda navmenyn öppen och stängd vid 350 millisekunder och ignorerar helt href-värdet.
Live Demo - Hämta källkod