Ebben a cikkben egy példát szeretnék felhívni a figyelmébe a kihúzható menü létrehozására. Ez a példa kirepülő menü a következővel jött létre CSS használatávalés jQuery. A menü akkor jelenik meg felülről, ha rákattint a legfelső közepén található "gombra". A menü elhagyása után az oldal többi része elérhetetlenné válik az egérrel történő kiválasztáshoz. A menü lefelé vagy felfelé való elrejtésének sebességének megváltoztatása nagyon egyszerű, ehhez meg kell változtatni a szkript több sorának értékét: A menü kilépési sebességének megváltoztatásához módosítsa a számértéket a sor: annál lassabb lesz a menübe való be- vagy kilépés hatása. Fontos! Az adatokkal való munkavégzés...

Tovább Ebben a pillanatban Val vel jQuery az oldalon bármit megtehet, csak el kell döntenie, hogy ez szükséges-e az Ön webhelyéhez. Mindannyian arra törekszünk, hogy az oldalt minél felhasználóbarátabbá tegyük, hogy neki kellemes legyen az oldalon navigálni, és minél egyszerűbb legyen. A menü nagy szerepet játszik, amikor a látogató "sétál" az Ön webhelyén. Ebben az oktatóanyagban pedig létrehozunk egy kicsúsztatható menüt, amely elrejthető és megjelenhet, amikor a felhasználónak szüksége van rá.

Érdekes kihúzható menük is:

Példa itt látható:

Letöltés

Ebben az oktatóanyagban fogjuk használni jQuery bővítmény- "jQuery.mmenu.js". Letölthető a linkről - letöltés.

Hogyan kell használni?

HTML rész

Először is összekapcsoljuk a szükséges könyvtárakat és stílusokat:

Ezután határozzuk meg a menü szerkezetét. Példaként, hogy bemutassam, hogyan működik, készítek egy menüt beágyazott elemekkel. De a tiéd lehet még egyszerűbb:

Kicsit a menü fölé helyezzen be egy kapcsolót, hogy a felhasználó meg tudja nyitni/bezárni:

A HTML-struktúra elkészültével most térjünk át a stílusokra.

Jó reggelt mindenkinek, aki elolvassa ezt az anyagot, és ezúttal úgy döntöttem, írok egy másikat jQuery menü, ami nagyon egyszerű kódszerkezetben és nem tölti be az oldalt az oldal görgetése közben. Általában ma együtt fogunk fejlődni kihúzható oldalsó menü oldalhoz. Előtte szeretném elmondani, hogy nagy változások várnak ránk, mindenekelőtt ez az oldal teljes változását érinti, mind a funkcionalitásban, mind a dizájnban.

Tehát ne felejtsen el feliratkozni ránk hogy lépést tarthassunk az eseményekkel, mi pedig nem felejtünk el kedveskedni új és hasznos anyagokkal!) Nos, oké, elragadtattam magam és eltávolodtam a témától) Maradjunk az étlapunkon, és megteszem. próbálj meg többet mondani róla.

HTML. H akkor csatlakozni kell és mi lesz az oldal kerete...

Először a szokásos módon csatlakoztatjuk a stílusfájlt demo.css, stílusfájl font-awesome.min.css ikonjainkat letöltheti a hivatalos oldalról: http://fontawesome.io/ , akkor a könyvtárat is bele kell foglalnunk jQueryés ne feledkezzünk meg magáról a forgatókönyvről sem menü.js

Most alakítjuk ki a keretünket HTML menü jelölése. Ehhez hozzon létre egy címkét navés adj neki egy azonosítót menü amely hozzáad és eltávolít egy osztályt menü nyitva módszer segítségével toggleClass.

Ez az egész konstrukció csak akkor működik, ha az azonosítóval ellátott gombra kattintunk menüToggle.

Most tervezzük meg kicsit az oldalunkat a mi szerzői stílusunkban a projektcsapattól

weboldal

amatőr webprogramozási blog

---

JQUERY. Egy kis kód és semmi több...

