med ett ID för "blekna" som blir vårt svarta omslag som mörkar innehållet när menyikonen klickas.
Slutligen ringer vi i jQuery från Google och vår egen skriptfil, där vi jobbar lite. Men först låt oss gå igenom stilar.
Styling med CSS
Så vi kommer inte att gå igenom alla CSS-stilar (om du vill att du kan inspektera eller "visa källa" på demo) eftersom de i stor utsträckning används för den allmänna utformningen av sidan, vilket inte är målet av denna artikel. Vi kommer att bryta upp det och titta på några bitar av kod som är viktiga för effekten. Så först och främst:
html.no-js #fallback-nav { display: block; }html.no-js .fade { display: none; }html.no-js #navicon { display: none; }html.js #fallback-nav { display: none; }
Vi kommer att sparka saker genom att se till att om användarens webbläsare inte har JavaScript tillgängligt (det är det klassnamnet på HTML-elementet som vi såg tidigare med Modernizr) så visar vi # fallback-nav i rubriken och vi gömmer #fade DIV samt navigationsikonen. Det här är vår backback-lösning så att back-menyn måste stylas på ett mer traditionellt sätt. Vi gömmer också denna lösning om JavaScript är tillgängligt, som du kan se i den sista raden.
#navicon {float: right;font-size: 2em;text-decoration: none;position: relative;z-index: 9; }#navicon.open { color: white; }#navicon.open:hover { color: #e6e6e6; }#fade {position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: #000;opacity: 0.5; }
Så i detta avsnitt stylar vi vår menyikon i rubriken, det är ganska enkelt, bara ger det en relativ position och ett högt z-index (vilket kommer att vara användbart senare när resten av innehållet blir bleknat ut kommer det att fortsätta topp). Vi byter också färgen till vit när den har en klass av "öppen" som vi lägger till och tar bort med jQuery. Vi kan också se att den enskilde diven med en id "blekna" sträcker sig för att fylla hela skärmen och fylld med en solid svart med 50% transparens. Om användaren inte har någon JavaScript så kommer det här svarta filtret att döljas, om inte kommer vi gömma det med jQuery. Låt oss nu titta på menyn själv:
#main-nav {position: fixed;height: 100%;top: 0;right: -250px;background: #222;max-width: 250px;width: 100%;z-index: 5;text-align: center;display: flex;flex-direction: column; }#main-nav a {flex: 1;color: white;border-top: 1px solid #555;text-decoration: none;display: flex;flex-direction: column;justify-content: center; }#main-nav a:hover, #main-nav a.current { background: #3c3c3c; }
Så sist men inte minst huvudmenyn. Jag måste först och främst lägga till att det här är den förenklade koden som skulle behöva en hel del leverantörs prefix innan den är kompatibel med webbläsaren. För att uppnå detta rekommenderar jag att du använder ett fantastiskt verktyg som Autoprefixer att lägga till alla korrekta prefix för dig.
Så att det sägs, låt oss titta på vad det innebär: först och främst har det fast positionering längst upp på den sidan och negativ 250px till höger. Det betyder att det är där men bara "off-screen" (eftersom den har en maximal bredd på 250px). Höjden är också 100%, så att den fyller hela fönstret från topp till botten. Menyn behöver också ett z-index mellan 0 och 9 (ovanför det svarta filtret). Då är här när magiken händer, den har en bildskärm: flex; egendom, samt en annan länkad egenskap av "flex-direction" (som vi har satt till "kolumn" här istället för att det är "rad" som betyder att flex-objektet barnen - länkarna i menyn - fyller hela höjden av dess förälder i lika delar).
Så det är allat inriktat på menyhållaren # main-nav, nästa när vi formaterar länkarna vi ger dem ett flexvärde på 1. Detta gör vad länkarna fyller hela höjden lika. Då får dessa länkar också ett visningsvärde av "flex" själva, vilket innebär att alla element inuti länkarna påverkas av detta. Vi ser till att flex-riktningen fortfarande är "kolumn" och då lägger vi till en egenskap av "justify-content: center;". Detta gör själva texten inuti länkarna centrerad vertikalt också (det är därför det finns div dividerad med ![]()
taggar av # main-nav, som inte är precis semantisk men är ett mycket snabbt och enkelt sätt att centrera objekt vertikalt.)
Nu kan vi inte se någonting som vi just gjort ganska, vi behöver nu lägga till vår funktionalitet med vår egen scripts.js-fil som vi ringde tidigare.
Lägga till funktionaliteten med jQuery
Skriptet för denna effekt är väldigt litet och enkelt, men jag lägger allt här först och förklarar vad som händer:
$(document).ready(function() {$('#fade').hide();$('#navicon').click(function() {if($('#navicon').hasClass('closed')) {$('body').animate({left: "-250px"} , 400) .css ({"overflow": "hidden"}); $ ('# main-nav'). Animera ({höger: "0"}, 400); .) .addClass ( 'öppen') html (x ');. $ (' # fade) FadeIn (); } annars om ($ ('# navicon'). hasClass ('open')) {$('body').animate({left: "0"} , 400) .css ({"överflöde": "bläddra"}); $ ('# main-nav'). Animera ({höger: "-250px"}, 400); $ ') .addClass (stängd) html (. "☰.'); $ (# fade) fadeout (); }});});
Så först och främst gömmer vi det svarta filtret. Därefter kommer allt vi gör innehålla en funktion som är kopplad till en klickhändelse som är bunden till menyns ikonlänk. När det är klickat har vi två olika fall eller situationer; en är när menyn redan är gömd (som standardstatus) eller en när menyn visas. Så menyikonen länken har ett klassnamn av stängt som vi lagt till, och vi stylade också för att vara öppen. Vårt första "if" -förklaring är att om länken är stängd (därför standard). Om så är fallet, då hela
Elementet är animerat 250px till vänster och stoppar rullningen av sidan. Den # main-nav div är också animerad på plats, vi ändrar det är rätt värde från -250px till 0. Då tar vi bort klassen "stängt" från länken och lägger till en av "öppen" såväl som ändra html från specialteckenet i tre rader till en "x". Slutligen svävar vi i vårt svarta filter för att göra resten av innehållet mörkt. Och det är allt! Det ger oss menyns öppna läge.
Nu är "annat if" -uppsättningen inriktad på den öppna klassen på menykopplingen. När det gör gör vi omvänden av allt vi gjorde tidigare, förflyttar kroppen tillbaka till positionen, liksom att flytta menyn på skärmen igen. Ta bort klassen "öppen" från menyikonen, lägg till "stängd" och ändra innehållet tillbaka till ikonen och bleka ut vår #fade div. Om allt går enligt planen så är funktionaliteten att se ut:
Slutsats
Så där har vi det! Det är ett sätt att göra den här snygga effekten som vi ser mer och mer nu med stilen på moderna webbdesign, särskilt på mobila mönster. Denna effekt är en fin och enkel lösning som inte kräver några plugins och kan anpassas till varje projekts behov. Det har också varit en chans att använda flexbox samt några andra användbara verktyg. Låt mig veta i kommentarerna om det finns något du skulle ha gjort annorlunda eller bara vad du trodde!
Utvalda bild / miniatyrbild, skjutdörr bild via Shutterstock.
