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 categorias|length > 3 and global.show_menu_todaloja %}
                            <li>
                                <a href="" onClick="return false;">
                                    <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">&times;</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) {
	
}