Creați un meniu Responsive cu pluginul Responsive-Nav.js

Există mai multe moduri de a crea meniuri de navigare cu o funcție receptivă, adică care răspunde cu toate dispozitivele pe care site-ul web poate fi vizualizat.
Dar problema este că multe dintre aceste formulare nu sunt pe deplin compatibile cu unele browsere dacă CSS3 este utilizat pentru a face această sarcină.
Datorită Javascript putem face acest tip de efecte și animații mult mai compatibile cu browserele și astfel le putem oferi suportul necesar.
În acest tutorial vom vedea cum se realizează o bară de navigare complet receptivă utilizând pluginul Javascript Responsive Nav.
Acest plugin este open source și îl putem folosi în orice proiect, vine cu foaia sa de stil pentru a-l putea personaliza și este complet dependent de alte biblioteci Javascript, cum ar fi jQuery.
În HTML, va trebui să creăm doar o listă pentru a utiliza meniul și să-i dăm un identificator pentru a-l putea selecta prin scriptul cerut de plugin.
De asemenea, conectăm pluginul Responsive Nav și îl conectăm la document, acesta poate fi descărcat de pe pagina sa oficială sau direct de pe Github, putem descărca numai fișierul .js sau, dacă doriți, puteți descărca întregul fișier .zip, pentru aceasta tutorial Voi folosi doar fișierul responsive-nav.min.js.
Creăm un site web demonstrativ pe care îl numim responsive.html

 Navigare receptivă

start
Despre
Servicii
Blog
a lua legatura

Lorem ipsum pain sit amet, consectetuer adipiscing.

Be egestas, ante et vulputate volutpat

Apoi vom adăuga css într-un fișier styles.css cu următorul cod

 corp {margin: 0; umplutură: 0; fundal: # 3d3d3d; font-family: Arial, sans-serif; } img {max-width: 100%; } #content {background-color: # E6E6FA; margine: 20px auto 0; umplutură: 20 px; lățime: 80%; } #nav {background-color: # 4C76AE; } #nav ul {margin: 0; umplutură: 0; lățime: 100%; display: bloc; list-style: nici unul; } #nav ul li {width: 100%; display: bloc; list-style: nici unul; } #nav ul li a {display: block; umplutură: 10px 9px; lățime: 100%; dimensiunea fontului: 1.1em; font-weight: normal; fundal: # 4c76ae; culoare: # cad7ea; decor-text: nici unul; } #nav ul li a: hover {background: # 00567f; } .js #nav {clip: rect (0 0 0 0); înălțime maximă: 0; poziție: absolută; display: bloc; overflow: ascuns; zoom: 1; } # nav.opened {max-height: 9999px; } # nav-toggle {font-size: 1.2em; font-weight: bold; umplutură: 3px 9px; margine-stânga: 15px; decor-text: nici unul; raza chenarului: 3px; culoare: #fefefe; fundal: # 4c7ab6; marginea-fund: 15 px; }

Până aici va fi foaia de stil generală, acum vom crea o foaie de stil care va adapta meniul dacă ecranul este redus la 640px sau mai puțin, pentru aceasta aplicăm unele stiluri în proprietatea Media Queries a css3 care va fi aplicată pe dispozitive cu rezoluție minimă la 640 px. Dacă rezoluția este mai mare, se va utiliza css-ul general definit.

 @media screen și (min-width: 640px) {.js #nav {position: relative; } .js # nav.closed {max-height: none; } # nav-toggle {display: none; } #nav ul li a {border-right: 1px solid # 5E88BF; display: bloc; plutește la stânga; lățime: auto; fundal: nici unul; umplutură: 11px 15px; font-weight: normal; decor-text: nici unul; culoare: # E6E6FA; } #nav ul li a: hover {background: # 00567f; culoare: # cad7ea; } h1 {color: # 90b9a0; dimensiunea fontului: 2,5em; text-align: centru; }}

V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv