Topo - Modelo 01
Modelo 01 para o topo da loja virtual.
# HTML
{% set usuario = store.userStore() %}
{% set categorias = store.categories() %}
{% set categorias_menu = store.categoriesMenu() %}
<header class="block">
<component data-modulo="ofertasperiodicas" loading="false" data-paddingtop="true" data-hidescroll="true"></component>
<div class="central">
<div class="mobile-inc"></div>
<span class="openmenu">
<i class="fa fa-bars"></i>
<span class="t">MENU</span>
</span>
<h1><a href="./" id="btLogo" style="background-image:url({{ store.getLogo() }});">{{ seo.title }}</a></h1>
<div class="links">
<nav>
<ul>
{% if categorias|length > 3 and global.show_menu_todaloja %}
<li>
<a href="" onClick="return false;">
{% if store.showMenuIcons() == '2' %}
<i class="fa fa-th"></i>
{% endif %}
<strong>Toda a loja</strong>
<span class="fa fa-angle-down"></span>
</a>
{% if categorias|length > 1 %}
<div class="drop">
<div class="central">
<div class="grid">
{% for categoria in categorias %}
<ul class="list">
<li class="t"><a href="{{ categoria.url }}"{{ categoria.cor != '' ? (' style="color:' ~ categoria.cor ~ '"')|raw : '' }}>{{ categoria.nome }}</a></li>
{% for level2 in categoria.subs %}
<li><a href="{{ level2.url }}"><i class="fa fa-caret-right muted"></i> {{ level2.nome }}</a></li>
{% for level3 in level2.subs %}
<li class="indent"><a href="{{ level3.url }}">- {{ level3.nome }}</a></li>
{% endfor %}
{% endfor %}
</ul>
{% endfor %}
</div>
</div>
</div>
{% endif %}
</li>
{% endif %}
{% for cat in categorias_menu|slice(0,8) %}
<li>
<a href="{{ cat.url }}">
{{ cat.icone_categoria|raw }}
<span{{ cat.cor != '' ? (' style="color:' ~ cat.cor ~ '"')|raw : '' }}>{{ cat.nome }}</span>
{% if cat.subs|length >= 1 %}
<span class="fa fa-angle-down"></span>
{% endif %}
</a>
{% if cat.subs|length >= 1 %}
<div class="drop{{ cat.banner != '' ? ' subs' : '' }}">
<div class="central">
<div class="grid">
{% for level2 in cat.subs %}
<ul class="list">
<li class="t"><a href="{{ level2.url }}">{{ level2.nome }}</a></li>
{% for level3 in level2.subs %}
<li><a href="{{ level3.url }}"><i class="fa fa-caret-right muted"></i> {{ level3.nome }}</a></li>
{% endfor %}
</ul>
{% endfor %}
</div>
{% if cat.banner != '' %}
<div class="bnr">
{{ cat.banner|raw }}
</div>
{% endif %}
</div>
</div>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
</div>
<div class="pull-right">
<div class="search">
<div class="d-none d-md-block">
<form action="busca/" method="get">
<input type="text" class="form-control" name="q" data-url="produtos_autocomplete.php" placeholder="Buscar">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
<span class="cover"></span>
<span class="rm">×</span>
<span class="cover-all"></span>
</div>
<div class="d-block d-md-none">
<a href="" class="bt-mobile mymodal" data-include="inc.php?meio=modal_search" data-title="Pesquisar"><i class="fa fa-search fa-2x"></i></a>
</div>
</div>
{% if not global.var_mostruario %}
<div class="dropdown">
<p><i class="fa fa-user-o"></i> Meus pedidos</p>
<div class="list">
{% if not usuario.logged %}
<a href="login/">Entrar</a>
{% else %}
<a href="central/pedidos/">Central de pedidos</a>
<a href="central/dados/">Meus dados</a>
<a href="#" id="b-desconectar" class="text-danger">Desconectar</a>
{% endif %}
</div>
</div>
<div class="shopcart"></div>
{% elseif global.var_mostruario and not global.var_bloquear_cadastros %}
<div class="dropdown">
<p><i class="fa fa-user-o"></i> Central de informações</p>
<div class="list">
{% if usuario.logged %}
<a href="login/">Entrar</a>
<a href="#" class="mymodal" data-include="inc.php?meio=inc_cadastro" data-width="500" title="Efetuar cadastro">Cadastrar</a>
{% else %}
<a href="central/dados/">Meus dados</a>
<a href="#" id="b-desconectar" class="text-danger">Desconectar</a>
{% endif %}
</div>
</div>
{% endif %}
</div>
</div>
</header>
<script defer>
$(function(){
$(window).scroll(function(){
var scr = $(this).scrollTop(),
w = $(this).width();
if(scr >= 10 && w > 800)
!$('header').hasClass('scroll') ? $('header').addClass('scroll') : '';
else
$('header').hasClass('scroll') ? $('header').removeClass('scroll') : '';
});
{% if not global.var_mostruario %}
$('.shopcart').load('inc.php?meio=shop_inc');
{% endif %}
$('.mobile-inc').load('inc.php?meio=menu_mobile');
});
</script>
// CSS
body{
padding-top: 70px;
}
#btLogo{
width: 140px;
height: 50px;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
overflow: hidden;
margin: 10px 15px 10px 10px;
float: left;
color: transparent;
}
header{
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 999;
background-color: #000;
color: #FFF;
&.scroll{
box-shadow: 0 2px 2px #DDD;
}
.links{
float: left;
max-width: 640px;
height: 70px;
white-space: nowrap;
ul{
list-style: none;
> li{
display: inline-block;
> a{
float: left;
font-size: 14px;
line-height: 68px;
padding: 0 10px;
color: #FFF;
border-bottom: solid 2px #000;
transition: all .01s ease;
i.fa{
margin-right: 5px;
font-size: 20px;
vertical-align: middle;
}
img{
margin-right: 5px;
max-height: 20px;
vertical-align: middle;
}
}
&:hover{
> a{
border-bottom: solid 2px #F60;
}
.drop{
visibility: visible;
opacity: 1;
transition: all .25s ease;
}
}
}
}
}
.search{
width: 190px;
float: left;
margin: 15px 10px;
position: relative;
.cover-all{
width: 100%;
position: fixed;
left: 0;
background-color: #FFF;
top: 0;
height: 70px;
z-index: 1;
visibility: hidden;
}
.bt-mobile{
color: #FFF;
}
form{
position: initial !important;
}
input{
width: calc(100% - 40px);
float: left;
background-color: #333;
color: #FFF;
padding: 0 15px;
line-height: 40px;
height: 40px;
border: 0;
border-bottom: solid 1px rgba(0,0,0,0);
box-shadow: none !important;
border-radius: 0;
&:focus{
border-color: initial;
}
}
button{
width: 40px;
height: 40px;
float: left;
background-color: #F60;
color: #FFF;
font-size: 20px;
&:active{
opacity: 0.7;
}
}
.cover{
visibility: hidden;
position: absolute;
left: 0;
top: 0;
z-index: 3;
width: 100%;
height: 100%;
&.close{
visibility: hidden;
opacity: 0;
}
}
.rm{
visibility: hidden;
position: absolute;
left: 100%;
top: 0;
z-index: 3;
width: 100%;
height: 100%;
background-color: #444;
line-height: 40px;
width: 40px;
color: #FFF;
text-align: center;
font-size: 20px;
}
.boxquery{
width: 400px;
left: auto;
right: 0;
color: #000;
.foto{
width: 50px;
height: 50px;
float: left;
background-color: #EEE;
margin-right: 10px;
position: relative;
overflow: hidden;
}
.det{
width: calc(100% - 60px);
float: left;
h3{
font-size: 16px;
line-height: 18px;
margin-bottom: 5px;
}
p{
font-size: 14px;
line-height: 16px;
color: #F60;
}
}
}
}
.dropdown{
float: left;
line-height: 70px;
margin: 0 10px;
position: relative;
p{
cursor: pointer;
}
.list{
visibility: hidden;
opacity: 0;
width: 150px;
position: absolute;
top: 100%;
right: 0;
z-index: 2;
background-color: #FFF;
border: solid 1px #000;
transition: all .25s ease;
a{
width: 100%;
float: left;
line-height: 35px;
color: #444;
border-top: solid 1px #EEE;
padding: 0 15px;
transition: all .25s ease;
&:first-child{
border-top: 0;
}
&:hover{
background-color: #EEE;
}
}
}
&:hover{
.list{
visibility: visible;
opacity: 1;
}
}
}
.shopcart{
float: left;
border-left: solid 1px #444;
padding-left: 10px;
margin: 10px 0;
}
.cart{
width: 30px;
float: left;
position: relative;
&:not(.zero){
cursor: pointer;
}
i{
font-size: 20px;
line-height: 50px;
}
.sup{
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 20px;
line-height: 20px;
background-color: #F60;
color: #FFF;
border-radius: 100%;
text-align: center;
}
}
}
.drop{
position: absolute;
width: 100%;
max-height: 400px;
overflow: auto;
left: 0;
top: 100%;
padding: 15px 15px 0 15px;
background-color: #FFF;
visibility: hidden;
opacity: 0;
transition: all .25s ease;
box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
&.subs{
.grid{
width: calc(100% - 350px);
float: left;
}
.list{
width: calc(33.3% - 10px);
}
.bnr{
width: 340px;
height: 280px;
float: right;
img{
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
}
}
.list{
width: calc(25% - 10px);
display: inline-block;
vertical-align: top;
margin-bottom: 15px;
float: left;
li{
width: 100%;
float: left;
text-indent: 5px;
&:nth-child(2){
margin-top: 5px;
}
&.indent{
text-indent: 15px;
}
&.t{
text-indent: 0;
a{
font-size: 16px;
line-height: 18px;
padding: 5px 10px;
transition: all .25s ease;
font-weight: bold;
&:hover{
text-decoration: none !important;
background-color: #000;
color: #FFF;
}
}
}
}
a{
width: 100%;
float: left;
padding: 0;
color: #000;
font-size: 14px;
line-height: 22px;
border: none !important;
i{
transition: all .25s ease;
}
&:hover i{
color: #F60;
}
}
}
}
.openmenu{
float: left;
width: 50px;
background-color: #444;
color: #FFF;
text-align: center;
margin: 10px !important;
font-size: 20px;
cursor: pointer;
display: none;
padding: 7px 0;
span{
font-size: 10px;
line-height: 10px;
margin-top: 5px;
display: block;
}
}
// responsive
@media screen and (max-width: 1024px) {
header{
.bar{
padding-right: 10px;
}
.links ul > li > a{
padding: 0 5px;
}
}
#btLogo{
width: 120px;
}
}
@media screen and (max-width: 800px) {
.openmenu{
display: block;
}
#btLogo{
margin-left: 0;
margin-right: 0;
}
header{
.links,
.dropdown{
display: none;
}
.search{
margin-top: 21px;
}
.shopcart{
margin: 10px;
}
}
}
@media screen and (max-width: 598px) {
header{
.search{
width: 40px;
input{
visibility: hidden;
width: 200px;
position: absolute;
right: 100%;
top: 0;
z-index: 1;
background-color: #FFF !important;
color: #000 !important;
}
&.open{
input,
.rm{
visibility: visible;
}
}
.boxquery{
width: 100%;
position: fixed;
left: 0;
top: 70px;
}
cover{
visibility: visible;
}
}
}
}
@media screen and (max-width: 425px) {
}
@media screen and (max-width: 360px) {
}
@media screen and (max-width: 320px) {
}