Topo - Modelo 04
Modelo 04 para o topo da loja virtual.
# HTML
{% set televendas = store.getTextTop() %}
{% 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="mobile-inc"></div>
<div id="topo">
<div id="linha-topo">
<div class="central">
<div class="pull-left">
<span class="openmenu">
<i class="fa fa-bars"></i>
<span class="t">MENU</span>
</span>
{% if televendas %}
<div class="links-line">
<a href="fale-conosco/"><i class="fa fa-phone"></i> {{ televendas }}</a>
</div>
{% endif %}
</div>
</div>
</div>
<div class="central">
<div class="b d-none d-md-block">
<div class="links">
<nav>
<ul>
{% if global.show_menu_todaloja %}
<li>
<a href="todos-produtos/" arial-label"{{ recursos.categoria_geral_titulo_menu }}">
<i class="fa fa-th"></i>
</a>
{% if categorias|length > 1 %}
<div class="drop">
<div class="grid">
{% for categoria in categorias %}
<ul class="list">
<li class="t"><a href="{{ categoria.url }}/"{{ categoria.cor != '' ? ' style=color:' ~ categoria.cor : '' }}>{{ 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>
{% endif %}
</li>
{% endif %}
{% for cat in categorias_menu|slice(0,12) %}
<li>
<a href="{{ cat.url }}/">
{{ cat.icone_categoria|raw }}
<span{{ cat.cor != '' ? ' style=color:' ~ cat.cor : '' }}>{{ 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>
<h1><a href="./" id="btLogo" style="background-image:url({{ store.getLogo() }});">{{ seo.title }}</a></h1>
<div id="search" class="search">
<form action="busca/" method="get">
<input type="text" class="form-control" name="q" data-url="produtos_autocomplete.php" placeholder="Pesquisar">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
<span class="cover"></span>
<span class="rm">×</span>
</div>
<div class="pull-right">
<div class="user">
<span class="t"><i class="fa fa-user"></i></span>
<div class="drp">
{% 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-error">Desconectar</a>
{% endif %}
</div>
</div>
{% if not global.var_mostruario %}
<div id="load-carrinho" class="shopcart"></div>
{% endif %}
</div>
</div>
<div class="d-block d-md-none">
<div class="row align-items-center mb-0">
<div class="col d-flex justify-content-between align-items-center px-4">
<h1><a href="./" id="btLogo">{{ titulo_site }}</a></h1>
<a href="" class="mymodal bt-search-mobile" data-include="inc.php?meio=modal_search" data-title="Pesquisar"><i class="fa fa-search fa-2x"></i></a>
{% if not global.var_mostruario %}
<div id="load-carrinho" class="shopcart">
<div id="load-carrinho" class="shopcart"></div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</header>
<script defer>
$(function(){
$(window).scroll(function(){
var scr = $(this).scrollTop(),
w = $(this).width();
if(scr >= 100 && 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: 130px;
}
header{
width: 100%;
background-color: #FFF;
position: fixed;
z-index: 999;
left: 0;
top: 0;
.search{
.boxquery{
width: 400px;
top: 40px;
left: -150px;
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;
}
}
}
.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;
}
}
.bt-search-mobile{
color: #000;
width: 40px;
height: 40px;
border: solid 1px #000;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
}
.links{
width: 40%;
float: left;
text-align: center;
position: relative;
white-space: nowrap;
ul{
list-style: none;
&:not(.list){
> li{
margin-bottom: -6px;
display: inline-block;
> a{
float: left;
font-size: 12px;
line-height: 40px;
padding: 0 10px;
color: #000;
transition: all .25s ease;
margin: 30px 0;
i.fa{
font-size: 12px;
margin-right: 2px;
transition: all .25s ease;
}
img{
display: block;
max-height: 35px;
margin: 15px auto 0 auto;
}
}
&:hover{
> a{
background-color: #F60;
color: #FFF;
i.fa{
color: #FFF;
}
}
.drop{
visibility: visible;
opacity: 1;
transition: all .25s ease;
}
}
}
}
}
}
.user{
padding: 30px 0;
margin: 0 30px;
float: left;
cursor: pointer;
position: relative;
transition: all .25s ease;
.t{
color: #000;
font-size: 20px;
width: 40px;
height: 40px;
float: left;
line-height: 36px;
border: solid 1px #000;
border-radius: 100%;
text-align: center;
}
&:hover{
.drp{
visibility: visible;
opacity: 1;
transition: all .25s ease;
}
}
.drp{
width: 250px;
border-top: solid 1px #000;
position: absolute;
right: 0;
top: 100%;
z-index: 99;
box-shadow: 0 2px 2px #DDD;
transition: all .1s ease;
visibility: hidden;
opacity: 0;
a{
width: 100%;
float: left;
padding: 10px 15px;
color: #000;
background-color: #FFF;
transition: all .25s ease;
&:hover{
background-color: #EEE;
}
}
}
}
&.scroll{
box-shadow: 0 2px 2px #DDD;
#linha-topo{
margin-top: -30px;
}
#topo .central > .b{
margin-top: 0;
}
.links ul:not(.list) > li > a{
margin: 10px 0;
}
#btLogo{
height: 50px;
margin: 5px 0;
}
#search{
padding-top: 10px;
margin-left: 20px;
}
.user{
padding: 10px 0;
}
#load-carrinho{
margin: 10px 0;
.cart .sup{
top: -10px;
}
}
}
}
.drop{
position: absolute;
width: 1180px;
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;
text-align: left;
z-index: 998;
box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
border-radius: 4px;
&.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;
&:hover i{
color: #F60;
}
i{
transition: all .25s ease;
}
}
}
}
#linha-topo{
width: 100%;
float: left;
background-color: #CCC;
position: relative;
transition: all .25s ease;
}
#links-line,
.links-line{
float: left;
a{
color: #000;
line-height: 30px;
float: left;
padding: 0 15px;
font-size: 12px;
transition: linear .25s;
&:hover{
background-color: #000;
color: #FFF;
}
}
}
#topo{
width: 100%;
float: left;
.central{
> .b{
margin-top: 30px;
position: relative;
transition: all .25s ease;
}
}
.links-topo{
float: left;
margin: 29px 0;
a{
line-height: 40px;
padding: 0 20px;
font-size: 16px;
color: #000;
float: left;
transition: all .25s ease;
&:hover{
background-color: #EEE;
}
i{
transition: all .25s ease;
}
}
}
}
#btLogo{
width: 20%;
height: 70px;
margin: 15px;
float: left;
overflow: hidden;
text-indent: -99999px;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
transition: all .25s ease;
}
#load-carrinho{
float: left;
width: 40px;
height: 40px;
line-height: 38px;
margin: 30px 0;
border: solid 1px #000;
border-radius: 100%;
transition: all .25s ease;
.cart{
text-align: center;
position: relative;
height: 100%;
color: #000;
&:not(.zero){
cursor: pointer;
}
i{
font-size: 20px;
line-height: 4px;
}
.sup{
width: 30px;
height: 30px;
line-height: 30px;
position: absolute;
right: -15px;
top: -15px;
background-color: #F60;
color: #FFF;
border-radius: 100%;
font-size: 14px;
}
}
}
#search{
width: 250px;
float: left;
position: relative;
padding-top: 30px;
transition: all .25s ease;
input[type="text"]{
width: calc(100% - 40px);
float: left;
height: 40px;
padding: 10px;
border: none;
border-bottom: solid 1px;
border-color: #F60;
box-shadow: none;
}
button[type="submit"]{
width: 40px;
text-align: center;
background-color: #F60;
color: #FFF;
height: 40px;
float: left;
font-size: 20px;
&:active{
opacity: 0.8;
}
}
}
.openmenu{
float: left;
width: 50px;
background-color: #444;
color: #FFF;
text-align: center;
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) {
#search{
width: 220px;
}
header{
.links{
padding: 0 10px;
text-align: left;
ul:not(.list) > li:nth-child(4){
display: none;
}
}
.user{
margin: 0 20px;
}
#load-carrinho{
margin: 30px 20px 0 0
}
&.scroll{
#load-carrinho{
margin-right: 20px;
}
}
}
}
@media screen and (max-width: 800px) {
.openmenu{
display: block;
}
body{
padding-top: 180px;
}
header{
box-shadow: 0 2px 2px #DDD;
.links,
.user{
display: none;
}
.search .boxquery{
width: 100%;
top: 40px;
left: 0;
}
#load-carrinho{
margin: 0;
margin-right: 10px;
}
}
#links-line a, .links-line a{
line-height: 50px;
}
#linha-topo .pull-right .links-line{
display: none;
}
#search{
width: calc(100% - 20px);
margin: 10px;
padding-top: 0;
}
.l_links,
#topo .links-topo{
display: none;
}
#topo .central > .b{
margin-top: 50px;
}
#btLogo{
margin: 10px;
height: 50px;
width: 200px;
}
}
@media screen and (max-width: 598px) {
body{
padding-top: 120px;
}
#search{
width: 40px;
float: right;
margin: 15px 80px 0 0;
input[type="text"]{
width: 180px;
}
}
header{
.search{
width: 40px;
input{
visibility: hidden;
width: 230px;
position: absolute;
right: 100%;
top: 0;
z-index: 1;
}
&.open{
input,
.rm{
visibility: visible;
}
}
.boxquery{
width: calc(100% - 20px);
position: fixed;
left: 10px;
top: 110px;
}
.cover{
visibility: visible;
}
}
}
}
@media screen and (max-width: 425px) {
}
@media screen and (max-width: 360px) {
}
@media screen and (max-width: 320px) {
}