Adaptív menü jeleníti meg a menüt, ha megnyomja, a tervezés és fejlesztés a helyszínen

Jó napot 🙂

Ma fogok megosztani veletek az egyik módja, hogyan lehet adaptív menü az oldalon. Ez a menü lehet elhelyezni az adaptív oldalon. Olyan módon, hogy úgy tűnik, egy bizonyos képernyő felbontását. Ez a cikk a legegyszerűbb példa egy ilyen menü.

Ez a menü alkalmaztam és honlapján, és úgy tűnik, a mobil eszközök, hanem a szokásos menü található, amely a kupakot. Ez a menü hasznos a mobil eszközök, azaz, hogy nem szükséges a törzs, hogy a pontokat. Minden működik, depresszióban, mert nincs mutatva az egérrel a mobileszközökön.

A példában megmutatom, hogyan kell nézni a menüben, akkor megjeleníti az időt, de aztán megmutatom, hogyan mutassa csak a mobileszközökön. Nos, ne késlekedj, folytassa az utasításokat.

Étlapunkon fogja használni jQuery miért az elején meg kell győződnie arról, hogy a könyvtár csatlakozik az interneten. Legvalószínűbb, ha használ valamilyen rendszer, ez már megtörtént, de még nézi a forráskód az oldal megjelenését, ha van egy vonal, amely így néz ki:

Ha ez a sor nincs jelen, akkor kihagyhatja ezt a lépést még, de ha van a végén a menü nem működik, ezt a sort és a sapka vagy a pincébe, mielőtt a menü script.

A munka a jövő menü, akkor kell egy kis script, hogy lehet csatlakoztatni, illetve egy külön fájlban, vagy egyszerűen a kódot. Ha a csatlakozás egy külön fájlban, akkor hozza létre, például script.js és add meg a kódot. Megadása után az út, csatlakoztassa megfelelően. Például ha a js mappát, amely közel van a fejléc és a lábléc fájlok elérési útját kell - js / script.js

Ha azt szeretnénk, hogy a kódot beilleszteni a test egy weboldal, amely magába zárja a címkék:

Végül maga a kód:

Ez az egyszerű funkciót érinti 2 blokk. Cím menü, és a test a menüben. Ha meg akarjuk változtatni az osztály nevét, meg kell változtatni azokat a forgatókönyvet.

Most adjuk hozzá a HTML kód menüben. Ez a következőképpen néz ki;

Elemezzük a kódot sorrendben. Minden menü zárva egy közös tároló a ID - alkalmazkodni. Továbbá, a kimeneti egység a címet Étlapunkon, amely egy osztály - menü-címet. Ez a blokk látható mindig, jól, vagy egy adott felbontást, akkor meg kell adni. Ezt mutatja az ikon és a menü nevét. Van könnyű - MENU.

Következő fogunk blokkolására menü magát, és ő osztály - menü-testület. Ezen belül a blokk elhelyezésére minden menüt, amit akarsz. A mi esetünkben például azt egyszerűen be normál ul-listán.

Amint azt említettük, ha szeretné átnevezni osztályok csinálni a fenti szkript.

Az utolsó érintés, hogy a menü start - van hozzá stílusokat. Vedd fel őket olyan helyen, a CSS fájlt, ami lehet hivatkozni, például - style.css.

Mint egy ikon a három megcsúszik használt csak egy kép, a nevét menu.png. Adja meg a helyes utat, ha a kép bármely fájl vagy mappa külön stílus. Itt töltheti le a megtakarítás a számítógépen. Ezt megteheti a jobb egérgombbal, kattintson rá, és adja meg - a „Kép mentése”. Azt is hozzá a képet nevezni menu.png vagy akár használja képeket az ikon helyett font. Hogyan kell csinálni, akkor olvasd el a cikket - Icons from betűtípus Awesome font

A menü kell a munkát állandóan látható. Ha ez van, és meg kell az egészet. A testre megjelenését csak a mobil eszközök, meg kell, hogy néhány változtatást a CSS stílusokat.

Blokkolja a Haydee - alkalmazkodni, meg kell adni tulajdon - display: none; Ezt követően a menü eltűnik, hogy úgy tűnik, egy kis összeget, amit kell, hogy ezt a sort a stílusokat.

Ezek a stílusok azt mutatják, hogy ha a felbontás 480 pixel vagy kevesebb, hogy megmutassuk a menüben. A felbontás módosítható maguknak, és jelzik, hogy mit akar. Ha megjeleníti ezt a menüt, hanem valami más, ami megjelenik a normál méret a helyén, mint én a webhelyén, akkor kell hozzá egy hasonló stílusban és menü, hanem éppen ellenkezőleg.

Ez lesz kezdetben a megszokott ingatlan menü - display: block; és már a 480 (vagy amit megadva) pixelek az ellenkezőjéről - display: none; Azaz a megjelenése adaptív menük, a szokásos eltűnnek.

Például a szokásos menü Haydee - #menu. Ezután a hozzávetőleges stílusok a következők:

Azt hiszem, minden világos. Miután mindent helyesen csináltam, akkor kap a kívánt eredményt. Akkor illik mindent, hogy illeszkedjen az Ön igényeinek és testre tökéletes adaptív menük az Ön honlapján. Gyakran használják ezt a módszert, és soha nem hagyott cserben.

Ez minden, köszönöm a figyelmet. 🙂

Ha hasznos volt a munkámhoz, támogatni tudja a helyszínen :)

Szia kedves barátom

Van AdBlock telepített bővítmény vagy hasonlók. Add oldalamon a fehér listát, és így vnesesh hozzájárulnak kialakulásához. Arról, hogy hogyan tiltsa AdBlock szeretné ezt az ablakot