med et ID af "fade", som vil være vores sorte dækning, der mørker indholdet, når menupunktet klikkes.
Endelig kalder vi jQuery fra Google og vores egen scriptfil, hvor vi arbejder lidt. Men først lad os gå igennem stilarterne.
Styling med CSS
Så vi går ikke igennem alle CSS-stilarter (hvis du vil have, at du kan inspicere eller se kilden på demoen), da de hovedsagelig bruges til den generelle styling af siden, hvilket ikke er målet af denne artikel. Vi vil bryde det op og se på nogle få stykker kode, der er vigtige for effekten. Så først og fremmest:
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 vil sparke ting ved at sørge for, at hvis brugerens browser ikke har JavaScript til rådighed (det er dette klassenavn på HTML-elementet, som vi så tidligere ved hjælp af Modernizr), så viser vi # fallback-nav i overskriften, og Vi gemmer #fade DIV samt navigationsikonet. Dette er vores downback-løsning, så back-menuen skal styles på en mere traditionel måde. Vi gemmer også denne løsning, hvis JavaScript er tilgængeligt, som du kan se i den sidste linje.
#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 dette afsnit styler vi vores menupunkt i overskriften, det er ret simpelt, bare at give det en relativ position og et højt z-indeks (som vil være nyttigt senere, når resten af indholdet bliver falmet ud, vil det forblive på top). Vi ændrer også farven til hvid, når den har en klasse "åben", som vi vil tilføje og tage væk ved hjælp af jQuery. Vi kan også se, at den enkelte div med et id "fade" strækker sig for at fylde hele skærmen og fyldes med en solid sort med 50% gennemsigtighed. Hvis brugeren ikke har nogen JavaScript, vil dette sorte filter blive gemt, hvis ikke, gemmer vi det med jQuery. Lad os nu se på menuen selv:
#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å sidst men ikke mindst hovedmenuen. Jeg skal først og fremmest tilføje, at dette er den forenklede kode, der ville have brug for et par leverandørpræfikser, før de er kompatible med browseren. For at opnå dette anbefaler jeg at bruge et fantastisk værktøj som Autoprefixer at tilføje alle de korrekte præfikser til dig.
Så det bliver sagt, lad os se på hvad det indebærer: først og fremmest er det fast positionering øverst på siden og negativ 250px til højre. Det betyder, at det er der, men bare "off-screen" (da det har en maksimal bredde på 250px). Højden er også 100%, så den fylder hele vinduet fra top til bund. Menuen har også brug for en z-indeks mellem 0 og 9 (over det sorte filter). Så er her når magien sker, den har en skærm: flex; ejendom, samt en anden tilknyttet egenskab af "flex-retning" (som vi har sat til "kolonne" her i stedet for det er standard "række", hvilket betyder, at flex-elementet børnene - linkene i menuen - vil fylde hele højden af dens forælder i lige dele).
Så det har alle været rettet mod menuholderen # main-nav, næste ved styling af de links, vi giver dem en flexværdi på 1. Dette gør, at linkene fylder hele højden ligeligt. Derefter gives disse links også en visningsværdi af 'flex' selv, hvilket betyder at nogle elementer inde i linkene vil blive påvirket af dette. Vi sørger for, at flex-retningen stadig er 'kolonne', og så tilføjer vi en egenskab af 'justify-content: center;'. Dette gør teksten selv inde i linkene centreret også vertikalt (det er derfor der er divs inde i ![]()
tags af # main-nav, som ikke er præcis semantisk, men er en meget hurtig og nem måde at centrere lodret lodret på.)
Nu kan vi ikke se noget, vi lige har gjort helt, endnu, vi skal nu tilføje vores funktionalitet med vores egen scripts.js-fil, som vi tidligere kaldte.
Tilføjelse af funktionaliteten med jQuery
Skriften til denne effekt er meget lille og enkel, men jeg sætter alt her først og derefter forklarer, hvad der sker:
$(document).ready(function() {$('#fade').hide();$('#navicon').click(function() {if($('#navicon').hasClass('closed')) {$('body').animate({left: "-250px"} , 400) .css ({"overløb": "skjult"}); $ ('# main-nav'). Animate ({højre: "0"}, 400) .) .addClass ( 'åben') html ( 'x');. $ ( '# fade') fadeIn (); } ellers hvis ($ ('# navicon'). hasClass ('open')) {$('body').animate({left: "0"} , 400) .css ({"overløb": "rulle"}); $ ('# main-nav'). Animere ({højre: "-250px"}, 400); $ (dette) .removeClass ') .addClass (' lukket ') html (.' ☰. '); $ (' # fade ") fadeout (); }});});
Så først og fremmest skjuler vi det sorte filter. Derefter vil vi alle indeholde en funktion, der er knyttet til et klikhændelse, der er bundet til menuikonet. Når det er klikket, har vi to forskellige tilfælde eller situationer; den ene er, når menuen allerede er skjult (som standard tilstand) eller en, når menuen vises. Så linket til ikonet ikon har et klassenavn af lukket, som vi tilføjede, og vi har også stylet til åbent. Vores første "if" erklæring er, at hvis linket er lukket (derfor standard). Hvis det er tilfældet, så hele
Elementet er animeret 250px til venstre, og stopper rullingen af siden. # Main-nav div bliver også animeret på plads, vi ændrer det rigtige værdi fra -250px til 0. Så fjerner vi klassen af 'lukket' fra linket og tilføjer en af 'åbne' såvel som Ændring af html fra specialkarakteren af tre linjer til en "x". Endelig falder vi i vores sorte filter for at gøre resten af indholdet mørkt. Og det er det! Det giver os menuens åbne tilstand.
Nu er "ellers hvis" erklæringen rettet mod den åbne klasse på menulinjen. Når det gør det, gør vi det omvendte af alt, hvad vi gjorde før, og bevægede kroppen tilbage på plads, samt flyttede menuen på skærmen igen. Fjernelse af klassen "åben" fra menuikonet, tilføjelse af 'lukket' og ændring af indholdet tilbage til ikonet samt udtrængning af vores #fade div. Hvis alt går efter planen, er det sådan, funktionaliteten skal se ud:
Konklusion
Så der har vi det! Det er en måde at gøre denne kølige effekt, som vi ser mere og mere nu med stilen på moderne webdesign, især på mobile designs. Denne effekt er en flot og enkel løsning, der ikke kræver nogen plugins og kan tilpasses fuldt ud til hvert projekts behov. Det har også været en chance for at gøre brug af flexbox samt et par andre nyttige værktøjer. Lad mig vide i kommentarerne, hvis der er noget du ville have gjort anderledes eller bare hvad du troede!
Fremhævet billede / miniaturebillede, skydedør billede via Shutterstock.
