Jak vytvořit responzivní menu? Příklady. Responzivní menu na CSS3
Všichni weboví vývojáři už dávno vědí, že weby je třeba udělat tak, aby byly responzivní, ale ne každý ví, jak to udělat správně. V této lekci se naučíte, jak vytvořit responzivní menu pro web.
Pro názornost uděláme jednu sekci s velkým obrázkem na pozadí, skládající se ze záhlaví s logem a vodorovného menu.
Úkol je jasný, uvnitř tagu sekce bude hlavička webu, uvnitř kterého bude blok div s logem a navigační lišta nav. Bude použit jako kontejner pro nabídku seznamů s odrážkami ul s položkami nabídky-odkazy a .
- Domov
- Vyhledávání
- Služby
- Zprávy
- Fotografie
- Pravidla
Struktura HTML vypadá jako obvykle velmi jednoduše – čistý kód a nic nadbytečného, hezky se na to kouká. Pokud se však podíváte na výsledek v prohlížeči, budete chtít rychle otevřít soubor stylů a začít věci vypadat lépe.
To je to, co teď uděláme.
Styling sekce - sekceV našem případě sekce zabírá první obrazovku počítače a štítek sekce je vyplněn velkou fotografií na pozadí, na které budou umístěny všechny ostatní prvky.
Sekce (
pozadí: url(bg.jpg);
}
Musíme zajistit, aby pozadí, aniž by narušilo proporce fotografie, vyplnilo veškerý volný prostor na jakémkoli zařízení.
Velikost pozadí: obálka;
výška: 100vh;
Při prohlížení na velkých monitorech, pokud není fotografie dostatečně velká, se začne množit. Zakažme opakování na pozadí.
Opakování na pozadí: bez opakování;
Na mobilních telefonech bez vystředění pozadí může být oříznuto.
Pozice pozadí: střed uprostřed;
Sekce je připravena, do ní napíšeme styly pro záhlaví.
Pojďme trochu předskočit a uvidíme, z jakých bloků se bude hlavička skládat – jedná se o div blok s logem a navigační navigační blok.
Jak postavit dva bloky za sebou, protože bloky ve své přirozené podobě stojí jeden pod druhým? Metoda Flexbox si s tímto úkolem dokonale poradí – zarovná a zarovná jej vzhledem k kontejneru záhlaví tak, jak potřebujeme.
záhlaví(
displej: flex;
justify-content: mezera-mezi;
align-items: center;
}
Vlastnost box-shadow vykresluje spodní stín pod záhlaví, čímž vizuálně odděluje záhlaví webu od obsahu. Je vhodnější nastavit výšku záhlaví nikoli v pixelech, ale v relativních jednotkách, například v procentech, pak budou zachovány proporce prvků webu na jakékoli obrazovce.
Výška: 18 %;
box-shadow: 0 5px 15px rgba(0,0,0,.2);
Vidíme výsledek flexboxu a stínu, který se objeví níže.
Nyní je logo přitisknuto k levému okraji okna prohlížeče, posuneme jej trochu doprava.
img loga (
levý okraj: 2,3 em;
}
Díky následujícímu kódu bude logo responzivní.
Max-šířka: 100 %;
Styling menu - ulOdstraňte značky z položek nabídky.
ul(
list-style-type: none;
}
Vertikální nabídku změníme na vodorovnou, přičemž vše zarovnáme na střed pomocí metody flexbox. Vlastnost přechodu zajišťuje hladký chod efektu hover, o tom později.
ul(
displej: flex;
flex-flow: nowrap;
směr ohybu: řádek;
justify-content: center;
align-items: center;
přechod: ,5s;
}
Položky nabídky li jsou velmi blízko u sebe a musíme pracovat s písmem a odkazy.
Nastavíme okraje kolem položek nabídky.
Ulli a (
odsazení: 10px 20px;
}
Text uděláme velkými písmeny a odstraníme podtržení odkazů.
Text-transform: velká písmena;
text-dekorace: žádná;
Pro kontrast zvolíme tmavší písmo a uděláme ho tučným (nesnáším, když barva textu splývá s barvou pozadí webu).
Barva: #262625;
váha písma: tučné;
Vytvořte jednoduchý efekt vznesení a nezapomeňte na hladký přechod.
Ulli a:hover (
pozadí: #000;
barva: #fff;
přechod: 0,5s
}
V další lekci učiníme naše menu tak, aby reagovalo na dotazy médií. Celý kód naleznete na jsfiddle.
Ne všechny projekty vyžadují zbytečné efekty, které mohou stránky výrazně zatěžovat, zejména pokud jde o adaptivní layout, kdy si uživatel může web prohlížet na chytrých telefonech či tabletech. Většina těchto efektů je vytvořena pomocí JavaScriptu, proto jsem se jako příklad rozhodl ukázat, jak si můžete udělat jeden z nejdůležitějších prvků webu, totiž navigační menu, prakticky bez použití JS, ale většinou pouze pomocí CSS. Je naprosto nemožné odmítnout použití JS z toho důvodu, že na mobilních zařízeních a běžných počítačích či noteboocích je mnoho událostí odlišných a pokud na počítači v CSS můžeme vlastnost bezpečně používat :vznášet se, pak to na tabletu nebude fungovat tak, jak bychom chtěli. Ti nejnetrpělivější mohou okamžitě ( v příkladu změňte šířku okna prohlížeče).
Stanovili jsme si tedy následující úkol: vytvořit nabídku, která je flexibilní na šířku, s přepnutím na její mobilní verzi, kde se nabídka rozbalí při najetí myší nebo kliknutí na tlačítko. Struktura HTML je pro takové prvky typická, kromě toho, že přidáváme ještě jeden prvek – tlačítko pro rozbalení/skrytí nabídky v mobilní verzi:
≡
CSS není úplně standardní. Uděláme, aby se naše menu chovalo, jako bychom používali stůl. Hned bych chtěl zdůraznit, že ne všechny prohlížeče podporují vlastnosti, které budeme používat. Problémy mohou nastat u verzí IE nižších než verze 8 ( i když je čas přestat se na ně soustředit) a existuje několik malých problémů s IE8, ale níže napíšu, jak je vyřešit.
* ( margin: 0; padding: 0; ) header ( background-color: #C0C0C0; ) #menu ( display: table; /* popis níže */ width: 100%; border-collapse: Collapse; -webkit-box- sizing: border-box; /* popis níže */ -moz-box-sizing: border-box; /* popis níže */ velikost boxu: border-box; tabulka-řádek; /* popis níže */ barva-pozadi: #FFFFFF; styl-listu: žádný; menu ul li a ( display: inline-block; width: 100%; height: 50px; line-height: 50px; font-size: 1.2em; text-align: center; ) #menu ul li a:hover ( background- barva: #990000; barva: #FFFFFF; ) #nav_button ( displej: žádný; šířka: 50px; výška: 50px; velikost písma: 2,5 em; zarovnání textu: na střed; barva pozadí: #FFFFFF; ohraničení: 1px plný #949494; kurzor: ukazatel; ) @media screen and (max-width: 600px) ( /* popis níže */ #menu ( display: inline-block; position: relativní; width: auto; ) #menu ul ( display: žádný;
pozice: absolutní;
nahoře: 0;
| displej: tabulka-buňka; Prvek se bude chovat jako nebo box-sizing: border-box; (a s předponami dodavatele) Při výpočtu šířky a výšky prvku budou vlastnosti width a height zahrnovat hodnoty okrajů ( vycpávka) a hranice ( pohraniční ). Je to nutné, aby se zabránilo vzhledu horizontálního rolování, protože bez této vlastnosti se při šířce nabídky 100 % přidá i tloušťka ohraničení, a pokud je, tak se přidá padding. Tento kód zapíšeme do samostatného souboru js a vložíme ho úplně dole na stránku, před uzavírací značku. Nyní pár slov o kompatibilitě mezi prohlížeči... Pokud počítáte s Internet Explorerem nižší než verze 9, pak pro jeho správné fungování je potřeba v tagu propojit dva opravné skripty: První umožňuje starším prohlížečům adekvátně vnímat HTML5 tagy a druhý umožňuje „mediální dotazy“, se kterými se také nekamarádí. I když na druhou stranu se takové prohlížeče na mobilních zařízeních nepoužívají a stejnou značku lze nahradit . Zda tyto skripty použít nebo ne je tedy samozřejmě vaše osobní rozhodnutí, ale považuji je za nadbytečné. Nyní je nabídka připravena k použití na jakémkoli zařízení. Velmi často, zejména začátečníci, v honbě za pomyslnou krásou webu jej přeplňují zbytečnou grafikou, skripty, které při provádění nějaké drobné akce někdy váží více než celá stránka. Nechoďte do extrémů a myslete na ty uživatele, kteří k vám mají přístup nejen z různých zařízení, ale také přes nízkorychlostní připojení k internetu. Hodně štěstí! ;) 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.
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.
Vše. 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 celkem 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
/* 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; ) 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
Když umístíte kurzor 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.
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 ; Všechny weby mají přirozeně své vlastní lišty nabídek, ale pokud je zdroj vytvořen na CMS, bude mnohem snazší vytvořit novou adaptivní nabídku. BootstrapVytváření responzivní funkčnosti není tak vážný problém, pokud používáte nástroje Bootstrap. Šablony pro vytvoření horizontálního menu jsou zde již rozloženy. Stačí se připojit k prostředku souboru bootstrap.js. S pomocí tohoto rámce získá webmaster možnost vytvořit navigaci jakékoli složitosti. Responzivní nabídka s Bootstrap je vytvořena pomocí nějakého kódu. Vlastnosti metodyTento kód může být těžkopádný, ale je srozumitelný. Za zmínku stojí, že hlavní roli zde hraje tag nav, který je zodpovědný za tvorbu navigace a její vzhled. Zde jsou také připojeny kontejnery nádoba-tekutina A kontejner, kterým se nastavuje šířka bodů. S jejich pomocí můžete vynutit rozbalení nabídky na obrazovkách různých rozlišení nebo ji nechat zafixovanou.
Třídy zde hrají důležitou roli při vytváření adaptivní funkčnosti. kolaps A navbar-collapse kteří jsou zodpovědní za styl. Samotné menu vzniká zapisováním položek, které jsou umístěny vodorovně. Pokud použijete tento rámcový kód k vytvoření navigace, bude na širokoúhlých obrazovkách vypadat jako horizontální banner. Na začátku bude název zdroje a poté položky v přesně určeném pořadí. Na úzkých obrazovkách se zobrazí pouze název webu a ikona hamburgeru, na kterou se po kliknutí zobrazí položky nabídky ve vertikálním seznamu. Rozbalovací nabídkaSkvělým pomocníkem pro vytvoření responzivního rozbalovacího menu bude zdroj Bootstrap. Chcete-li to provést, jednoduše vyměňte řádek tagu |
