mobile B2B v2
by Petr Haluza
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<header>
<a class="logo" href="#">
<img src="https://www.img4.cz/100m/100m-sm.png">
</a>
<div>
<div>
<a class="login-icon" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24"><path d="M20.822 18.096c-3.439-.794-6.641-1.49-5.09-4.418 4.719-8.912 1.251-13.678-3.732-13.678-5.082 0-8.465 4.949-3.732 13.678 1.598 2.945-1.725 3.641-5.09 4.418-2.979.688-3.178 2.143-3.178 4.663l.005 1.241h1.995c0-3.134-.125-3.55 1.838-4.003 2.851-.657 5.543-1.278 6.525-3.456.359-.795.592-2.103-.338-3.815-2.058-3.799-2.578-7.089-1.423-9.026 1.354-2.275 5.426-2.264 6.767-.034 1.15 1.911.639 5.219-1.403 9.076-.91 1.719-.671 3.023-.31 3.814.99 2.167 3.707 2.794 6.584 3.458 1.879.436 1.76.882 1.76 3.986h1.995l.005-1.241c0-2.52-.199-3.975-3.178-4.663z"/></svg>
</a>
</div>
<div>
<a class="cart-icon" href="#">
<span>2</span>
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24"><path d="M4.558 7l4.701-4.702c.199-.198.46-.298.721-.298.613 0 1.02.505 1.02 1.029 0 .25-.092.504-.299.711l-3.26 3.26h-2.883zm12.001 0h2.883l-4.701-4.702c-.199-.198-.46-.298-.721-.298-.613 0-1.02.505-1.02 1.029 0 .25.092.504.299.711l3.26 3.26zm3.703 4l-.016.041-3.598 8.959h-9.296l-3.597-8.961-.016-.039h16.523zm3.738-2h-24v2h.643c.534 0 1.021.304 1.256.784l4.101 10.216h12l4.102-10.214c.233-.481.722-.786 1.256-.786h.642v-2z"/></svg>
</a>
</div>
<div>
<nav class="navigation">
<div id="menuToggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<li><a href="#">Uvod</a></li>
<li><a href="#">Něco</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Podpora</a></li>
</ul>
</div>
</nav>
</div>
</div>
...CSS
/*
-webkit-font-smoothing: antialiased;
*/
* {box-sizing: border-box;}
a{ text-decoration: none; transition: color 0.3s ease;}
body {padding:0;margin:0;overflow-x: hidden;background:url(https://www.munto.net/pixia-v1/wp-content/themes/pixia/images/patterns/chruch.png);font:1em arial;color:black;}
header {display:flex; justify-content: space-between; width:100%; height:3.5em; background:#ea0000;}
header .logo { display:flex; align-items: center;}
header .logo img { padding: 0.2em; margin: 0 0.7em;}
header > div { display:flex; justify-content: space-between;align-items: center; }
.login-icon,.cart-icon {fill:#fff;display: block;padding: 0.2em; margin: 0 0.7em; width: 2em; position: relative;}
.login-icon svg,.cart-icon svg { width: 100%; height: 100%;}
.cart-icon span { background: white; color: #ea0000; font-weight: 800; font-size: 0.7em; position: absolute; display: block; border-radius: 12px; padding: 0 4px; border: 1px solid #ca0000; top: -0.5em; left: -0.4em;}
/* navigace stranek */
nav.navigation {position: relative; width: 3.7em; height: 3.5em;}
#menuToggle{ display: block; position: absolute; top: 1em; right: 0.7em; z-index: 1; -webkit-user-select: none; user-select: none;}
#menuToggle input{ display: block; width: 40px; height: 32px; position: absolute; top: -7px; left: -5px; cursor: pointer; opacity: 0; z-index: 2; -webkit-touch-callout: none;}
#menuToggle span{ display: block; width: 30px; height: 3px; margin-bottom: 5px; position: relative; background: #fff; border-radius: 3px; z-index: 1; transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;}
#menuToggle span:first-child { transform-origin: 0% 0%;}
#menuToggle span:nth-last-child(2) { transform-origin: 0% 100%;}
#menuToggle input:checked ~ span{ opacity: 1; transform: rotate(45deg) translate(-2px, -1px);}
#menuToggle input:checked ~ span:nth-last-child(3) { opacity: 0; transform: rotate(0deg)...JavaScript
// předělat i rozklik stromu do css jako navigační menu?
$(".toggle-tree").click(function() {
$(this).toggleClass("on");
$(".main-tree-list").slideToggle();
return false;
});