Share
În acest tutorial, veți crea un meniu de navigare extins, cu JavaScript și CSS. Produsul final va apărea după cum urmează:
Pentru a începe, să adăugăm un marcaj pentru meniul nostru lateral:
× Despre caracteristici Contactați-ne
Aici puteți vedea că am creat un div de meniu lateral cu clasa sidenav. Apoi am adăugat navigarea actuală a barei de top prin intermediul unui etichetă și folosim un SVG pentru pictograma noastră din partea laterală.
onclick atributul pictogramei și butonul de închidere va declanșa un JavaScript, pe care îl vom adăuga în continuare.
Nu uitați să puneți tot conținutul site-ului dvs. în interiorul div astfel încât să se alunece spre dreapta.
Apoi, să adăugăm JavaScript pentru a face openNav și closeNav funcții.
În cele din urmă, va trebui să stilăm pagina noastră cu unele CSS pentru meniul lateral și link-urile noastre:
/ * Meniul de navigare lateral * / .sidenav height: 100%; / * 100% înălțime completă * / lățime: 0; / * 0 lățime - modificați acest lucru cu JavaScript * / position: fixed; / * Rămâi în locul * / z-index: 1; / * Rămâneți pe partea de sus * / sus: 0; stânga: 0; fundal-culoare: # 111; / * Negru * / Overflow-x: ascuns; / * Dezactivați parcurgerea orizontală * / umplutura de sus: 60px; / * Plasați conținutul 60px din partea de sus * / tranziție: 0.5s; / * 0,5 secunde efect de tranziție pentru a aluneca în sidenav * / / * Meniu de navigare linkuri * / .sidenav a padding: 8px 8px 8px 32px; text-decoration: nici unul; font-size: 25px; culoare: # 818181; afișare: bloc; tranziție: 0.3s / * Când faceți mouse-ul peste linkurile de navigare, schimbați culoarea * / .sidenav a: hover, .offcanvas a: focalizare culoare: # f1f1f1; / * Poziționarea și stilul butonului de închidere (colțul din dreapta sus) * / .sidenav .closebtn position: absolute; top: 0; dreapta: 25px; font-size: 36px; margin-stânga: 50px; / * Conținutul paginii stil - utilizați această opțiune dacă doriți să împingeți conținutul paginii spre dreapta atunci când deschideți navigația laterală * / #main tranziție: marginea-stânga .5s; padding: 20px; overflow: ascuns; lățime: 100%; corp overflow-x: ascuns; / * Adăugați o culoare de fundal negru în navigația de sus * / .topnav background-color: # 333; overflow: ascuns; / * Stilul legăturilor din interiorul barei de navigare * / .topnav a float: left; afișare: bloc; culoare: # f2f2f2; text-align: centru; padding: 14px 16px; text-decoration: nici unul; font-size: 17px; / * Modificarea culorii legăturilor pe hover * / .topnav a: hover background-color: #ddd; culoarea neagra; / * Adăugați o culoare la linkul activ / curent * / .topnav a.active background-color: # 4CAF50; culoare albă; / * Pe ecrane mai mici, în cazul în care înălțimea este mai mică de 450px, schimbați stilul ecranului sidenav (dimensiune mai mică și dimensiunea fontului) * / @media și (max-height: 450px) .sidenav padding-top: 15px; .sidenav o font-size: 18px; o svg tranziție: toate .5s ușurință; &: mutați #transform: rotate (180deg); #ico display: none; .menu background: # 000; afișare: niciunul; padding: 5px; lățime: 320 pixeli; @ include raza de graniță (5px); #transition: toate ușurința de 0,5s; a display: block; culoare: #fff; text-align: centru; padding: 10px 2px; margine: 3px 0; text-decoration: nici unul; fundal: # 444; & nth-child (1) margin-top: 0; @ include raza de graniță (3px 3px 0 0); &: n-copil (5) margin-bottom: 0; @ include raza de graniță (0 0 3px 3px); &: mutați background: # 555;
Notă: The corp suprasarcinie-x: ascuns; este necesar pentru a vă asigura că o parcurgere orizontală nu apare atunci când utilizați acest lucru cu CSS-ul existent.
Puteți să aruncați o privire la meniul dvs. și să faceți o încercare în browserul dvs..
Dacă doriți să creați JavaScript din meniul lateral utilizând jQuery, puteți face acest lucru înlocuind JavaScript pe care l-am furnizat mai devreme cu următoarea secțiune:
Accentsconagua
$ ('. topnav a'), faceți clic pe (funcția () $ ('# sideNavigation')). $ (".com") () () ($) ("#");Pentru a face ca meniul să apară fără animație de diapozitive, modificați pur și simplu proprietatea CSS tranziție, după cum se arată într-o formă abreviată mai jos:
.sidenav tranziție: 0s; #main tranziție: marginea-stânga 0s;
Aceasta va face schimbarea să apară instantaneu, deoarece nu există o întârziere specificată în tranziție. Valoarea implicită pe care am folosit-o este 0.5s.
Crearea unui meniu lateral durează doar câteva rânduri de cod și nu necesită utilizarea multor resurse. De asemenea, dacă jQuery este deja pe pagină pentru alte sarcini, lucrarea poate fi făcută cu linii de coduri puțin mai mici și personalizate în continuare.
Efectuarea codului receptiv pentru a lucra cu diferite rezoluții ale ecranului dispozitivului este doar un caz de modificare a CSS prin adăugarea de interogări media pentru anumite cazuri.
Pentru a continua acest lucru, vă recomandăm să personalizați meniul cu un cadru CSS, cum ar fi Bootstrap sau Bulma.
