Share
I denna handledning skapar du en utvidbar sidnavigationsmeny med JavaScript och CSS. Slutprodukten kommer att visas som visas nedan:
För att komma igång, låt oss lägga till lite markering för vår sid meny:
× Om funktioner Kontakta oss
Här kan vi se att vi skapade en sid meny div med klassen sidenav. Därefter lade vi till den faktiska översta navigeringen via a tagg, och vi använder en SVG för vår sida menyikon.
De onclick attributet på ikonen och stängningsknappen utlöser lite JavaScript, vilket vi lägger till nästa.
Kom ihåg att lägga hela webbplatsens innehåll inuti div behållare så att den glider åt höger.
Låt oss sedan lägga till JavaScript för att göra openNav och closeNav funktioner.
Slutligen måste vi ställa in vår sida med några CSS för sidmenyn och våra länkar:
/ * Sidnavigationsmenyn * / .sidenav höjd: 100%; / * 100% Fullhöjd * / bredd: 0; / * 0 bredd - ändra detta med JavaScript * / position: fixed; / * Håll dig på plats * / z-index: 1; / * Håll dig på topp * / topp: 0; vänster: 0; bakgrundsfärg: # 111; / * Black * / overflow-x: hidden; / * Inaktivera horisontell rullning * / vadderings-topp: 60px; / * Placera innehåll 60px från toppen * / övergång: 0.5s; / * 0,5 sekunders övergångseffekt för att glida i sidenav * / / * Navigationsmenyn länkar * / .sidaav en padding: 8px 8px 8px 32px; text-dekoration: ingen; typsnittstorlek: 25px; färg: # 818181; display: block; övergång: 0.3s / * När du mus över navigeringslänkarna, ändra färg * / .sidaav a: sväva, .offcanvas a: fokus color: # f1f1f1; / * Placera och stila stängningsknappen (övre högra hörnet) * / .sidenav .closebtn position: absolute; topp: 0; höger: 25px; typsnittstorlek: 36px; marginal-vänster: 50px; / * Stil sidinnehåll - använd det här om du vill trycka sidinnehållet till höger när du öppnar sidnavigering * / #main transition: margin-left .5s; vaddering: 20px; overflow: hidden; bredd: 100%; kropp overflow-x: hidden; / * Lägg till en svart bakgrundsfärg till översta navigeringen * / .topnav bakgrundsfärg: # 333; överflöde: gömd; / * Ställ in länkarna i navigeringsfältet * / .topnav en float: left; display: block; färg: # f2f2f2; text-align: center; vaddering: 14px 16px; text-dekoration: ingen; fontstorlek: 17px; / * Ändra färgen på länkar på sväva * / .topnav a: sväva bakgrundsfärg: #ddd; svart färg; / * Lägg till en färg i den aktiva / aktuella länken * / .topnav a.active bakgrundsfärg: # 4CAF50; färg vit; / * På mindre skärmar, där höjden är mindre än 450px, ändra sidans stil (mindre vaddering och en mindre teckenstorlek) * / @medias skärm och (maxhöjd: 450px) .sidenav padding-top: 15px; .sidan av font-size: 18px; en svg övergång: alla .5s enkelhet; &: sväva #transform: rotera (180deg); #ico display: none; .menu bakgrund: # 000; display: none; vaddering: 5px; bredd: 320px; @ include border-radius (5px); #transition: alla 0.5 s enkelhet; en display: block; färg: #fff; text-align: center; vaddering: 10px 2px; marginal: 3px 0; text-dekoration: ingen; bakgrund: # 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); &: sväva bakgrund: # 555;
Notera: The kropp overflow-x: hidden; krävs för att säkerställa att en horisontell rullning inte visas när du använder det här med din befintliga CSS.
Nu kan du titta på din meny och prova i din webbläsare.
Om du vill skapa sidmenyn JavaScript med jQuery kan du göra det genom att ersätta JavaScript som jag angav tidigare med följande avsnitt:
Accentsconagua
$ ('. topnav a'). klicka (funktion () $ ('# sideNavigation'). style.width = "250px"; $ ("# main"). style.marginLeft = "250px";); $ ('. closebtn'). klicka (funktion () $ ('# sideNavigation'). style.width = "0"; $ ("# main"). style.marginLeft = "0";);För att få menyn att visas med ingen diabild, gör du bara ändringar i CSS-egenskapen övergång, som visas i förkortad form nedan:
.Sidenav övergång: 0s; #main transition: margin-left 0s;
Detta gör att ändringen visas direkt eftersom det inte finns någon fördröjning som anges i övergång. Den standard vi använde är 0.5s.
Att skapa en sid meny tar bara några rader kod och behöver inte använda mycket resurser. Om jQuery redan finns på sidan för andra uppgifter, kan jobbet också tillverkas med något färre linjer kod och anpassas vidare.
Att göra koden lyhörd för att arbeta med olika skärmupplösningar på en enhet är bara ett sätt att modifiera CSS genom att lägga till mediafrågor för de specifika fallen.
För att ta det här, kanske du vill ställa in din meny med en CSS-ram som Bootstrap eller Bulma.