Kattintással hozzon létre egy függvényt, és rendeljen hozzá egy azonosítót menüToggle. Ezután rátérünk az azonosítóra menüés osztály hozzáadása, eltávolítása menü nyitva.

$(function()( $("#menuToggle").on("click", function()( $("#menu").toggleClass("menu-open"); )); ))(jQuery);

CSS.A menü helyének megváltoztatásának alapvető tulajdonságai és lehetőségei...

Először is szükségünk van egy azonosítóra menü beállíthat számos szükséges tulajdonságot, például: pozicionálás, elhelyezkedés, szélesség és magasság. Ezt követően, hogy a menü kezdetben előkerüljön és rejtve legyen, előírjuk az osztályt menü nyitva.

#menü (pozíció: rögzített; jobbra: -190px; szélesség: 250px; magasság: 100%; felül: 0; ) #menü.menü megnyitása (jobbra: 0; )

Most a menüblokk keretével, pontosabban az azonosítóval dolgozunk menüTartalomés kötelező tulajdonságokat rendeljen hozzá, mint például: pozicionálás, hely, szélesség, szín, magasság.

#menüTartalom (pozíció: abszolút; bal: 60px; háttér: #2b271a; szélesség: 200px; magasság: 100%; kitöltés felső: 114px; ) #a menü (margó bal: 40px; szín: #00ffff; kijelző: blokk ; betűméret: 20 képpont; vonalmagasság: 40 képpont; szövegdekoráció: nincs; ) #menu a:hover ( szín: #00ff40; ) #menu( -webkit-transition: minden .3s egyszerű; -moz-transition: minden .3s könnyű; -ms-transition: minden .3s könnyű; -o-átmenet: minden .3s könnyű; átmenet: minden .3s könnyű; )

Végül pedig már csak meg kell terveznünk a gombot, és be kell állítani a számára szükséges tulajdonságokat, amelyek közül a döntő: pozicionálás, elhelyezkedés, szélesség és magasság. A szépség érdekében animációt írunk elő átmenet.

#menuToggle ( pozíció: abszolút; felső: 120 képpont; szöveg igazítása: középre; betűméret: 14 képpont; szín: #ffffff; szélesség: 40 képpont; magasság: 40 képpont; vonalmagasság: 40 képpont; kurzor: mutató; háttér: rgba( 0,0,0,0,45); -webkit-transition: minden .1s könnyű be-ki; -moz-transition: minden .1s könnyű be-ki; -ms-transition: minden .1s könnyű be-ki -o-transition: minden .1-es könnyű be-ki; átmenet: minden .1-es könnyű be-ki; ) #menuToggle:hover ( szín: #00ff40; háttér: rgba(0,0,0,0.2); -webkit-transition: minden .1-es könnyű-be-ki; -moz-átmenet: minden .1-es könnyű-be-kimenet; -ms-átmenet: minden .1-es könnyű-be-kimenet; -o-átmenet: minden .1-es könnyű be-ki; átmenet: minden .1 könnyű be-ki; )

Most már csak a dizájnt kell hozzáadnunk oldalunkhoz, hogy gyönyörűen nézzen ki)

Body( background:#757575; ) .rh img( margin: 0 auto; display:block; ) .rh span( color:#fff; display:block; text-align:center; font-size:41px; ) .rh span>p(szín:#f1f3e9; betűméret:15px; ) hr(szegély:0,4px tömör #fff; háttér:#fff; szín:#fff; szélesség:30%; margó:12px automatikus; ) .rh ul ( listastílus:nincs; margó:5px auto; szélesség:54%; ) .rh ul li( float:left; margó:20px; ) .rh ul li a( text-decoration:none; ) .rh ul li a span(padding:13px; ) .rh ul li a span:hover(háttér:#c7c9bd; padding:8px; border: 1px szaggatott #fff; )

P.S.A bal oldali menüpozíció létrehozása...

Ehhez csak hozzá kell adnunk és módosítanunk kell a tulajdonságokat #menü, #menu.menu-openÉs #menuToggle.

#menu (balra: -262px; ) #menu.menu-open (balra: -60px; ) #menuToggle (margó balra: 275px; )

És ez minden, nagyon köszönöm a figyelmet, és ne felejtsen el feliratkozni ránk, valamint hasznos és szükséges tartalmakat megosztani másokkal!)

Szóval, rövid és édes… Az alábbiakban egy egyszerű legördülő menü megvalósításának módja látható. A kódot azonnal kommentálják, hogy egyértelmű legyen. Itt DEMÓ. A lényeg, hogy rákattintunk a ☰ ikonra, és balra felugrik egy menü. A burger ikon keresztté változik, mint a Telegramban 🙂 Majd rákattintunk a keresztre és balra lép a menü. Minden nagyon egyszerű ... Ha szükséges, a kód és a stílusok könnyen frissíthetők, megváltoztathatók a színek és a méretek. Továbbá, ha a menüt a jobb oldalra szeretné mozgatni, akkor a stílusokban egyszerűen cserélje ki a bal oldalt a jobbra. Ismét kísérletezhet a DEMO homokozóban. Egy ilyen menü előnye, hogy a legtöbb sablonba beágyazható.

Itt van maga az elrendezés:

• ITTHON


• RÓL RŐL


• KAPCSOLATOK

További CSS stílusok:

/* stílusok a testnek, itt minden világos */
test (
margó: 0;
párnázás: 0;
font-család: Arial;
betűméret: 12 pont
háttér: #f0f0f0;
}
/*a menü stílusa*/
.hidden-menu(
display:block;
pozíció: rögzített;
list-style:none;
padding: 10px
margó: 0;
box-sizing: border-box;
szélesség: 200 képpont
háttérszín: #2b343c;
magasság: 100%;
felső: 0;
balra: -200 képpont
átmenet: balra .2s;
z-index: 2;


}
.hidden-menu li a (szövegdekoráció: nincs; szín:#cacaca;)
.hidden-menu li a:hover(color:#fff;)
/* beviteli jelölőnégyzet elrejtése */
.hidden-menu-ticker(
kijelző: nincs;
}
/*általános stílusok a hamburger ikonhoz, maga a címke*/
.btn-menu (
szín: #fff;
háttérszín: #fff;
párnázás: 2px
pozíció: rögzített;
felső: 5px;
balra: 5px;
kurzor: pointer;
átmenet: balra .23s;
z-index: 3;
szélesség: 20 képpont
-webkit-transzformáció: translateZ(0);
-webkit-backface-visibility: rejtett;
}
/*általános csíkstílusok*/
.btn-menu span(
display:block;
magasság: 2px;
háttérszín: #2b343c;
margó: 5px 0 0;
átmenet: minden .1s lineáris .23s;
pozíció: relatív;
}
/*a címke tetejére szegezzük az első csíkot*/
.btn-menu span.first(
margó felső: 0;
}
/*ha a hamburgerre kattintasz, mozgasd és csinálj egy másik hátteret a hamburgernek*/
.hidden-menu-ticker:checked ~ .btn-menu (
balra: 160 képpont;
háttérszín: #2b343c;
}
/* és további stílusok váltják a hamburgert, mozgatva a menüt az eseményen - a burger ikonra kattintva */
.hidden-menu-ticker:checked ~ .hidden-menu (
bal: 0;
}
.hidden-menu-ticker:checked ~ .btn-menu span.first (
-webkit-transzformáció: forgatás (45 fok);
felső: 7px;
háttérszín: #fff;
}
.hidden-menu-ticker:checked ~ .btn-menu span.second (
átlátszatlanság: 0
}
.hidden-menu-ticker:checked ~ .btn-menu span.third (
-webkit-transzformáció: forgatás (-45 fok);
felső: -7px;
háttérszín: #fff;
}
/* hát itt a címsor stílusa, Schaub szebb volt :)*/
fejléc(
háttérszín: #fff;
szín: #2487ca;
szöveg igazítása: középre;
kitöltés: 5px
}
h1 (
margó: 0;
párnázás: 0;
betűméret: 17 képpont;
betűsúly: normál
}

Ha kérdése van, tegye fel a megjegyzésekben. Oszd meg a cikket a közösségi médiában. hálózatok. Köszönöm 😉