mobile B2B v30

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="page-menu">
  <div>
     <div>
       <a class="page-menu-toggle">Zavřít</a>
     </div>
     <ul>
       <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>
</section>   

<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>
     ...

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 */
.page-menu-toggle,
.page-menu-toggle:before,
.page-menu-toggle:after{ display: block; width: 30px; height: 3px; background: white; border-radius: 3px }

#page-menu { visibility: hidden; position: fixed; width: 100%; height:100% ; overflow: hidden; z-index: 200; }
#page-menu.on {visibility: visible; left: 0 }
#page-menu > div { overflow-x: visible;width: 100%; height: 100%; left:-100% ;transition: all .2s linear; position: relative; background: var(--100m-red)}
#page-menu.on > div{left: 0;}
 
#page-menu.on > div > div {right: 0; position:absolute;}
#page-menu li { padding: 10px 0;}
#page-menu li a {color:white;  font-size: 1.1em;}


/* /navigace stranek...

JavaScript

// 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 menu stránky
$(".page-menu-toggle").click(function() {
  $("#page-menu").toggleClass("on");
  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;
});