Responzívne CSS menu

Existuje veľa spôsobov ako sa dopracovať k responzívnemu menu na web stránke. Najjednoduchšie je použiť google a stiahnuť si do svojho projektu hotové riešenie. Nájdete ho napr. aj na mojej obľúbenej stránke w3schools.com. Prípadne použiť rámec podobný bootstrap. CMS ako Wordpress alebo Drupal majú integrované moduly.

Čo tak naučiť sa jeden spôsob, ktorý budete môcť zapracovať aj do svojho preferovaného CMS, ak si vyrábate vlastnú šablónu alebo ak tvoríte čistú stránku bez CMS systému ?

Budem sa venovať verzii, kde sa menu zobrazí alebo schová po kliknutí do oblasti menu. Natíska sa riešenie použiť udalosť onclick a kúsok javascriptu. Nechcem sa tváriť ako prehnaný antijavascript extrémista . Aj CMS používajú javascript. Jedno základne pravidlo mi však ostalo ešte od čias, keď som začínal s web stránkami. Základ stránky sa musí načítať a byť dostupný sám o sebe. Nezávisle od scriptov, ktoré nemusí mať povolené každý. Nezobrazenie položiek hlavného menu to je dosť veľký trapas. Stojí mi teda za to, aby som to skúsil vyriešiť bez javascriptu s použitím čistého CSS.

Drupal generuje položky menu ako nečíslovaný ul zoznam. Nepoznám všetky CMS systémy, či to robia rovnako. Ja to použijem tiež. V zdrojovom kóde vidíte, že okrem ul zoznamu s položkami menu mám pred zoznamom aj jeden input typu checkbox a label. To je tá finta . Nemusím použiť udalosť ONCLICK, vystačím si aj s checkboxom ....

Html code

<div class="wrap-menu">
<input class="class-IDinput" type="checkbox" id="IDinput">
<label class="lab-IDinput" for="IDinput">Menu</label>
   <ul class="resp-menu">
     <li><a href="#">Položka 1</a></li>
     <li><a href="#">Položka 2</a> </li>
     <li><a href="#">Položka 3</a></li>
  </ul>
</div>

Hore napísaný kód ak vložíte do stránky, vygeneruje input checker, label a nečíslovaný ul zoznam. Nič zvláštne sa momentálne nedeje. Web stránka funguje tak ako má. Zaškrtávacie políčko sa dá zaškrtnúť a to je všetko.

Html stránka

K html kódu teraz pridám len minimum css - na demonštrovanie správania sa pseudotriedy :checked. Pre ul.resp-menu nastavím vlastnosť opacity na 0.6. Ak je môj input zaškrtnutý (#IDinput:checked) zmením vlastnosť pre ul.resp-menu opacity na 1.

Upozornenie - Treba použiť správny selektor. Ak použijete moje usporiadanie html kódu a chcete vybrať ul.resp-menu, použite selektor vlnovky (~). Ten znamená - vyber element, ktorý je za prvkom. Ak by ste použili selektor (>),  v tomto prípade by to nefungovalo. Samozrejme preto, lebo prvok nie je vložený do elementu input - je za ním...

Css code

ul.resp-menu {
	opacity: .6;
}
#IDinput:checked ~ ul.resp-menu {
	opacity: 1;
}

Vygenerovaná stránka teraz vyzerá veľmi podobne. Po zaškrtnutí inputu však môžete vidieť ako sa mení opacity ul zoznamu.

Html stránka

Predchádzajúci príklad s vlastnosťou opacity som uviedol ako ilustráciu. Základné vlastnosti pre fungovanie css menu, ktoré využívam ja sú: position absolute + mením výšku height z 0 na primeranú hodnotu. Už je na Vás ako si nastylujete komplexné menu. Tu je spôsob, ktorý používam ja.

Css code

#IDinput {
	display: none;
}
label.lab-IDinput {
	background-color: rgb(201, 201, 201);
	width: 100%;
	padding: .25rem .5rem;
	display: block;
	cursor: pointer;
	background-image: url(../themes/cotus_starterkit/images/menu.png);
	background-image: url(../themes/cotus_starterkit/images/menu.svg);
	background-repeat: no-repeat;
	background-position: calc(100% - .5rem) center;
	background-size: 1.5rem 1.5rem;
}
#IDinput:checked ~ label.lab-IDinput {
	background-image: url(../themes/cotus_starterkit/images/menu_close.png);
	background-image: url(../themes/cotus_starterkit/images/menu_close.svg);
}
ul.resp-menu {
	position: absolute;
	overflow: hidden;
	height: 0;
	right: 0;
	left: 0;
	background-color: transparent;
        list-style-type: none;
	display: block;
	transition: all 500ms;	
}
ul.resp-menu li a {
	display: block;
	width: 100%;
	height: 100%;
	padding: .25rem .5rem;
	background-color: gray;
	color: white;
	text-decoration: none;
}
ul.resp-menu li a:hover {
	background-color: darkolivegreen;
}
#IDinput:checked ~ .resp-menu {
	height: 10rem;
}

Html stránka

Pár tipov

• ul.resp-menu - mám nastavené position absolute.
• ul.resp-menu - height výška je nastavená na 0. Teda je skryté a až po zaškrtnutí (kliknutí) na menu - nastavím novú výšku height. Height nastavím s dostatočnou rezervou a background color na transparent. Tak budú viditeľné len LI položky.
• #IDinput - samotné zaškrtávacie políčko môže byť skryté. Bude fungovať aj samotný prvok label.
• prvok label - Tam používam aj background image - ikona otvorené vs. zavreté menu

V kompletnom zdrojovom kóde tohto návodu si môžete všimnúť, že názvy css class sa mierne líšia. Je to jednoducho preto, aby som mohol ukázať ako sa správajú jednotlivé prvky.

Ak chcete môžete si stiahnuť source code v CSSmenu.zip súbore.