Nabídka CSS
Jen css a html
Přístupy k implementaci adaptivního menu. Skvělý přehled krásných víceúrovňových menu s codepen
Dnes si povíme, jak vytvořit responzivní menu pouze pomocí CSS3. Proč adaptivní? Zdá se mi, že je to velmi důležité a mělo by se to stát normou, protože dnes obrovské množství lidí přistupuje k internetu prostřednictvím mobilních zařízení (iPady, iPhony...). Tito uživatelé musí být schopni snadno procházet vaším webem. K vyřešení tohoto problému můžete použít jQuery nebo JavaScript, ale dnes se podíváme na něco jiného.
V podstatě budeme mít pravidelnou rozbalovací nabídku založenou na seznamu UL > LI. Pokud zmenšíme obrazovku, pak se kliknutím zpřístupní všechny podnabídky. Podívejme se, co bychom měli získat:
Krok 1. HTML
Zde je html kód našeho ukázkového příkladu:
index.html
Zde bych rád poznamenal jeden bod - meta s atributem name=’viewpoint’. Tento tag je nezbytný pro správné škálování obsahu stránky na vaší obrazovce, ať už jde o monitor počítače nebo mobilní telefon. Zbytek kódu není těžké pochopit. Víceúrovňový seznam UL > LI.
Krok 2: CSS
Takže styly. Nejprve k samotné stránce:
css/main.css
* ( okraj: 0; odsazení: 0; ) html ( barva pozadí: #fff; výška: 100 %; ) tělo ( barva: #333333; písmo: 0,75em/1,5em Arial,sans-serif; ) .container ( margin-left: auto margin-right: auto margin-top: 30px;
Nyní napíšeme styly pro prvky horní nabídky:
/* běžné a nejvyšší styly */ #nav span ( display: none; ) #nav, #nav ul (list-style: none outside none; margin: 0; padding: 0; ) #nav ( background-color: # F5F5F5: 5px solid #333333: 1% pozice: FFFFFF: 1px rgba(0, 0, 0.2); : úplně nahoře: 96 % ) #nav > li ( okraj-dole: 5px plné průhledné; plovoucí: vlevo; okraj-dole: -5px; zarovnání textu: vlevo; -moz-přechod: všech 300 ms náběh 0s; -ms-přechod: všech 300 ms náběh-výstup 0s -o-přechod: všech 300 ms přechod-náběh 0s -webkit-přechod: všech 300 ms náběh-výstup 0s #nav li a ( zobrazení : blok-dekorace: žádná -moz-přechod: barva 450 ms náběh 0s, barva pozadí 450 ms náběh 0s -ms-přechod: barva 450 ms náběh 0s, pozadí-; barva 450 ms náběh a výstup 0 s; -o-přechod: barva 450 ms náběh 0s, barva pozadí 450 ms náběh 0s; -přechod webové sady: barva 450 ms náběh 0s, barva pozadí 450 ms náběh 0s; přechod: barva 450 ms náběh 0s, barva pozadí 450 ms náběh 0s; white-space: normální; ) #nav > li > a ( barva: #333333; displej: blok; velikost písma: 1,3 em; výška řádku: 49px; odsazení: 0 15px; text-transform: velká písmena; ) #nav > li:hover > a , #nav > a:hover ( barva pozadí: #F55856; barva: #FFFFFF; ) #nav li.active > a (barva pozadí: #333333; barva: #FFFFFF; )
Pojďme implementovat styly pro podnabídku (rozbalovací seznam):
/* podnabídka */ #nav li:hover ul.subs ( display: block; ) #nav ul.subs > li ( display: inline-block; float: none; padding: 10px 1%; vertical-align: top; width : 33 %; ) #nav ul.subs > li a ( barva: #777777; výška řádku: 20px; ) #nav ul li a:hover ( barva: #F55856; ) #nav ul.subs > li > a ( font-size: 1,3em; margin-bottom: 10px; text-transform: velká písmena ; -ms-transition: padding 150ms náběh 0s -o-transition: padding 150ms náběh 0s -webkit-transition: padding 150ms náběh 0s .subs > li li:hover ( padding-left: 15px ;
Skvělý. Nyní je nejdůležitější, jak se menu přizpůsobí? Ve skutečnosti je vše velmi jednoduché! Pomocí dotazů na média CSS3 určíme, které styly se mají zobrazit na základě velikosti obrazovky uživatele. Pomocí následujícího triku proměníme i jídelníček. V našem HTML kódu jsem hned za horní úrovně nabídky umístil speciální SPAN. Použijeme je tak, že při kliknutí na prvky horní nabídky přiřadíme aktivní stav (pseudotřída: cíl). Otevře se podnabídka. Podívejme se na kód:
/* responzivní pravidla */ @media all and (max-width: 980px) ( #nav > li ( float: none; border-bottom: 0; margin-bottom: 0; ) #nav ul.subs ( position: relativní; top: 0; ) #nav li:hover ul.subs ( display: none; ) #nav li #s1:target + ul.subs, #nav li #s2:target + ul.subs ( display: block; ) #nav ul.subs > li ( display: block; width: auto; ) )
Sečteno a podtrženo
Takže jsme od nuly vytvořili skvělé responzivní menu. Doufám, že vám to bude užitečné. Hodně štěstí! Uvidíme se znova!
Vrátíme-li se k tématu stále rostoucího významu mobilních zařízení, nelze ignorovat nabídku stránek. K vytváření adaptivních nabídek se většinou používají JavaScriptová řešení, ale je to vždy opodstatněné? Myslím, že ne. Koneckonců, lze to provést pomocí čistého CSS, změnou viditelnosti prvků pomocí zaškrtávacího políčka.
Nebudeme se dlouze rozepisovat o výhodách a nevýhodách tohoto přístupu, ale rovnou přejdeme ke konkrétnímu příkladu. V tomto případě se bude jednat o jednoduché jednoúrovňové menu.
Co dělat s víceúrovňovými nabídkami? Zde je několik možností:
- začněte hledat řešení JavaScript/jQuery
- otevřít druhou úroveň při najetí myší (což, musím říct, není dobré řešení)
Označení bude o něco podrobnější, než potřebujeme: obsahuje prvky, které nemusí být vůbec užitečné. Je to však docela jednoduché a není těžké na pochopení.
"počáteční-měřítko=1,0, šířka=šířka-zařízení">
Styly
Na zařízeních s obrazovkou menší než 640 pixelů jsou položky nabídky skryté a zůstává pouze zaškrtávací políčko stylizované pomocí štítku. Pokud je zaškrtávací políčko zaškrtnuté, nabídka se zviditelní. Kód pro implementaci:
/* Menu */ #menu-checkbox ( /* zaškrtávací políčko skryté */ displej: žádný; ) .hlavní menu ( /* položky nabídky jsou skryté */ displej: žádný; výplň: 0; okraj: 0; ) .hlavní nabídka li ( /* položky nabídky jsou uspořádány svisle */ /* každý má šířku 100 % */ velikost písma: 1 em; displej: blok; šířka: 100 %; ) .hlavní nabídka a ( /* trochu upravit odkazy */ displej: blok; border-bottom : 1px solid blueviolet ; barva: světlešedá; polstrování: ,5em; text-dekorace: žádná; ) .main-menu a :hover ( text-decoration : underline ; ) .toggle-button ( text-align : center ; display : block ; /* nezapomeňte výslovně uvést, jaký má být kurzor */ kurzor: ukazatel; barva pozadí : #333 ; barva : #fff ; ) .toggle-button :after ( /* získat data z atributu data-open v html */ obsah : attr (data-open ); displej: blok; okraj: 10px 0; odsazení: 10px 30px; ) #menu-checkbox :checked + nav [ role = "navigation" ] .main-menu ( /* když je zaškrtávací políčko aktivní, nabídka se zobrazí */ displej: blok; ) #menu-checkbox :checked + nav [ role = "navigation" ] .toggle-button :after ( content : attr (data-close); )
Vyřešili jsme mobilní zařízení. Zbývá provést změny u těch zařízení, jejichž obrazovka je >= 640px. Uděláme to prostřednictvím dotazů médií.
@media screen and (min-width : 640px ) ( .toggle-button ( /* štítek skrytý */ display : none ; ) .main-menu ( display : block ; margin : 0 auto ; background-color : #333 ; height : 30px .hlavní nabídka li ( /* tagy
Uvidíme, co se stane:
Tento příklad lze nalézt.
Úprava stylu štítku
Místo data-open/close můžete samozřejmě použít cokoliv. Přidejte například písmo ikony.
Přepínací tlačítko :po ( font-family : "fontello" ; obsah : "\e804" ; kurzor : ukazatel ; odsazení : 15px ; velikost písma : 1,5 em ; zarovnání textu : na střed; ) #menu-checkbox :zaškrtnuto + .main-menu .toggle-button :after ( content : "\e804" ; )
Nebo ikona spolu s vysvětlujícím textem:
Zde získáme hodnotu atributů data-open/close, zobrazíme data pomocí before a přidáme samotnou ikonu pomocí pseudoprvku after.
Toggle-button :before ( content : attr (data-close ); font-size : 1rem ; position : relativní ; right : 3px ; bottom : 3px ; ) .toggle-button :after ( content : "\f0c9" ; font- family : "FontAwesome" ; display : inline-block ; ) #menu-checkbox :checked + nav [ role = "navigation" ] .menu ( display : block ; ) #menu-checkbox :checked + nav [ role = "navigation" ] .toggle-button :after ( content : "\f0c9" ; font-family : "FontAwesome" ; barva : zelená ; ) #menu-checkbox :checked + nav [ role = "navigation" ] .toggle-button :before ( barva : zelená ;
V posledních dvou příkladech si čtenář bude muset pohrát s umístěním ikon a umístěním samotného textu.
Od takové implementace menu byste neměli očekávat žádné neuvěřitelné efekty, i když byste neměli zapomínat na možnosti animace CSS.
Ahoj. Už hodně dlouho jsem nepsal příspěvky na téma práce s html/css. Nedávno jsem začal dávat dohromady nový layout a při tom jsem narazil na zajímavý trik, který vám umožní udělat menu flexibilní (můžete do něj přidávat nové položky a velikost se nezvětší, ale vždy bude 100% rodičovský blok). Dnes tedy implementujeme gumové menu pomocí CSS.
Pokud jste příliš líní číst článek, můžete se podívat na toto video. Autor také vše velmi dobře vysvětluje:
Pryžové menu s CSS – krok 1
Prvním krokem je vždy html značení, kde bychom bez něj byli? Ale v našem případě bude vše jednoduché:
- blokový obal pro menu
- samotná nabídka zobrazená prostřednictvím seznamu s odrážkami (značka ul)
- Položky nabídky jsou uvnitř, a proto již mají odkazy
Vše je jasné, zde je můj značkovací kód:
Vše vypadá standardně, takto:
Nyní vše dáme do požadované podoby, CSS se pustí do práce.
Krok 2 – Základní styly
Krok 3 - implementujte gumu
Nyní se pojďme věnovat samotnému menu. Odstraním z něj značky (značku ul), udělám z něj pozadí a hlavně použiji vlastnost display: table-row, aby se kontejner pro nabídku choval jako řádek tabulky. To je důležité udělat pro další manipulace.
R-menu( pozadí: linear-gradient(doprava, #b0d4e3 0%,#88bacf 100%); display: table-row; list-style: none; )
Jak vidíte, výše uvedený kód právě vyřešil vše, o čem jsem psal. Mimochodem, je vhodné generovat přechody pomocí nástroje Ultimate CSS Gradient generator.
R-menu li( zarovnat svisle: dole; zobrazení: buňka tabulky; šířka: auto; zarovnání textu: na střed; výška: 50px; pravý okraj: 1px plný #222; )
- vertical-align: bottom - tato vlastnost je nezbytná proto, aby text v položce nabídky zabral 2 řádky, zobrazil se rovnoměrně. Když vytvoříme nabídku, můžete tuto vlastnost odstranit, přiblížit, aby se položky zkomprimovaly a text se přesunul na dva řádky a uvidíte problém se zobrazením. Vraťte nemovitost a vše bude v pořádku.
- display: table-cell - jelikož samotné menu zobrazení nastavíme jako řádek tabulky, bylo by logické nastavit, aby se jeho položky zobrazovaly jako buňky v tabulce. Je to nutné.
- šířka: auto — šířka se vypočítá automaticky v závislosti na délce textu v odstavci
- text-align: center - to je jen pro vystředění textu uvnitř
- výška: 50 pixelů — nastavte výšku na 50 pixelů
- no, border-right je jen hranice napravo, oddělovač položek
Nabídka zatím vypadá nevzhledně, ale to je v pořádku, je čas si to připomenout. 
Poslední věcí, kterou musíte udělat, je stylovat odkazy uvnitř položek. Tady mám tento kód:
R-menu li a( text-decoration: none; width: 1000px; height: 50px; vertical-align: middle; display: table-cell; color: #fff; font: normal 14px Verdana; )
A takto nyní vypadá menu:
Opět mi dovolte vysvětlit některé řádky:
- vlastnost text-decoration přepíše výchozí podtržení pro odkazy
- width: 1000px je možná nejdůležitější řádek. Odkazy je potřeba nastavit přibližně na tuto šířku, možná menší, ale rozhodně větší než nejširší možná položka nabídky. Odkazy nebudou široké 1000 pixelů, protože šířka bude omezena položkou nabídky li, jejíž šířka je nastavena na auto, ale bude možné zajistit, že pro libovolný počet položek v nabídce bude vždy 100 procenta šířky.
- vertical-align: middle a display: table-cell - první zarovná text svisle na střed a druhé také zobrazí odkazy jako buňky. Obě vlastnosti jsou potřeba.
- font - no, to je jen sada nastavení pro font. Přečtěte si o vlastnostech css pro písma v .
Krok 4 (volitelný) Můžete přidat interaktivitu
Například, aby se při najetí myší změnila barva položky nabídky. To lze implementovat docela jednoduše pomocí pseudotřídy hover:
R-menu li:hover( background-color: #6bba70; )
Testování menu na gumovost
Skvělé, jídelní lístky jsou hotové, ale nezkontrolovali jsme to nejdůležitější – jak je to gumové, jak jsem vám slíbil. No, přidám do nabídky další 2 položky:
Nabídka zůstává široká 600 pixelů. Zbývající položky byly jednoduše zmenšeny, aby se do nich vešly 2 nové.
Přidám ještě jeden dlouhý bod:
Jak je vidět, menu se trochu více zmenšilo a dlouhá položka se zobrazuje zcela normálně. A nebýt vlastnosti vertical-align: bottom, o které jsem vám říkal, menu by vypadalo hůř.
Menu zredukuji na tři položky.
Položky se staly mnohem volnějšími, ale samotné menu se do šířky nezměnilo. Tak jsme udělali 100% gumové menu!
Jak to přizpůsobit?
V zásadě platí, že pokud nastavíte obalový blok na maximální šířku spíše než na pevnou, pak se ani nemusí přizpůsobovat. V mém případě mám vlastnost max-width: 600px a když bude šířka menší než 600 pixelů, blok se jednoduše zmenší spolu s obrazovkou, aniž by se vytvořil vodorovný posuv.
No, pokud chcete nějak změnit nebo opravit menu na mobilních zařízeních nebo širokoúhlých obrazovkách, pak vám můžeme pomoci! Hodně štěstí při tvorbě webu!
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 rozhodl jako příklad ukázat, jak můžete vytvořit jeden z nejdůležitějších prvků webu, a to 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 menu flexibilní na šířku s přepnutím na jeho mobilní verzi, kde menu bude rozbalovací při najetí nebo stisknutí tlačítka. 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; šířka: 100 %; z-index: 20; ) #menu ul li ( display: list-item; border-top: none; ) #nav_button ( display: inline-block; ) #menu:hover, #menu.open_nav ( šířka: 100 %; -webkit-user-select : none; /* popis níže */ -moz-user-select: none; /* popis níže */ -webkit-touch-callout: none /* popis níže */ ) #menu:hover ul, #menu.open_nav ul (display: block; margin-top: 50px; ) )
Některým stylům není třeba věnovat pozornost; barva pozadí, velikost písma atd. - toto je pouze pro demonstrační účely. A nás by měly zajímat následující vlastnosti s jejich hodnotami:
Displej: tabulka; Označuje, že se prvek bude chovat podobně jako prvek
| 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 ( okraj). 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 okraj, a pokud existuje, pak vycpávka. -webkit-user-select: none; a -moz-user-select: none; Zabrání výběru prvku nebo textu. Potřebné pro mobilní verzi, aby se předešlo nesrovnalostem, když uživatel projíždí položkami nabídky místo toho, aby na ně klikal. -webkit-touch-calout: none; Zakáže vyskakování popisku, když klepnete a podržíte prvek. Funguje pouze v Chrome a Safari. Stejně jako v předchozí vlastnosti slouží ke zrušení nežádoucích akcí při práci s prvkem. @media (mediální dotaz) Téma je poměrně široké, ale v kostce prohlížeči říká, jaké vlastnosti má použít pro určité typy médií nebo specifikace zařízení. V našem případě - požádejte o obrazovka(obrazovky monitorů) a maximální šířka: 600 pixelů(pokud je šířka okna prohlížeče menší než 600 pixelů). Nejzajímavější je, že bychom to mohli ukončit, kdybychom nebrali v úvahu smartphony, tablety a s jistotou tvrdili, že menu je celé vytvořeno v HTML a CSS. Ale budete se muset uchýlit k pomoci JS/jQuery a v tomto případě, protože bylo rozhodnuto to udělat s co nejmenší zátěží, čistý JavaScript. Var d = dokument, navBut = d.getElementById("nav_button"), // tlačítko pro aktivaci nabídky navMenu = d.getElementById("menu"); // rozbalovací nabídka // funkce pro určení přítomnosti nadřazeného prvku pomocí funkce ID hasParent(el, sId)( while(el) ( if (el.id == sId) return true; el = el.parentNode; ) return false ) / / klepnutím na tlačítko přidejte třídu nabídky, // která odpovídá vlastnosti v css "#menu:hover" // a rozbalte nabídku navBut.addEventListener("touchstart", function(e) ( e.preventDefault(); navMenu.classList .add("open_nav" ), false); // po dotyku v dokumentu, // pokud událost nebyla na žádném prvku nabídky (určeno pomocí funkce "hasParent"), // odeberte třídu "open_nav" z nabídky, což vede k jejímu uzavření d.addEventListener( "touchstart ", function(e) ( if(!hasParent(e.target, "menu")) navMenu.classList.remove("open_nav"); ), false); 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 |
|---|