Responzivní menu s hamburgerem bez JavaScriptu

Posledních několik dní jsem se zabýval tvorbou responzivní e-mailové šablony pro newslettery s klasickým hamburger menu.

Hamburger – tlačítko se třemi vodorovnými čárkami značí menu na mobilních zařízeních

Vytvořit takové menu pro web je hračka, hotových řešení lze ostatně vygooglit nespočet, vytvořit ho v e-mailu byl ale trochu oříšek

Podobně jako prohlížeče i mailoví klienti vykreslují kód každý trochu jinak, jenže narozdíl od prohlížečů v tom jsou méně disciplinovaní a je jich mnohem víc.

Zároveň musíme počítat i s webklienty a tím nám vznikají variace webklienti krát prohlížeče a to už je potom pěkná mela :).

Zde je tedy kód mého řešení responzivního menu s hamburgerem, které funguje v emailových šablonách a je zcela bez JavaScriptu, napsané čistě jen v HTML a CSS.

CSS

div.menu ul {
list-style-type: none;
margin: 0;
padding: 20px;
overflow: hidden;
background-color: #161616;
color: white;
font-family: sans-serif;
font-size: 16px;
font-weight: 400;
}

div.menu li {
float: right;
padding-left: 20px;
text-transform: uppercase;
}

div.menu li a {
color: white;
text-decoration: none;
}

div.menu {
width: 100%;
height: 25px;
}

div.mobile-menu {
display: none;
}

@media (max-width: 720px) {

  div.menu {
  display: none;
  }

  div.mobile-menu {
  position: relative;
  display: inline-block;
  width: 100%px;
  height: 63px;
  background-color: #161616;  
  }

  div.mobile-menu ul {
  display: none;
  list-style-type: none;
  margin: 0;
  padding: 4px;
  overflow: hidden;
  background-color: #161616;
  color: white;
  z-index: 1;
  position: relative;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  }

  div.mobile-menu ul li {
  margin-bottom:20px; 
  }

  div.mobile-menu ul li a {
  text-decoration: none;
  text-transform: uppercase;
  color: white; 
  }

  div.mobile-menu:hover ul.mobile-menu-content {
  display: block;
  }
}

HTML

<div class="menu">
 <ul>
  <li><a href="#">Rohlíčky</a></li>
  <li><a href="#">Chlebíčky</a></li>
  <li><a href="#">Zákusky</a></li>
  <li><a href="#">Koláčky</a></li>
  <li><a href="#">Vdolečky</a></li>
  <li><a href="#">Perníčky</a></li>
  <li style="float:left;">&#127852;<em>Dobroty</em></li>
 </ul>
</div>

<div class="mobile-menu">
 <img src="images/hamburger.png"> <!-- čtvercový obrázek, a = 25px -->
 <ul class="mobile-menu-content">
  <li><a href="#">Rohlíčky</a></li>
  <li><a href="#">Chlebíčky</a></li>
  <li><a href="#">Zákusky</a></li>
  <li><a href="#">Koláčky</a></li>
  <li><a href="#">Vdolečky</a></li>
  <li><a href="#">Perníčky</a></li>
  </ul>
</div>

Potřebujete jiné řešení pro svůj web, ale nemáte čas, nebo chuť jej vytvářet? Vytvořím jej za vás.

Napište mi e-mail na marian.pekar@gmail.com, nebo mi na sebe zanechte kontakt v komentářích a já se vám ozvu.

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

+ 14 = 18