Topo - Modelo 03
Modelo 03 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>
<div class="links-line">
<a href="./"><i class="fa fa-home"></i></a>
<a href="fale-conosco/"><i class="fa fa-envelope"></i></a>
</div>
</div>
<div class="pull-right">
<div class="links-line">
{% if televendas %}
<a href="fale-conosco/"><i class="fa fa-phone"></i> {{ televendas }}</a>
{% endif %}
{% if not global.var_bloquear_cadastros %}
{% if not usuario.logged %}
<a href="login/"><i class="fa fa-sign-in"></i> Entrar</a>
{% else %}
<a href="#" class="text-error" id="b-desconectar"><i class="fa fa-power-off"></i> Sair</a>
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
<div id="linha-logo" class="block">
<div class="central">
<div class="b">
<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>
</div>
<div class="links-topo">
{% if not global.var_bloquear_cadastros %}
<a href="central/dados/"><i class="fa fa-user"></i> Meus dados</a>
{% endif %}
{% if not global.var_mostruario %}
<a href="central/pedidos/"><i class="fa fa-archive"></i> Meus pedidos</a>
{% endif %}
</div>
{% if not global.var_mostruario %}
<div id="load-carrinho" class="shopcart"></div>
{% endif %}
</div>
</div>
</div>
</div>
<div class="l_links block">
<div class="central">
<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="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>
</div>
</div>
</header>
<script defer>
$(function(){
var heightTop = $('header').outerHeight(true) || 0;
$('body').css({'padding-top': heightTop});
$(window).scroll(function(){
var scr = $(this).scrollTop();
var w = $(this).width();
if(scr >= 100 && w > 800){
if(!$('header').hasClass('scroll')){
$('header').addClass('scroll');
}
}else{
if($('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
header{
position: fixed;
z-index: 999;
left: 0;
top: 0;
.search{
.boxquery{
width: 305px;
top: 49px;
left: 10px;
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;
}
}
}
}
.l_links{
background-color: #FFF;
border-top: solid 1px #000;
border-bottom: solid 1px #000;
}
.links{
width: 100%;
float: left;
position: relative;
text-align: center;
ul{
list-style: none;
&:not(.list){
> li{
margin-bottom: -5px;
display: inline-block;
> a{
float: left;
font-size: 12px;
line-height: 48px;
padding: 0 10px;
color: #000;
transition: all .25s ease;
i.fa{
display: block;
font-size: 30px;
margin-top: 15px;
transition: all .25s ease;
}
img{
display: block;
max-height: 35px;
margin: 15px auto 0 auto;
}
}
&:hover{
> a{
border-color: #F60;
}
.drop{
visibility: visible;
opacity: 1;
top: calc(100% + 1px);
transition: all .25s ease;
}
}
}
}
}
}
&.scroll{
box-shadow: 0 2px 2px #DDD;
#linha-topo{
margin-top: -30px;
}
.l_links{
display: none;
}
.central > .b{
margin-top: 0;
}
}
}
.drop{
position: absolute;
width: 100%;
max-height: 400px;
overflow: auto;
left: 0;
top: 115%;
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: 0 0 4px 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;
i{
transition: all .25s ease;
}
&:hover i{
color: #F60;
}
}
}
}
#linha-topo{
width: 100%;
float: left;
background-color: #000;
transition: all .25s ease;
}
#links-line,
.links-line{
float: left;
a{
color: #FFF;
line-height: 30px;
float: left;
padding: 0 15px;
font-size: 12px;
transition: linear .25s;
&:hover{
background-color: #FFF;
color: #000;
}
}
}
#topo{
width: 100%;
float: left;
background-color: #FFF;
.central{
> .b{
width: 100%;
float: left;
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: 180px;
height: 70px;
margin: 15px;
float: left;
overflow: hidden;
text-indent: -99999px;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
#load-carrinho{
position: absolute;
top: 0;
right: 15px;
width: 100px;
height: 100px;
.cart{
text-align: center;
position: relative;
height: 100%;
&:not(.zero){
cursor: pointer;
}
i{
font-size: 50px;
line-height: 100px;
}
.sup{
width: 30px;
height: 30px;
line-height: 30px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -15px;
margin-top: -10px;
background-color: #F60;
color: #FFF;
border-radius: 100%;
font-size: 14px;
}
}
}
#search{
width: 400px;
float: left;
margin-left: 20px;
position: relative;
margin: 25px 40px;
input[type="text"]{
width: 100%;
float: left;
height: 50px;
padding: 10px 15px;
border-radius: 3px !important;
padding-right: 85px;
border-color: #F60;
box-shadow: none;
}
button[type="submit"]{
width: 80px;
text-align: center;
background-color: #F60;
color: #FFF;
height: 50px;
border-radius: 0 3px 3px 0;
position: absolute;
top: 0;
right: -1px;
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: 300px;
}
}
@media screen and (max-width: 800px) {
.openmenu{
display: block;
}
body{
padding-top: 50px !important;
}
#topo{
position: relative;
.central > .b{
margin-top: 0;
}
.links-topo{
display: none;
}
}
#linha-topo{
position: fixed;
left: 0;
top: 0;
z-index: 999;
.pull-right .links-line{
display: none;
}
}
#links-line a, .links-line a{
line-height: 50px;
}
#search{
width: calc(100% - 20px);
margin: 0 10px 10px 10px;
button[type="submit"]{
width: 60px;
height: 40px;
border-radius: 0;
}
input[type="text"]{
height: 40px;
border-radius: 0 !important;
}
}
header{
position: relative !important;
.search{
.boxquery{
width: 100%;
top: 40px;
left: 0;
}
}
}
.l_links{
display: none;
}
#btLogo{
margin: 10px;
height: 50px;
width: 160px;
}
#load-carrinho{
width: auto;
height: 70px;
.cart{
i{
font-size: 50px;
line-height: 70px;
}
.sup{
width: 30px;
height: 30px;
line-height: 30px;
margin-left: -15px;
margin-top: -15px;
}
}
}
}
@media screen and (max-width: 598px) {
}
@media screen and (max-width: 425px) {
}
@media screen and (max-width: 360px) {
}
@media screen and (max-width: 320px) {
}