mobile B2B v22
by Petr Haluza
HTML
<script src="https://www.img4.cz/100m/mobiledemo/fonts/icomoon.eot"></script>
<script src="https://www.img4.cz/100m/mobiledemo/fonts/icomoon.ttf"></script>
<script src="https://www.img4.cz/100m/mobiledemo/fonts/icomoon.woff"></script>
<script src="https://www.img4.cz/100m/mobiledemo/fonts/icomoon.svg"></script>
<footer style="display:none;">
<div class="lfoo">
<a>Por.</a>
<a>Obl.</a>
</div>
<div class="sfoo">
<a class="toggler">hledat</a>
<div>
<form class="searchbox">
<input class="searchbox-input" type="search" placeholder="Hledat......" onkeyup="buttonUp();" required>
<input class="searchbox-submit" type="submit">
<span class="searchbox-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path d="M23.111 20.058l-4.977-4.977c.965-1.52 1.523-3.322 1.523-5.251 0-5.42-4.409-9.83-9.829-9.83-5.42 0-9.828 4.41-9.828 9.83s4.408 9.83 9.829 9.83c1.834 0 3.552-.505 5.022-1.383l5.021 5.021c2.144 2.141 5.384-1.096 3.239-3.24zm-20.064-10.228c0-3.739 3.043-6.782 6.782-6.782s6.782 3.042 6.782 6.782-3.043 6.782-6.782 6.782-6.782-3.043-6.782-6.782zm2.01-1.764c1.984-4.599 8.664-4.066 9.922.749-2.534-2.974-6.993-3.294-9.922-.749z"/></svg>
</span>
</form>
</div>
</div>
<div class="rfoo">
<a>kos</a>
<a class="goUp">up</a>
</div>
</footer>
<section id="parametric-filter">
<div>
<div id="par-fil-head">
filtruj
</div>
<div id="par-fil-body">
<ul>
<li>parametrz</li><li>parametrz</li><li>parametrz</li>
<li>parametrz</li><li>parametrz</li><li>parametrz</li>
<li>parametrz</li><li>parametrz</li><li>parametrz</li>
<li>parametrz</li><li>parametrz</li><li>parametrz</li>
<li>parametrz</li><li>parametrz</li><li>parametrz</li>
<li>parametrz</li><li>parametrz</li><li>parametrz</li>
<li>parametrz</li><li>parametrz</li><li>parametrz</li>
<li>parametrz</li><li>parametrz</li><li>parametrz...CSS
:root {
--main-bg-color: #f7f9fc;
--main-a-color: #246;
--main-h-color: #246;
--100m-red: #ea0000;
}
/*
-webkit-font-smoothing: antialiased;
*/
* {box-sizing: border-box;}
html {font-size: 14px;}
a{ text-decoration: none; color:#246; transition: color 0.3s ease;}
body {padding:0;margin:0;overflow-x: hidden;background:--main-bg-color: #f7f9fc;;color:var(--main-a-color); font-size: 100%; font-family: Roboto,Helvetica CE,Arial CE,Arial,Verdana,sans-serif;}
header {display:flex; justify-content: space-between; width:100%; height:3.5em;}
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: var(--100m-red); 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;}
header, #searchbox { background:linear-gradient(90deg,var(--100m-red) 0,#aa0000)}
h1,h2,h3,h4,h5,h6 { margin: 0; var(--main-h-color) }
ul {padding:0; margin:0}
/* košík */
/* 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...JavaScript
//?
// předělat i rozklik stromu do css jako navigační menu?
// rozevírátko po kliku - katalog produktů, hledání ve footeru
$(".toggler").click(function() {
$(this).toggleClass("on");
$(this).next().slideToggle(250);
return false;
});
// otevřít param filtr
$(".showParamFilter").click(function() {
$("#parametric-filter").toggleClass("on");
return false;
});
// check jestli jsme skrollnuli a zobrazit footer
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('footer').fadeIn(250);
} else {
$('footer').fadeOut(200);
}
});
//Skrol nahoru
$('.goUp').click(function(){
$('html, body').animate({scrollTop : 0},400);
return false;
});