Různé běžné a mobilní nabídky ve WordPressu, funkce wp_is_mobile, plugin WP Responsive Menu. Adaptivní navigace: kam umístit nabídku na chytrých telefonech
nový hráč 16. ledna 2017 v 01:28 Mobilní menu pro stránky. Plugin JQuery mmenu- jQuery
V tomto článku si povíme, jak vytvořit menu pro mobilní verzi webu, které by zapadalo do adaptivního designu. Chci vám říci o pluginu pro JQuery s názvem mmenu (můžete kliknout na odkaz ke stažení pluginu a hned uvidíte, jak bude vypadat menu, které vytvoříme). Použijeme plugin, protože postavit si pokaždé vlastní kolo není nejlepší praxe. Naší cestou je používat osvědčené postupy. Pojďme začít.
Spojení. Autor doporučuje používat html 5 doctype, no, tady si myslím, že nepotřebujeme alternativy, používáme je. V oblasti hlavy našeho dokumentu musíme připojit samotný JQuery a dva soubory pluginů, které připojíme:
Pokud potřebujeme nabídku na plátně, musíme zahrnout soubory jquery.mmenu.oncanvas.min.js a jquery.mmenu.oncanvas.css. On-canvas je verze nabídky, která má position:absolute; šířka:100%; výška: 100 %, čímž se roztáhne tak, aby zaplnila celou obrazovku.
- Domov
- O nás
- Dějiny
- Tým
- Naše adresa
- Kontakt
- Domov
- O nás
- Dějiny
- Tým
- Naše adresa
- Kontakt
2. Aby byla podnabídka vždy viditelná, musíte do ní přidat třídu „Inset“.
3. Přidejte třídu "Selected" do položky nabídky, aby byla zvýrazněna.
4. Oddělovače můžete vytvořit následovně
- webová stránka
- Domov
- O nás
- Kontakt
Použil jsem třídu Fixed k nastavení position:fixed
Aby naše mobilní menu fungovalo, zbývá pouze připojit ke stránce následující javascriptový kód:
$(document).ready(function() ( var $menu = $("#moje-menu").mmenu(); var $icon = $("#mmenu-icon"); var API = $menu.data ("mmenu"("click", function() ( API.open(); )); ("je-aktivní" 100) $icon.on("click", function() ( API.close(); )); ; , 100 $icon.on("klikni", function() ( API.open(); ));
Problémy s použitím mmenu Narazil jsem na dva problémy. Nejprve jsem se snažil celý obsah těla zabalit do tagu div, protože to je nutné pro fungování pluginu. Ale v tomto případě z nějakého důvodu skrýval veškerý obsah, který jsem zabalil. Tak jsem to vzdal. Pokud vše v těle nezabalíte do divu, tak to plugin udělá za vás. Problémy ale budou s dvojím spouštěním js skriptů a dalších. Poté jsem okamžitě narazil na druhý problém: plugin nezabaluje nic jiného než div. To znamená, že pokud máte h1 přímo uvnitř těla (body > h1), jako jsem měl například já, tak je mmenu přeskočí a zabalí divy, které jsou za ním. takže přímo Uvnitř těla zbývají pouze divy.Díky tomu mi všechno fungovalo. Doufám, že vám byl tento článek užitečný.
Tagy: responzivní design, layout, jquery pluginy
Navrhuji ke zvážení techniku pro vytvoření jednoduchého, velmi flexibilního nastavení a také docela účinného, adaptivního menu, využívajícího čistě sémantické značení, pro implementaci adaptivního designu, bez připojení javascriptu. Výsledkem je, že pomocí CSS získáme nabídku, kterou lze zarovnat doleva, doprava nebo umístit přesně do středu, zvýraznit aktivní/aktuální položky, nabídku, která se může rychle přeskupit při změně velikosti okna prohlížeče, do rozevíracího vertikálního navigačního panelu, který vypadá skvěle na obrazovkách různých mobilních uživatelských zařízení (tablety, chytré telefony, notebooky a mobilní telefony).
Podívali jsme se na příklad a ujistili se, že naše menu funguje. Tato metoda je obecně velmi užitečná, když nabídka používá velké množství odkazů. Všechna tlačítka můžete snadno seskupit do jednoho atraktivního panelu, který se otevře při najetí myší.
Nejprve si musíme označit celou hlavní strukturu našeho jídelníčku. Vytváříme navigační prvek, což znamená, že je logické a dokonce praktické použít HTML5 prvek, značku se stejnojmennou třídou, která je k němu přiřazena, pro následné formátování stylů CSS, ale i vytváření a absolutní umístění rozbalovací navigační lišta. Aktuální třída ukazuje na aktivní / aktuální odkaz nabídky, jejíž vzhled bude vytvořen pomocí css.
- Domov
- O nás
- Portfolio
- Naše služby
- Kontakty
Jak vidíte, menu je jednoduchý neuspořádaný seznam s určitým počtem odkazů. Počet bodů může být různý, ale i tak není třeba se rozčilovat, vše je v rozumných mezích.
Dále, než zajdeme příliš daleko, chci vám připomenout a vysvětlit těm, kteří nevědí, že HTML5 a mediální dotazy nejsou podporovány verzemi IE staršími než 9 (není to vůbec překvapivé). Abychom se v budoucnu vyhnuli bolestem hlavy a udělali vše správně, existují speciální skripty, s jejichž pomocí můžeme vyřešit problém s kompatibilitou jejich prozíravým připojením k dokumentu v sekci.
Všechno. Vyřešili jsme základní označení, zapsali jsme třídy a přidali berle. Nyní přejděme k definování stylů položek nabídky, tvarování vzhledu a přizpůsobení naší nabídky.
Sada stylů nabídky CSS pro obrazovky stolních monitorů je docela standardní. Nevidím smysl zacházet do podrobností. Chci vás jen upozornit na skutečnost, že jsem místo prvku float:left zadal display:inline-block
- .
- body */ okraj : 0 ; ) .nav .current ( display : block ; /* zobrazí pouze aktuálně aktivní
- items */ ) .nav a ( display : block ; padding : 5px 5px 5px 32px ; text-align : left ; ) .nav .current a ( background : none ; color : #666 ; ) /* při najetí myší na položky nabídky * / .nav ul: hover ( background-image : none ; ) .nav ul: hover li ( display : block ; margin : 0 0 5px ; ) .nav ul : hover current ( background : url ( images/icon-check. png ) no-repeat 10px 7px ) /* responzivní nabídka vpravo */ .nav .right ul ( vlevo : auto ; vpravo : 0 ; ) /* responzivní nabídka uprostřed */ .nav .center ul ( vlevo : 50 % ) okraj-levý : -90px ;
- body */ okraj: 0; ) .nav .current ( zobrazení: blok; /* zobrazí pouze aktuálně aktivní
- items */ ) .nav a ( display: block; padding: 5px 5px 5px 32px; text-align: left; ) .nav .current a ( background: none; color: #666; ) /* při najetí myší na položky nabídky * / .nav ul:hover ( background-image: none; ) .nav ul:hover li ( display: block; margin: 0 0 5px; ) .nav ul:hover .current ( background: url(images/icon-check. png) no-repeat 10px 7px ) /* responzivní nabídka vpravo */ .nav.right ul ( vlevo: auto; vpravo: 0; ) /* responzivní nabídka uprostřed */ .nav.center ul ( vlevo: 50 % levý okraj: -90px;
To je snad vše! Naše úžasné, 100% adaptivní menu je připraveno, jak můžete vidět znovu na příkladu. Pro podrobnější prostudování materiálu si můžete stáhnout zdroje a v klidu, bez zbytečného rozruchu, se pustit do tématu.
Lekce byla připravena pomocí materiálů
Volný překlad a úprava: Andrey /řidič/Práce s vnořenými prvky není jednoduchá, protože řekněme, když přesunete rodičovský prvek spolu s ním, přesunou se i všechny jeho potomky. Proto použijeme několik technik, které podpoří požadované 3D překlady podmenu a jejich potomků. Hlavní myšlenkou je zvýšit hodnotu překladu, aby se zajistilo, že podvrstvy nebudou zobrazeny, když vše trochu posuneme, aby se zobrazily okraje nadřazených prvků. To samozřejmě není nutné v případě, kdy podnabídka pokrývá nadřazený prvek.
Upozorňujeme, že používáme vlastnosti CSS (transform, transition), které fungují pouze v moderních prohlížečích. Příklad alternativy pro nepodporující prohlížeče lze nalézt na konci souboru component.css, který jednoduše zobrazuje nabídku první úrovně. Totéž děláme, pokud neexistuje žádný JS.
Pro menu potřebujeme následující vnořenou strukturu:
Všechny kategorie
- Zařízení Zařízení
- Mobilní telefony Mobilní telefony
- Mobilní telefony Mobilní telefony
Zde je každá úroveň zabalena do tagu div s třídou mp-level . Nebudeme moci použít tento druh pevného umístění na nabídku, protože transformace způsobí, že se bude chovat jako absolutně umístěný prvek, takže budeme muset použít absolutní umístění, což povede k problému nežádoucího chování webu (nabídky rolování a v závislosti na výšce dokumentu).
Abychom se vyhnuli posouvání nabídky a oříznutí v případě, že je obsah webu příliš krátký, použijeme malý trik a přijmeme následující strukturu stránky:
Nyní k prvkům přiřadíme následující styly CSS:
Html, body, .container, .scroller ( výška: 100 %; ) .scroller ( overflow-y: scroll; ) .scroller, .scroller-inner ( pozice: relativní; ) .container ( pozice: relativní; přetečení: skrytý; pozadí: #34495e)
To vám umožní posouvat obsah, když je nabídka mobilní verze webu zavřená, a také se bude rovnat výšce okna prohlížeče. Napodobujeme tedy to, čeho bychom dosáhli pevným polohováním. Samotný plugin lze nazvat takto:
New mlPushMenu(document.getElementById("mp-menu"), document.getElementById("trigger"));
Nebo, pokud by podnabídky měly zavřít předchozí úrovně:
New mlPushMenu(document.getElementById("mp-menu"), document.getElementById("trigger"), (typ: "cover"));
V dnešní době jsou navigační nabídky jQuery více než jen bloky textu s odkazy. V článku jsem sdílel, jak můžete použít JQuery a CSS3 k vytvoření navigační nabídky, která vypadá opravdu skvěle.
S využitím síly JQuery můžeme navigační menu proměnit v dynamické menu. Zatímco v současné době můžete k vytváření dynamické navigace používat pouze CSS3, JQuery dělá nabídky ještě výkonnějšími.
Kromě dynamických funkcí hraje důležitou roli také design. Už jen proto, že to návštěvníci uvidí jako první, když přijdou na váš web.
Pokud je nabídka neprezentovatelná, poskytne uživatelům špatnou uživatelskou zkušenost. Dobrý design menu zase zvýší kvalitu vašeho webu a poskytne lepší uživatelský dojem.
Dnes vám představím 30 skvělých příkladů navigační nabídky jQuery.
1.TlačitPushy je responzivní navigační nabídka bez plátna využívající transformace a přechody CSS. Funguje skvěle na mobilních zařízeních. Určitě se podívejte na demo a určitě se vám bude líbit.
Demo | Stažení
2. Slinky
Toto je další skvělá nabídka jQuery pro vytváření krásných posouvatelných navigačních seznamů. Jeho charakteristickým rysem je malá velikost zdrojových souborů.
Demo | Stažení
3. Pop Menu jQuery
Jedná se o jednoduché responzivní vyskakovací menu s velmi zajímavými funkcemi. Když kliknete na ikonu nabídky, objeví se okno nabídky s ikonami prvků. Podívejte se na ukázku.
Demo | Stažení
4. Posuvníky
Slidebars je framework JQuery pro rychlou a snadnou implementaci aplikačních stylů bez vazby na plátno. Posuvníky také zvládají změny orientace a změnu velikosti.
Demo | Stažení
5. Nabídka jQuery Square
JQuery Menu, které zobrazuje čtvercovou animovanou nabídku webových stránek pomocí JQuery a CSS3. Přesvědčte se o tom sledováním ukázky.
Demo | Stažení
6. Navigace perspektivního zobrazení stránky
Tato navigační nabídka jQuery změní stránku na 3D nabídku. Cílem je vytvořit design mobilní aplikace, ve které se po kliknutí na ikonu nabídky obsah stránky posune na stranu a nabídka se přesune do popředí.
Demo | Stažení
7. SlickNav
Plugin pro vytváření responzivního mobilního menu jQuery s několika úrovněmi a flexibilním, ale jednoduchým nastavením. Kompatibilní s různými prohlížeči, navigace pomocí klávesnice je možná.
Demo | Stažení
8. Menu
Nabídka jQuery pro aplikace s a bez vazby na plátno s vyskakovacími podpoložkami. Díky četným možnostem, doplňkům a rozšířením je možné velmi flexibilní přizpůsobení nabídky.
Demo | Stažení
9. Sidr
Plugin jQuery pro vytváření nabídek a snadné přidávání responzivních funkcí. S Sidr můžete vytvářet různé prvky vašeho webu a také responzivní menu.
Demo | Stažení
10. slimMenu
slimMenu je malý plugin jQuery, který vám pomůže vyvinout responzivní, víceúrovňové navigační nabídky. Co je na tom skvělé, je to, že můžete mít několik různých nabídek a všechny budou plně reagovat.
Demo | Stažení
11.HorizontalNav
Navigační menu jQuery, které umožňuje nastavit vodorovné menu přes celou šířku kontejneru. Tento plugin to velmi usnadňuje. Navíc lze implementovat podporu pro IE7.
Demo | Stažení
12.FlexNav
Toto je první mobilní příklad použití dotazů na média a JavaScriptu k vytvoření skvělých víceúrovňových nabídek s podporou dotykových obrazovek, efektů při najetí myší a navigace pomocí klávesnice.
Demo | Stažení
13. Nabídka jQuery-Cíl
Nabídka jQuery, která spouští události, když najedete myší na položku rozevírací nabídky. Ideální pro vytváření responzivních rozevíracích nabídek, jako je Amazon.
Demo | Stažení
14. SmartMenus
Plugin nabídky jQuery, který nabízí jednoduchý a intuitivní způsob zobrazení nabídek. Vytváří responzivní seznamy nabídek. Funguje na všech zařízeních!
Demo | Stažení
15. Přehazovačka
Shifter je snadno použitelný zásuvný modul jQuery pro mobilní zařízení pro vytváření nabídek snímků, které se vysouvají z pravé strany, když kliknete na tlačítko přepínače. Existuje pouze jedna možnost maxWidth ke konfiguraci. Umožňuje upravit rozlišení/orientaci pro mobilní zařízení.
Demo | Stažení
16. Hamburger
Hamburger je plugin jQuery pro vytvoření nabídky ve stylu aplikace Android, která umístí vyskakovací nabídku na pravý okraj obrazovky. Když je nabídka rozbalená na plnou velikost, překrývá oblast obsahu, ale ne panel akcí.
Demo | Stažení
17. Zaměření
Focucss je navigační nabídka jQuery, která vytváří nabídku postranního panelu bez plátna se skvělými funkcemi rozmazání, které vám pomohou upozornit uživatele na hlavní části webu a méně nápadné sekce budou méně nápadné.
Demo | Stažení
18. Zásuvka
Drawer je plugin jQuery pro vytváření responzivního, animovaného menu, které se po kliknutí vysune ze strany obrazovky. Podobné funkce jste mohli vidět v aplikacích pro Android.
Demo | Stažení
19.Datmenu
Datmenu je prémiová nabídka reagující na jQuery s různými animačními funkcemi CSS3. Na tomto pluginu je skvělé, že je plně přizpůsobitelný pomocí možností js.
Demo | Stažení
20. jPanelMenu
jPanelMenu je krásná a moderní nabídka jQuery, která vám umožňuje vytvořit nabídku navigace v panelu s přechodovými funkcemi animace CSS3. Styl jPanelMenu připomíná mobilní verze Facebooku a Google. Plugin lze použít pro různé mobilní aplikace.
Demo | Stažení
21. Postranní nabídka
Fly Side Menu je skvělý plugin pro navigační menu, který používá CSS3 k vytvoření postranního menu s 3D transformacemi a přechody.
Demo | Stažení
22. Plugin PageScroll jQuery Menu
PageScroll je vlastní mobilní nabídka jQuery doporučená pro použití na libovolném webu i na vstupních stránkách.
Demo | Stažení
23. Nabídka ikon DD
DD Icon Menu je plugin jQuery, který vám umožňuje vytvořit vertikální nabídku ikon umístěnou na okraji obrazovky s dílčími položkami nabídky, které se rozbalí při najetí myší.
Demo | Stažení
24. JQuery Mobile Date Navigation
Nabídka jQuery, která umožňuje navigaci podle dat ve zvoleném rozsahu (týden, měsíc nebo rok). Ideální pro vyžádání informací pomocí volání AJAX.
Demo | Stažení
25. Navobile
Plugin navigační nabídky jQuery, který velmi usnadňuje vytváření mobilních nabídek. Používá přechody CSS k nastavení pozice nabídky na mobilních zařízeních.
Demo | Stažení
26. Víceúrovňová nabídka push
Multi-Level Push Menu je Javascriptová knihovna vytvořená MARY LOU z Codrops. Vytváří víceúrovňové nabídky, které se vysouvají z levé strany obrazovky a posouvají obsah doprava.
Demo | Stažení
Jednou z oblastí, která vyžaduje zvláštní pozornost při vývoji návrhu rozhraní pro mobilní zařízení, je navigační nabídka. Pokud má web mnoho sekcí nebo stránek, je pro umístění všech položek v malém rozlišení obrazovky vyžadována speciální dovednost. Velmi často se navigace promění v hromadu čar nebo hromadu tlačítek naskládaných na sebe. V tomto tutoriálu se podíváme na jeden způsob, jak vytvořit navigaci pomocí jQuery.
ÚkolNíže uvedené snímky obrazovky ukazují situace se šablonami na obrazovkách mobilních zařízení. Pokud má navigace 3 nebo 4 tlačítka, pak se její umístění uloží do jednoho řádku. Když ale menu obsahuje 6 a více položek, stává se z toho nevzhledná hromada.
Řešení
Jedním z běžných způsobů je převést navigaci na rozevírací seznam na základě vybraného prvku. Toto řešení má nevýhodu v tom, že prvek select nelze stylovat pomocí CSS. Javascriptové pluginy, jako je Chosen, vám umožňují přizpůsobit nabídku, nebo si budete muset vystačit se systémovými styly pro rozevírací seznam. Uživatel může být také zmaten, když se širokoúhlá verze struktury nabídky na mobilním zařízení změní na rozevírací seznam.
2) Výstup jako blok
Dalším oblíbeným způsobem je vytvářet položky nabídky jako blokové prvky s položkami uspořádanými svisle. Tento přístup však zabírá hodně místa v názvu. Pokud navigace obsahuje mnoho tlačítek, pak uživatel bude muset procházet dlouhým seznamem, aby se k informacím dostal.
3) Ikona nabídky
A poslední metodou, na kterou se v našem tutoriálu podíváme, je použití ikony nabídky pro povolení navigace. Tento přístup šetří místo na stránce (což je důležité pro mobilní zařízení) a poskytuje plnou kontrolu nad vzhledem pomocí CSS. Ikona nabídky a samotná navigace mohou být prezentovány v souladu s obecným stylem webu.
Mobilní navigace povolena pomocí jQuery
V tomto tutoriálu vám ukážeme, jak vytvořit navigaci pro malou obrazovku. jQuery se použije k přípravě ikony nabídky a povolení navigace. Aby navigace fungovala, nejsou potřeba žádné další značky HTML.
Naše nabídka bude používat jednoduchou strukturu:
Nabídka vyžaduje ke svému fungování kód JavaScript. Funkce připraví prvek v . Když návštěvník klikne na prvek #menu-ikona, navigace se vysune.
jQuery(document).ready(function($)( /* Připravte ikonu nabídky */ $("#nav-wrap").prepend("Menu"); /* Povolit navigaci */ $("#menu-icon" " ).on("click", function())( $("#nav").slideToggle(); $(this).toggleClass("aktivní"); ));
V důsledku skriptu se změní struktura dokumentu:
Jídelní lístek
Naše demo používá poměrně jednoduchý CSS kód. Klíčový bod je znázorněn na obrázku níže. Prvek #menu-icon má zpočátku vlastnost display:none. Používá dotaz na média ke změně #menu-icon na display:block, pokud je šířka výřezu menší než 600 pixelů.
Výsledkem bude navigace s prezentovanou funkcí:
- Zařízení Zařízení
| /* menu */ .nav ( margin : 20px 0 ; ) .nav ul ( margin : 0 ; padding : 0 ; ) .nav li ( margin : 0 5px 10px 0 ; padding : 0 ; list-style : none ; display : inline-block ; * display : inline ; /* ie7 */ ) .nav a ( padding : 3px 12px ; text-decoration : none ; color : #999 ; line-height : 100 % ; ) .nav a : hover ( color : #000 ; ) .nav .current a ( pozadí : #999 ; barva : #fff ; border-radius : 3px ; ) |
/* nabídka */ .nav ( margin: 20px 0; ) .nav ul ( margin: 0; padding: 0; ) .nav li ( margin: 0 5px 10px 0; padding: 0; list-style: none; display: inline-block; *display:inline; /* ie7 */ ) .nav a ( padding: 3px 12px; text-decoration: none; color: #999; line-height: 100%; ) .nav a:hover ( color : #000; ) .nav .current a ( pozadí: #999; barva: #fff; border-radius: 3px; )
Sekce .nav a:hover a .nav .current a jsou zodpovědné za změnu barvy odkazů a pozadí aktivních/aktuálních položek nabídky. V tomto příkladu jsem se nesnažil být příliš chytrý, vše jsem dělal v duchu minimalismu, když najedete na odkaz, změní se barva, text se změní na černou barvu: #000; , a pro aktivní položky jsem přidal pozadí: #999; , nahradil barvu písma bílou barvou: #fff; a okraje trochu zaoblily border-radius: 3px; u výsledného tlačítka. V tomto ohledu můžete fantazírovat a experimentovat podle libosti.
Zarovnejte na střed a dopravaJak jsem uvedl výše, můžeme změnit zarovnání navigačních položek pomocí vlastnosti text-align přidáním několika řádků kódu CSS:
| /* nabídka vpravo */ .nav .right ul ( zarovnání textu : vpravo ; ) /* nabídka uprostřed */ .nav .center ul ( zarovnání textu : střed ; ) |
/* nabídka vpravo */ .nav.right ul ( zarovnání textu: vpravo; ) /* nabídka uprostřed */ .nav.center ul ( zarovnání textu: střed; )
Přizpůsobení jídelníčkuZábava začíná. Naše nabídka v této fázi má gumový formát (šířka se určuje v procentech) a ještě není vůbec adaptivní. Začněte měnit velikost obrazovky a uvidíte, že nabídka je zabudována do chaotické změti tlačítek.
Situaci napravíme pomocí mediálních dotazů. V bodě aplikace dotazu na média na 600px jsem nastavil relativní umístění na pozici: relativní; pro prvek nav, abychom mohli později umístit seznam nabídky
- nahoře v absolutní poloze poloha: absolutní; . Pomocí vlastnosti display: none skryjeme všechny položky nabídky li, ponecháme pouze aktuálně aktivní odkazy s aktuální třídou a přiřadíme jim vlastnost display: block
Když najedete na seskupenou navigační lištu, všechny položky nabídky by se měly zobrazit jako rozevírací seznam, proto definujeme pravidlo .nav ul:hover li pomocí kódu funkce>display: block . U aktivních/aktuálních položek přidáváme ikonu, která je zvýrazní od ostatních.
Pokud potřebujete přesunout nabídku doprava nebo ji vycentrovat, použijte vlastnosti umístění vlevo a vpravo pro seznam ul naší nabídky.
| @media screen and (max-width: 600px) (.nav (pozice: relativní; min-height: 40px;).nav ul (šířka: 180px; odsazení: 5px 0; pozice: absolutní; nahoře: 0; vlevo: 0 ; border : solid 1px #aaa ; pozadí : #FAFAFA url (images/icon-menu.png ) no-repeat 10px 11px : 5px : 0 1px 2px rgba ( 0 , 0 , . 3 ; .nav li ( display : none ; /* skrýt vše |
@media screen and (max-width: 600px) ( .nav ( position: relativní; min-height: 40px; ) .nav ul ( width: 180px; padding: 5px 0; position: absolute; top: 0; left: 0 ; border: solid 1px #aaa background: #FAFAFA url(images/icon-menu.png) no-repeat 10px 11px border-radius: 0 1px 2px rgba(0,0,0,. 3) .nav li ( zobrazit: žádné; /* skrýt vše
