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) {
	
}