Vytvořte responzivní nabídku pomocí pluginu Responsive-Nav.js

Existuje několik způsobů, jak vytvořit navigační nabídky s responzivní funkcí, to znamená, že reaguje se všemi zařízeními, kde lze web zobrazit.
Problém ale je, že mnoho z těchto formulářů není plně kompatibilní s některými prohlížeči, pokud se k tomuto úkolu používá CSS3.
Díky Javascriptu můžeme tento typ efektů a animací učinit mnohem kompatibilnějšími s prohlížeči a poskytnout jim tak potřebnou podporu.
V tomto kurzu uvidíme, jak vytvořit plně responzivní navigační panel pomocí pluginu Javascript Responsive Nav.
Tento plugin je open source a můžeme ho použít v jakémkoli projektu, je dodáván s jeho šablonou stylů, kterou je možné přizpůsobit, a je zcela závislý na jiných knihovnách Javascriptu, jako je jQuery.
V HTML budeme potřebovat pouze vytvořit seznam pro použití nabídky a poskytnout mu identifikátor, aby jej bylo možné vybrat pomocí skriptu, který vyžaduje plugin.
Propojíme také plugin Responsive Nav a propojíme jej s dokumentem, který lze stáhnout z jeho oficiální stránky nebo přímo na Github, můžeme stáhnout pouze soubor .js, nebo pokud chcete, můžete si stáhnout celý soubor .zip, za tímto účelem tutoriál Budu používat pouze soubor responzivní-nav.min.js.
Vytváříme demo web, který nazýváme responzivní.html

 Citlivá navigace

Start
O
Služby
Blog
Kontakt

Lorem ipsum bolest sedět, consectetuer adipiscing.

Buďte volní, volní a vulgární

Potom přidáme css do souboru styles.css s následujícím kódem

 body {margin: 0; polstrování: 0; pozadí: # 3d3d3d; rodina písem: Arial, bezpatkové; } img {max-width: 100%; } #content {background-color: # E6E6FA; okraj: 20px auto 0; čalounění: 20px; šířka: 80%; } #nav {barva pozadí: # 4C76AE; } #nav ul {margin: 0; polstrování: 0; šířka: 100%; displej: blok; styl seznamu: žádný; } #nav ul li {šířka: 100%; displej: blok; styl seznamu: žádný; } #nav ul li a {display: block; čalounění: 10px 9px; šířka: 100%; velikost písma: 1,1 em; font-weight: normal; pozadí: # 4c76ae; barva: # cad7ea; textová dekorace: žádná; } #nav ul li a: hover {background: # 00567f; } .js #nav {clip: rect (0 0 0 0); max-výška: 0; pozice: absolutní; displej: blok; přetečení: skryté; zoom: 1; } # nav.opened {max-height: 9999px; } # nav-toggle {font-size: 1.2em; font-weight: bold; polstrování: 3px 9px; okraj vlevo: 15 pixelů; textová dekorace: žádná; poloměr ohraničení: 3px; barva: #fefefe; pozadí: # 4c7ab6; margin-bottom: 15px; }

Až dosud to bude obecný seznam stylů, nyní vytvoříme šablonu stylů, která přizpůsobí nabídku, pokud je obrazovka zmenšena na 640 pixelů nebo méně, proto použijeme některé styly ve vlastnosti Media Queries vlastnosti css3, která bude použita na zařízeních s minimálním rozlišením 640px. Pokud je rozlišení vyšší, použije se definovaný obecný css.

 @mediální obrazovka a (min. šířka: 640 pixelů) {.js #nav {pozice: relativní; } .js # nav.closed {max-height: none; } # nav-toggle {display: none; } #nav ul li a {border-right: 1px solid # 5E88BF; displej: blok; plavat vlevo; šířka: auto; pozadí: žádné; polstrování: 11px 15px; font-weight: normal; textová dekorace: žádná; barva: # E6E6FA; } #nav ul li a: hover {background: # 00567f; barva: # cad7ea; } h1 {barva: # 90b9a0; velikost písma: 2,5em; zarovnání textu: střed; }}

Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod