Pomocou klasického jQuery bolo na túto tému napísaných množstvo článkov. Úlohu som sa pokúsil trochu skomplikovať pridaním možnosti nechať sekcie ponuky otvorené (alebo zatvorené, v závislosti od voľby používateľa) pri pohybe po stránke.
Na vyriešenie tohto problému som sa rozhodol použiť doplnok jQuery Cookie. Výhodou tohto pluginu je, že operácia sa vykonáva na strane klienta, čo následne znižuje zaťaženie servera. Mínus – ak má používateľ vypnutý JS, plugin nebude fungovať. ale túto možnosť Neuvažujem, pretože potom celý zmysel rozbaľovacej ponuky úplne zmizne. Takže, začnime.
Najprv musíme prepojiť samotný rámec jQuery a doplnok jQuery Cookie:
Kód: HTML
Ďalej je označenie. Bude to vyzerať ako jednoduchý zoznam, nič nadprirodzené. Jediná vec, ktorú treba poznamenať, je to v značke
mal by tam byť nadpis, po kliknutí vypadne ponuka:
Kód: HTML
A tak ďalej do nekonečna. Teraz to najzaujímavejšie. Do kódu pridám pár komentárov, aby to bolo približne jasné, chopach
Kód: JS
$(document).ready(function()(
if($.cookie("num_open_ul"))( // skontrolujte, či existuje záznam cookie
if($.cookie("num_open_ul") != 0)( // a tento záznam sa nerovná 0
var number_eq = parseInt($.cookie("num_open_ul")-1);
$(".navigation_body").eq(number_eq).show().prevAll("#navigation h2.navigation_head:first").addClass("active_navigation");
}
};
$("#navigation h2.navigation_head").click(function()( // po kliknutí bude táto funkcia fungovať
if(!$(this).next().is(":viditeľné"))(
$("div.navigation_body").siblings("div.navigation_body").slideUp(500); // ak sú otvorené ostatné, zatvorte všetky okrem aktuálneho
}
$(this).next("div.navigation_body").slideToggle(500).siblings("div.navigation_body").slideUp(500);
$(this).toggleClass("active_navigation").siblings("#navigation h2.navigation_head").removeClass("active_navigation"); // otvorte pridanú triedu na zmenu štýlu
setTimeout(fncookie, 600); //samotný zápis do cookies s oneskorením, aby mal skript čas dokončiť prácu pred zápisom (500 ms - rýchlosť, oneskorenie - 600 ms)
});
function fncookie()( // samotná funkcia nahrávania
varnumber_open_ul = 0;
var i = 0;
$("div.navigation_body").each(function()(
i++;
if($(this).is(":viditeľné"))(
number_open_ul = i;
}
$.cookie("num_open_ul", number_open_ul, (vyprší:3, cesta:"/")); // uložiť 3 dni pre celú stránku.
});
}
});
To znamená, že ak používateľ otvoril ponuku, opustil stránku a vrátil sa na ňu o niekoľko dní, ponuka pre neho zostane otvorená.
A nakoniec nám zostáva malý dotyk: v skutočnosti css štýly. Urobte to podľa svojho vkusu, v príklade som vzal hotový dizajn z jedného z projektov
Kód: CSS
#navigácia(
okraj: 80px automaticky;
šírka: 250px
}
#navigation h2, #navigation h2.navigation_head (
veľkosť písma: 18px;
font-weight: tučnejšie;
farba pozadia: #ffb6c1;
background-image: -webkit-gradient(linear,50% 0.50% 100%,color-stop(0%,#ffe9e9),color-stop(100%,#ffb6c1));
background-image: -webkit-linear-gradient(#ffe9e9,#ffb6c1);
background-image: -moz-linear-gradient(#ffe9e9,#ffb6c1);
background-image: -o-linear-gradient(#ffe9e9,#ffb6c1);
background-image: linear-gradient(#ffe9e9,#ffb6c1);
padding: 5px 3px 6px 3px
okraj: auto;
poloha: relatívna;
}
#navigation h2.navigation_head:after (
pozícia: absolútna;
vpravo: 5px;
farba: #550000;
obsah: "cssb";
}
#navigation h2:hover, #navigation h2.navigation_head:hover (
kurzor: ukazovateľ;
}
.active_navigation(
background-image: -webkit-gradient(linear,50% 0.50% 100%,color-stop(0%,#ffb6c1),color-stop(100%,#ffe9e9)) !dôležité;
background-image: -webkit-linear-gradient(#ffb6c1,#ffe9e9) !dôležité;
background-image: -moz-linear-gradient(#ffb6c1,#ffe9e9) !dôležité;
background-image: -o-linear-gradient(#ffb6c1,#ffe9e9) !dôležité;
background-image: linear-gradient(#ffb6c1,#ffe9e9) !dôležité;
}
.active_navigation:after (
pozícia: absolútna;
vpravo: 5px;
obsah: "cssd" !dôležité;
}
.navigation_body(
displej:žiadny;
}
#navigation ul (
okraj: 0;
výplň: 0;
list-style-type: none;
}
* html #navigation ul li(
výška: 1 %;
}
#navigation div.navigation_body ul li (
ľavý okraj: 10px;
}
#navigation a (
font-family: "Times New Roman";
displej:blok;
farba: #918871;
výplň: 3px
farba pozadia: #ffe3e0;
border-bottom: 1px solid #fff;
text-dekorácia: žiadna;
}
#navigation a:hover(
farba: #585858;
farba pozadia: #ffb6cc;
}
Ak by niekto dával pozor, tu som sa snažil použiť obsah: +/- vlastnosť pri zatvorenej / otvorenej ponuke, ale môžete pridať obrázok alebo akýkoľvek iný dizajn. Tu si môžete pozrieť príklad toho, čo sme urobili
Ako vždy, pripravený počúvať otázky a snažiť sa na ne odpovedať. Všetko najlepšie, všetko najlepšie.
Veľmi často v šablónach nájdete rozbaľovacie navigačné prvky. Vývojári používajú daný typ skryté ponuky na zobrazenie ďalších skrytých odkazov tematicky súvisiacich s hlavnou položkou. Môžete nájsť príklady výsuvných panelov alebo rôznych menu v štýle akordeónu, ktoré implementujú tento princíp navigácie.
Ale v tomto návode vytvoríme jednoduchú rozbaľovaciu ponuku s pomocou jQuery. Bude pracovať s metódou animácie na generovanie oneskorených efektov. Spolu s kódom JavaScript sa používajú aj prechodové efekty CSS3. Výsledkom je prázdne miesto pre navigáciu na stránke.
HTML
Najprv vytvoríme základnú šablónu HTML5. Potreboval by Najnovšia verzia jQuery , ktorý získavame z Google API. Pridajte aj súbor štýlu styles.css ktoré budú zobrazené nižšie:
Teraz zvážte štruktúru, ktorá je postavená na vrchole neusporiadaného zoznamu v hornej časti stránky. Celý zoznam je zabalený do prvku HTML5 pre najlepšie výsledky SEO.
Štruktúra kódu je pomerne jednoduchá. Každá položka zoznamu obsahuje efekt zvýraznenia, keď je v nej kurzor myši. Všetky interné prvky UL sú obsiahnuté v pôvodnej položke zoznamu, takže pri prechode na položky rozbaľovacej ponuky sa nestratí vstupné zameranie.
Štýly navigácie
Šablóna štýlov obsahuje kód na obnovenie predvolených hodnôt vlastností. Mnoho vývojárov obsahuje súbor od Erica Meye, ale pre náš prípad je príliš nepraktický. Okrem toho je kód uložený na inom serveri, ktorý sám o sebe je zlé rozhodnutie v tomto prípade.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, citovať, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, formulár, štítok, legenda, tabuľka, titulok, tbody, tfoot, hlavička, tr, th, td, článok, bokom, plátno, detaily, vložiť, postava, figcaption, päta, hlavička, hgroup, menu, navigácia, výstup, rubín, sekcia, zhrnutie, čas, značka, zvuk, video ( okraj: 0; výplň: 0; okraj: 0; veľkosť písma: 100 %; písmo: zdediť; zvislé zarovnanie: základný riadok; obrys: žiadny; -webkit-font- vyhladenie: antialiased; -webkit-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; ) html ( height : 101 %; ) telo ( pozadie: #eaeaea url("images/bg.png"); veľkosť písma: 62,5 %; výška riadku: 1; rodina písma: Arial, Tahoma, bezpätkové; odsadenie dole : 60px; ) článok, bok, detaily, popis obrázku, obrázok, päta, hlavička, h skupina, menu, navigácia, sekcia ( zobrazenie: blok; ) ol, ul ( štýl zoznamu: žiadny; ) blockquote, q ( úvodzovky: žiadne; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) silné ( písmo -váha: tučné; ) tabuľka ( orámovanie-zbalenie: zbalenie; rozstup medzi okrajmi: 0; ) img ( orámovanie: 0; maximálna šírka: 100 %; )
V kóde je zaujímavá vlastnosť -webkit-font-smoothing. Je navrhnutý tak, aby vyhladzoval písma pri spúšťaní kódu v prehliadačoch pod Ovládanie Mac OSX alebo iOS.
Teraz prejdime k nášmu menu.
#ddmenu ( display: block; width: 100%; height: 80px; margin: 0 auto; padding: 0 15px; background: #fff; border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.15 ); box-shadow: 0 1px 1px rgba(20, 20, 20, 0,2); kurzor: ukazovateľ; obrys: žiadny; váha písma: tučné; farba: #8aa8bd; ) #ddmenu li ( zobrazenie: blok; pozícia: relatívne; float: left; font-size: 1,45em; text-shadow: 1px 1px 0 #fff; border-right: 1px solid #dae0e5; ) #ddmenu li a ( display: block; float: left; padding: 0 12px ; výška riadku: 78px; váha písma: tučné; ozdoba textu: žiadna; farba: #6c87c0; -prechod webkitu: všetky 0,2 s lineárne; -moz-prechod: všetky 0,2 s lineárne; -o-prechod: všetky 0,2 s lineárne; prechod: všetky 0,2 s lineárne; ) #ddmenu li:hover > a ( farba: #7180a0; pozadie: #d9e2ee; ) #ddmenu ul ( pozícia: absolútna; hore: 88px; šírka: 130px; pozadie: # fff; display: none; margin: 0; padding: 7px 0; list-style: none; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px rgba(0, 0, 0, 0,2); )
Pridanie selektora #ddmenuul zvýrazniť všetky vnútorné prvky v každej položke zoznamu, pretože je dôležité určiť ich vzdialenosť pomocou absolútne umiestnenie. Pridávame tiež lineárny prechod pre všetky odkazy, ktorý sa zobrazí, keď na ne umiestnite kurzor myši.
Teraz sa pozrime na vytvorenie ukazovateľa horného prvku. Tvorí sa pomocou vlastnosti rotácie a univerzálneho boxu s tmavým pozadím pre tieň. Pri posunutí polohy je jeden prvok našej štruktúry umiestnený nad druhým a tvorí vizuálnu reprezentáciu ukazovateľa v rozbaľovacej ponuke.
#ddmenu ul:after ( content: ""; šírka: 0; výška: 0; pozícia: absolútna; spodok: 100 %; vľavo: 8px; border-width: 0 8px 8px 8px; border-style: solid; border-color : #fff transparent; ) #ddmenu ul:before ( content: ""; šírka: 0; výška: 0; pozícia: absolútna; spodok: 100 %; vľavo: 4px; šírka-okraja: 0 10px 10px 10px; border-style : plná; farba okraja: rgba(0, 0, 0, 0,1) transparentná; ) #ddmenu ul li ( displej: blok; šírka: 100 %; veľkosť písma: 0,9em; tieň textu: 1px 1px 0 #fff ; ) #ddmenu ul li a ( display: block; width: 100%; padding: 6px 7px; line-height: 1.4em; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; - o-prechod: všetky 0,2 s lineárne; prechod: všetky 0,2 s lineárne; ) #ddmenu ul li a:hover ( pozadie: #e9edf3; )
JavaScript
Prvá časť kódu zachytáva kliknutia na odkazy a štandardne zastavuje ich spracovanie (načítavanie stránok na URL).
Druhá časť kódu robí všetko kúzlo. Pripájame obslužnú rutinu udalosti pre proces prechodu na položku zoznamu. Obslužná rutina zastaví práve aktívnu animáciu a zobrazí novú položku pomocou .slideDown() . Nastavili sme tiež krátke oneskorenie, aby sme reagovali iba na skutočný výber položky.
Ak sú všetky takéto položky umiestnené pod sebou, je možné, že ponuka bude taká veľká, že jej výška presiahne výšku hlavného obsahu. Zvonku to nebude veľmi pekné, okrem toho je ťažké nájsť niečo v takom súvislom zozname. Ak chcete všetko zoskupiť a zredukovať, musíte urobiť niečo ako posuvné menu.
Princíp posuvného menu spočíva v tom, že položky menu sú rozdelené do skupín a tieto skupiny sú skryté, je viditeľný iba názov skupiny. Po kliknutí na názov sa zobrazí zoznam určitého počtu položiek.
Ako urobiť posuvné menu? Toto nám pomôže - jQuery. S ním bude všetko fungovať hladko a krásne, ako v príklade vyššie. Začnime implementovať posuvné menu a urobme pár vecí.
skript jQuery
Ako obvykle, pri práci s jQuery je potrebné zahrnúť jeho knižnicu. Všetko je ako obvykle, v hlavičke alebo päte sa pripájame, pokiaľ ste to samozrejme predtým neurobili, pre iné skripty.
Po knižnici pridajte skript. ktorý bude vykonávať animáciu. Budú 3 skripty, každý z nich vykonáva animáciu inak.
Tento skript funguje tak, že po kliknutí na názov kategórie sa vytiahne zoznam, no po kliknutí na inú kategóriu sa začne rozbalovať, pričom prvá sa zatvorí. To znamená, že vždy je otvorená len jedna kategória. Ak potrebujete otvorené kategórie, aby neboli zatvorené automaticky, potom nahraďte skript novým skriptom uvedeným nižšie.
Existuje ďalší skript, ktorým môžete nahradiť hlavný. Jeho vlastnosť je taká posúvacie menu pri umiestnení kurzora myši deje. Nie je potrebné klikať, stačí umiestniť kurzor myši na názov kategórie a je to. Vyberte si teda, ktorý skript vám najviac vyhovuje.
HTML značky
Teraz v správne miesto na svojom webe, musíte zobraziť HTML- označenie. No, alebo mierne zmeňte svoj, aby bol podobný ako v príklade.
Nie je nič zložité, všetko je organizované pomocou - ul-zoznamy.
CSS štýly
A nakoniec, aby sme nastavili správny vzhľad našej ponuky, musíme zaregistrovať štýly. Ak s ním nepracujete prvýkrát css, potom si môžete jednoducho prispôsobiť štýly pre seba.
Ul#menu, ul#menu ul( list-style:none; margin: 0px; padding: 0px; width: 250px; -webkit-box-shadow:0px 0px 5px 0px rgba(50, 50, 50, 0,2); - moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0,2); box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0,2);) ul#menu a,ul#rozsah menu (zobrazenie: blok; text-decoration: none;) ul#menu li (margin-top: 1px;) ul#menu li a,ul#menu li span( background: #1ba600; color: #fff; padding: 7px; ) ul#menu li a:hover,ul#menu li span:hover(pozadie: #333;) ul#menu li ul li a( pozadie: #eee; farba: #000; padding-left: 20px;) ul# menu li ul li a:hover(background: #ddd;)
Nič iné netreba. Táto metóda nie je príliš komplikovaný a má niekoľko typov implementácie, všetko závisí od skriptu, ktorý si vyberiete.
To je všetko, ďakujem za pozornosť. 🙂
V tomto návode vám ukážeme, ako vytvoriť bočnú rozbaľovaciu ponuku pre ešte jednoduchšiu navigáciu na webe. Toto menu je obľúbeným trendom moderný web dizajn. Mnoho stránok používa tento typ menu. S ním sa môžete zbaviť chaosu na stránkach projektu, urobiť ho čitateľnejším a zamerať pozornosť používateľov na hlavný obsah.
Je to skvelý spôsob, ako dosiahnuť minimalizmus bez rozptyľovania. Dnes si takéto menu vytvoríme sami.
Ak chcete vytvoriť navigačnú ponuku, najprv sa pozrime na nastavenia:
Najprv musíte načítať Normalize.css a upraviť predvolené štýly prehliadača, uistite sa, že ponuka vyzerá rovnako vo všetkých prehliadačoch. FontAwesome použijeme na zobrazenie šípky pred položkami ponuky s podpoložkami. Na prepnutie tried v ponuke načítame jQuery a presunieme všetok vlastný kód jQuery do script.js. Posledný odkaz je hlavná tabuľka pre webový projekt.
Ikona hamburgera
Ikona hamburgeru je bežným atribútom navigácie na stránke. Často sa vytvára pomocou ikonového písma, ako je FontAwesome, ale v tomto návode pridáme nejakú animáciu, takže ju vytvoríme od začiatku. Naša ikona hamburgeru je značka span obsahujúca tri triedy div, vykreslené ako vodorovné pruhy.
Štýly vyzerajú takto:
Toggle-button ( pozícia: pevná; šírka: 44px; výška: 40px; odsadenie: 4px; prechod: .25s; z-index: 15; ) .toggle-button:hover (kurzor: ukazovateľ; ) .toggle-button .menu -bar ( pozícia: absolútna; okraj-polomer: 2px; šírka: 80 %; prechod: .5s; ) .toggle-button .menu-bar-top ( border: 4px solid #555; border-bottom: none; top: 0; ) .toggle-button .menu-bar-middle ( výška: 4px; farba pozadia: #555; margin-top: 7px; margin-bottom: 7px; top: 4px; ) .toggle-button .menu-bar -bottom ( border: 4px solid #555; border-top: none; top: 22px; ) .button-open .menu-bar-top ( transform: rotation(45deg) translate(8px, 8px); transition: .5s; ) .button-open .menu-bar-middle ( transform: translate(230px); transition: .1s easy-in; opacity: 0; ) .button-open .menu-bar-bottom ( transform: rotation(-45deg) translate(8px, -7px); transition: .5s; )
Ikona má pevnú pozíciu a pri posúvaní stránky sa nemení. Má tiež z-index 15, čo znamená, že bude vždy navrchu nad ostatnými prvkami. Pozostáva z troch pruhov, z ktorých každý zdieľa iné štýly. Preto každú lištu presunieme do triedy .menu-bar. Zvyšné štýly sa presunú do samostatných tried. Kúzlo sa stane, keď do značky span pridáme ďalšiu triedu, ktorá je verejná. Pridáme ho pomocou jQuery takto:
$(document).ready(function() ( var $toggleButton = $(".toggle-button"); $toggleButton.on("click", function() ( $(this).toggleClass("button-open" );)));));
Pre tých, ktorí nepoznajú jQuery, inicializujeme premennú pomocou $toggleButton, ktorá obsahuje našu ikonu. Bez potreby ho uložíme do premennej Používanie JavaScriptu. Potom vytvoríme prijímač udalostí, ktorý počúva kliknutia na ikony. Zakaždým, keď používateľ klikne na ikonu hamburgera, poslucháč udalostí spustí funkciu toggleClass(), ktorá prepne triedu .button-open.
Po pridaní triedy .button-open ju môžeme použiť na zmenu spôsobu zobrazenia prvkov. Používame funkcie CSS3 translate() a rotation(), aby sa horný a spodný pruh otočili o 45 stupňov a stredný pruh sa posunul doprava a zmizne. Tu sú animácie, ktoré si môžete prispôsobiť:
Rozbaľovacia navigačná ponuka
Teraz, keď máte ikonu hamburgeru, urobte ju užitočnou a po kliknutí na ňu vytvorte rozbaľovaciu ponuku. Takto vyzerá označenie ponuky:
Zatiaľ sa nebudeme podrobne zaoberať každým štýlom tohto menu, ale namiesto toho sa zameriame na niekoľko. dôležité body. V prvom rade je to div a trieda .menu-wrap. Pozrite sa na jeho štýly:
Zalomenie ponuky ( farba pozadia: #6968AB; pozícia: pevná; horná časť: 0; výška: 100 %; šírka: 280 pixelov; ľavý okraj: -280 pixelov; veľkosť písma: 1 em; váha písma: 700; pretečenie: automatické ; prechod: 0,25 s; z-index: 10; )
Pozícia je pevná, takže menu zostáva pri posúvaní stránky vždy na rovnakej pozícii. Výška 100 % umožňuje, aby ponuka zabrala celý vertikálny priestor na stránke. Všimnite si, že pole ľavého okraja je nastavené na záporné číslo rovnajúce sa šírke ponuky. To znamená, že ponuka zmizne z výrezu. Aby to bolo opäť viditeľné, vytvoríme ďalšiu triedu prepínačov s jQuery. Náš súbor JavaScript bude vyzerať takto:
$(document).ready(function() ( var $toggleButton = $(".toggle-button"), $menuWrap = $(".menu-wrap"); $toggleButton.on("click", function() ( $(this).toggleClass("tlačidlo-otvoriť"); $menuWrap.toggleClass("menu-show"); ) ); ) );
Pridajte ďalšiu premennú $menuWrap, ktorá obsahuje obal ponuky. Použite rovnaký obslužný program udalosti, aký sme vytvorili predtým. Iba tentoraz vymeníme dve triedy: jednu pre tlačidlo a jednu pre obal ponuky. Hodnota ľavého okraja triedy .menu-show je 0, čím sa pridá tieňový efekt.
Menu-show ( margin-left: 0; box-shadow: 4px 2px 15px 1px #B9ADAD; )
Podponuky a odkazy
Môžete si všimnúť, že jedna z položiek zoznamu má triedu .menu-item-has-children, ktorá obsahuje podmenu. Hneď pod odkazom je tiež značka span s triedou .sidebar-menu-arrow.
span má pseudoprvok::after a obsahuje šípku FontAwesome. V predvolenom nastavení je podponuka skrytá a bude viditeľná iba po kliknutí na šípku. Tu je návod, ako to môžeme urobiť s jQuery:
$(document).ready(function() ( var $sidebarArrow = $(".šipka-postrannej-ponuky"); $sidebarArrow.click(function() ( $(this).next().slideToggle(300); ));));
Keď klikneme na šípku, zavoláme funkciu, ktorá následne zacieli na ďalší prvok hneď po rozpätí (v našom prípade podmenu) a zviditeľní ho. Funkcia, ktorú používame, je slideToggle . Spôsobuje objavenie a zmiznutie prvku. Funkcia v našom príklade má jeden parameter – trvanie animácie.
Položky ponuky v príklade majú efekt vznášania. Je vytvorený pomocou::after pseudo-prvku. Kód vyzerá takto:
Postranný panel ponuky li > a::after ( obsah: ""; zobrazenie: blok; výška: 0,15 em; pozícia: absolútna; hore: 100 %; šírka: 102 %; vľavo: 50 %; transformovať: preložiť (-50 % ); obrázok na pozadí: lineárny prechod (doprava, priehľadný 50,3 %, #FFFA3B 50,3 %); prechod: pozícia na pozadí 0,2 s 0,1 s uvoľnenie; veľkosť pozadia: 200 % automaticky; ) .ponuka-bočný panel li > a:hover::after (pozícia na pozadí: -100 % 0; )
Pseudoprvok ::after obsahuje prvok na úrovni bloku v spodnej časti každého odkazu s plnou šírkou a výškou 0,15 em. Všetko to vyzerá ako podčiarknutie. Zvláštnosťou je, že na čiaru neaplikujeme len farbu pozadia, ale použijeme funkciu linear-gradient() na obrázok na pozadí. Hoci je táto funkcia určená na vytváranie farebných prechodov, farbu môžeme zmeniť zadaním požadovaného percenta.
Postranný panel ponuky li > a::after ( obrázok na pozadí: lineárny prechod (doprava, priehľadný 50,3 %, #FFFA3B 50,3 %); )
Polovica čiary je tu priehľadná a druhá polovica je žltá. Nastavením veľkosti pozadia na 200% zdvojnásobíme šírku nášho boxu. Teraz priehľadná časť zaberá celú šírku odkazu a žltá sa presunie doľava a stane sa neviditeľnou. Pozíciu na pozadí po prejdení meníme na -100 %. Teraz je žltá časť viditeľná a priehľadná časť je skrytá.
Namiesto priehľadnej časti môžete použiť akúkoľvek inú farbu. Môžete tiež experimentovať s prechodmi.
Každý z prvkov, ktoré sme považovali, funguje ako celok. Takéto menu si môžete vytvoriť pomocou akéhokoľvek dizajnu webovej stránky z kolekcie TemplateMonster. Ako vidíte, je to jednoduchšie, ako si myslíte. Veľa šťastia pri vytváraní profesionálnych a užívateľsky prívetivých webových stránok!
Aby ste si v jQuery mohli napísať vlastnú navigáciu vo forme vertikálneho rozbaľovacieho menu s rozbaľovacím zoznamom podkategórií, musíte pochopiť samotný princíp tohto mechanizmu. Najprv sa však pozrime na štruktúru navigácie:
Navigácia
Ako ste možno uhádli, naša rozbaľovacia ponuka je založená na zoznamoch s odrážkami. Pri umiestnení kurzora myši nad značku
- test 1
- test 2
- test 3
- test 4
Ale ako, pýtate sa? Áno, v skutočnosti je to veľmi jednoduché. Najprv pochopme šablónu štýlov nášho navigačného zoznamu, bude vyzerať takto:
Telo ( background: rgb(244, 244, 244); font-family: Verdana; font-weight: 100; ) /*---Navigation---*/ #menu ( width: 200px; margin: 0; padding: 2px; ) #menu li ( list-style-type: none; ) .menu ( position: relativní; background: chocolate; background: -moz-linear-gradient(top, rgb(198, 255, 242), #2AC4B3) ; background: -webkit-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); background: -o-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); border : 1px solid #2AC4B3; ) .menu:hover ( background: #00c; background: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); background: -webkit-linear-gradient( top, rgb(230, 230, 230), #0CBFAB); pozadie: -o-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); ) .rozsah ponuky ( šírka: 11px; výška: 11px; displej: blok; pozícia: absolútna; hore: 8px; vpravo: 10px; kurzor: ukazovateľ; ) .menu ul (šírka: 150px; okraj: 0; odsadenie: 1px; pozícia: absolútna; hore: -1px; vľavo: 198px; ) .menu ul li ( pozadie: čokoláda; pozadie: -moz-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); pozadie: -webkit-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); pozadie: -o-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); okraj: 1px plný #fff; ) .menu ul li:hover ( pozadie: #00c; pozadie: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); background: -webkit-linear-gradient(top, rgb( 230, 230, 230), #0CBFAB); pozadie: -o-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); ) .menu a ( padding: 5px; display: block; text- dekorácia: žiadna; farba: biela; ) .menu a:hover ( farba: biela; ) /*---KONIEC---*/
Zo šablóny štýlov je zrejmé, že rozbaľovací zoznam nie je spočiatku skrytý, ale tento moment opravíme pomocou:
$(document).ready(function()( $(.menu ul").hide(); $(".menu span").css("pozadie", "url("down.png")") ; $("#menu li").hover(function()( $(this).children("ul").show(); /*Ekvivalent $("ul", this).show();* / $(this).find("span").css("pozadie", "url("vpravo.png")"); /*Ekvivalent $("span", this).css("pozadie", "url ("right.png")");*/ ),function()( $(this).children("ul").hide(); /*Ekvivalent $("ul", this).hide (); */ $(this).find("span").css("pozadie", "url("dole.png")"); /*$("span", this).css("pozadie" ", " url("down.png")");*/ )) ))
Teraz sa pozrime bližšie na kód rozbaľovacej ponuky jQuery, pretože. možno to niekomu nebude úplne jasné. Na začiatku je napísaná nasledujúca štruktúra:
$(document).ready(function()( ))
Obsahuje príkazy, ktoré sa musia vykonať po úplnom načítaní stránky. Deje sa tak preto, aby sa neobjavili rôzne druhy chýb, ak nie je možné nájsť žiadny objekt z dôvodu, že ešte nebol načítaný.
$(".menu ul").hide();
Čo znamená tento záznam? Konštrukcia "$()" vám umožňuje vybrať prvky. Preto musíme hneď na začiatku skryť náš rozbaľovací zoznam. Zoberieme konštrukciu „$()“ a napíšeme do nej objekt, ktorý nás zaujíma. V našom prípade to bude tento objekt odrážkový zoznam s triedou „menu“. Ďalej napíšeme metódu „skryť ()“, ktorá nám umožňuje skryť objekt, ktorý nás zaujíma.
$(".rozpätie ponuky").css("pozadie", "url("dole.png")");
Čo robí? Hľadá značku nadradený prvok ktorému je priradená trieda „menu“ a pomocou metódy „css("pozadie", "url("dole.png")") sa vlastnosti štýlu "pozadie" priradí hodnota "url("dole .png")". "down.png" je ikona označujúca, že zoznam je možné rozšíriť.
Potom prichádza konštrukcia, ktorá otvorí náš zoznam, vyzerá takto:
$("#menu li").hover(function()( $(this).children("ul").show(); $(this).find("span").css("pozadie", " url("right.png")"); ),function()( $(this).children("ul").hide(); $(this).find("span").css("pozadie" , "url("dole.png")"); )
Hľadáme značku, ktorej nadradený prvok je priradený id="menu". Nasleduje metóda "hover" a dve funkcie v zátvorkách. Prvá funkcia sa vykoná pri nadržaní kurzora myši a druhá sa vykoná, ak kurzor myši prenechá prvok, ktorý nás zaujíma.
Prvá funkcia hovorí:
$(toto).deti("ul").show(); $(this).find("span").css("pozadie", "url("right.png")");
Konštrukcia „$(this)“ znamená, že nás zaujíma prvok, na ktorom sa nachádzame tento moment namieril (toto z angličtiny toto). A ukázali sme na značku
Potom hľadáme potomkov značky, konkrétne: značka a jej pozadie sa zmení na inú ikonu.
Potom sa napíše funkcia, ktorá urobí všetko tak, ako to bolo pôvodne, keď kurzor myši opustí prvok zoznamu:
Function()( $(this).children("ul").hide(); $(this).find("span").css("pozadie", "url("dole.png")"); )
Aby napísaný kód jQuery fungoval a naša rozbaľovacia ponuka fungovala správne, musíte si stiahnuť knižnicu zo stránky jquery.com a zahrnúť ju tak, že ju napíšete za úvodnú značku
reťazec.OK, teraz je po všetkom! Na záver chcem poznamenať, že ak je vaša stránka dosť vážna, skript sa pravdepodobne spustí príliš neskoro (načítanie stránky bude trvať dlho) a používatelia uvidia, ako sa najskôr úplne otvorí a až potom sa skryje, čo , vidíte, je veľmi škaredý. Preto je potrebné presunúť všetky príkazy jQuery za túto konštrukciu: "$(document).ready(function()())". Bude to vyzerať takto:
$(dokument).ready(funkcia()( )) $(".menu ul").hide(); $(".rozpätie ponuky").css("pozadie", "url("dole.png")"); $("#menu li").hover(function()( $(this).children("ul").show(); $(this).find("span").css("pozadie", " url("right.png")"); ),function()( $(this).children("ul").hide(); $(this).find("span").css("pozadie" , "url("dole.png")"); ))
Pripájame náš skript musia byť presunuté zo značky
úplne na konci, pred záverečnou značkou, alebo môžete skript zahrnúť hneď za zoznam s odrážkami.(stiahnutia: 312)