Share
In deze zelfstudie maakt u een uitbreidbaar navigatiemenu aan de zijkant met JavaScript en CSS. Het uiteindelijke product zal verschijnen zoals hieronder getoond:
Om aan de slag te gaan, voegen we wat opmaak toe voor ons zijmenu:
× Over functies Neem contact met ons op
Hier kun je zien dat we een zijmenu-indeling hebben gemaakt met de klas sidenav. Vervolgens hebben we de feitelijke navigatie aan de bovenste balk toegevoegd via een tag en we gebruiken een SVG voor ons zijmenupictogram.
De bij klikken attribuut van het pictogram en sluiten knop activeert wat JavaScript, die we vervolgens zullen toevoegen.
Vergeet niet om alle inhoud van uw website in de. Te plaatsen div container zodat deze naar rechts schuift.
Laten we vervolgens het JavaScript toevoegen om het te maken openNav en closeNav functies.
Ten slotte zullen we onze pagina moeten stijlen met een aantal CSS voor het zijmenu en onze links:
/ * Het zijnavigatiemenu * / .sidenav height: 100%; / * 100% Volledige hoogte * / breedte: 0; / * 0 width - wijzig dit met JavaScript * / positie: fixed; / * Blijf op zijn plaats * / z-index: 1; / * Blijf bovenaan * / top: 0; links: 0; achtergrondkleur: # 111; / * Zwart * / overflow-x: verborgen; / * Deactiveer horizontale schuif * / opvulling boven: 60 px; / * Plaats inhoud 60px vanaf de top * / overgang: 0,5s; / * 0,5 seconden overgangseffect om in de sidenav te schuiven * / / * Het navigatiemenu linkt * / .sidenav a opvulling: 8px 8px 8px 32px; tekstdecoratie: geen; tekengrootte: 25 px; kleur: # 818181; weergave: blok; overgang: 0.3s / * Als je met de muis over de navigatielinks beweegt, verander hun kleur * / .sidenav a: hover, .offcanvas a: focus color: # f1f1f1; / * Positie en stijl van de knop Sluiten (rechterbovenhoek) * / .sidenav .closebtn position: absolute; boven: 0; rechts: 25px; lettergrootte: 36px; marge links: 50px; / * Stijlpagina-inhoud - gebruik dit als u de pagina-inhoud naar rechts wilt duwen wanneer u de navigatie aan de zijkant * / #main transition: margin-left .5s; opent; opvulling: 20px; overloop verborgen; Breedte: 100%; body overflow-x: verborgen; / * Voeg een zwarte achtergrondkleur toe aan de navigatie bovenaan * / .topnav background-color: # 333; overloop verborgen; / * Stijl de links in de navigatiebalk * / .topnav a float: left; weergave: blok; kleur: # f2f2f2; text-align: center; opvulling: 14px 16px; tekstdecoratie: geen; lettergrootte: 17px; / * Verander de kleur van links op hover * / .topnav a: hover background-color: #ddd; de kleur zwart; / * Voeg een kleur toe aan de actieve / huidige link * / .topnav a.active background-color: # 4CAF50; kleur wit; / * Op kleinere schermen, waarbij de hoogte minder is dan 450px, wijzigt u de stijl van de sidenav (minder opvulling en een kleinere lettergrootte) * / @media-scherm en (max-hoogte: 450px) .sidenav padding-top: 15px; .sidenav a font-size: 18px; a svg transition: all .5s ease; &: hover #transform: rotate (180deg); #ico display: none; .menu achtergrond: # 000; Geen weergeven; opvulling: 5px; breedte: 320 px; @ include border-radius (5px); #transition: alle 0,5s gemak; een display: block; kleur: #fff; text-align: center; opvulling: 10px 2px; marge: 3px 0; tekstdecoratie: geen; achtergrond: # 444; &: nth-child (1) margin-top: 0; @ include border-radius (3px 3px 0 0); &: nth-child (5) margin-bottom: 0; @ include border-radius (0 0 3px 3px); &: hover background: # 555;
Notitie: De body overflow-x: verborgen; is vereist om te zorgen dat er geen horizontale schuif verschijnt wanneer u dit gebruikt met uw bestaande CSS.
U kunt nu uw menu bekijken en het eens proberen in uw browser.
Als u het zijmenu JavaScript wilt maken met jQuery, kunt u dit doen door het JavaScript dat ik eerder heb verstrekt te vervangen door het volgende gedeelte:
Accentsconagua
$ ('. topnav a'). klik (functie () $ ('# sideNavigation'). style.width = "250px"; $ ("# main"). style.marginLeft = "250px";); $ ('. closebtn'). klik (functie () $ ('# sideNavigation'). style.width = "0"; $ ("# main"). style.marginLeft = "0";);Als u het menu wilt weergeven zonder dia-animatie, hoeft u alleen maar de CSS-eigenschap aan te passen overgang, zoals weergegeven in een verkort formulier hieronder:
.sidenav transition: 0s; #main transition: margin-left 0s;
Hierdoor wordt de wijziging onmiddellijk weergegeven omdat er geen vertraging is opgegeven in de overgang. De standaard die we hebben gebruikt is 0.5s.
Het maken van een zijmenu kost maar een paar regels code en hoeft niet veel bronnen te gebruiken. Ook als jQuery al op de pagina staat voor andere taken, kan de taak worden gemaakt met iets minder regels code en verder worden aangepast.
Als de code reageert op het werken met verschillende schermresoluties van het apparaat, hoeft u alleen de CSS aan te passen door mediaquery's toe te voegen voor de specifieke gevallen.
Om dit verder te nemen, zou je je menu kunnen stijlen met een CSS-framework zoals Bootstrap of Bulma.
