003. Header Clássico + Topbar + Search - Comp. Interago
Cabeçalho clássico + Topbar + Search - Componente com UX aprimorada e Pesquisa para Catálogo
FIDDLE: https://jsfiddle.net/francisco_negrao/4z0b5tfe/76/
HTML:
<header id="js-header">
<div class="topbar" id="js-topbar">
<div class="container">
<div class="row">
<div class="col-12">
<a href="#link-google-maps" target="_blank" title="Venha visitar nosso local físico - NOME EMPRESA" rel="noopener noreferrer nofollow">
<img width="16" height="16" src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-map-marker-alt.svg" alt="Ícone Ponteiro" />
<span>Av. Trocar, n° 999, Cidade Trocar</span>
</a>
<a href="https://web.whatsapp.com/send?phone=5517999999999" target="_blank" title="Falar no WhatsApp - NOME EMPRESA" rel="noopener noreferrer nofollow">
<img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-whatsapp.svg" width="16" height="16" alt="Ícone WhatsApp" /> <span>+55 (88) 99911-0253</span>
</a>
<!-- REDES SOCIAIS, DESCOMENTAR PARA HAB. -->
<!--<a
href="#"
target="_blank"
title="Ir para Perfil do Instagram - NOME EMPRESA"
rel="noopener noreferrer nofollow"
>
<img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-instagram.svg" width="16" height="16" alt="Ícone Instagram" />
</a>
<a
href="#"
target="_blank"
title="Ir para a Página do Facebook - NOME EMPRESA"
rel="noopener noreferrer nofollow"
>
<img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-facebook-square-o.svg" width="16" height="16" alt="Ícone Facebook" />
</a>-->
<a href="contato" title="Ir para Página de Contato" rel="noopener noreferrer nofollow" class="btn btn-topbar">ENTRAR EM CONTATO</a>
</div>
<!--12-->
</div>
<!--row-->
</div>
<!--container-->
</div>
<!--topbar-->
<div class="container">
<div class="row">
<div class="col-12">
<div class="nav-bar">
<div class="logo">
<a href="" title="Ir para a Página Inicial" rel="nofollow">
<img src="https://www.interago.com.br/App/Sites/40/mc/logotipos/logoEcoWebdesign.svg" alt="Logo Website MODELO 2022" class="img-fluid" loading="lazy" />
</a>
</div>
<div class="mobile-search" id="mobileSearch">
<form action="catalogo/q.php?m=search" method="get" novalidate=""> <input type="hidden" name="m" value="search"> <input type="text" name="q" value="" id="searchToggle" class="search" placeholder="Busque um produto...">
</form>
</div>
<nav>
<div class="flexNavIcons">
<input class="inputSearchBtn" type="checkbox" id="inputSearchBtn" />
<label onclick="searchToggle()" class="searchBtn" for="inputSearchBtn"><img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-search.svg" width="16" height="16" alt="Ícone Busca" /></label>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label onclick="overlayLeft()" class="menu-icon" for="menu-btn">
<span class="navicon"></span>
</label>
</div>
<div id="nav-list">
<input class="menu-close" type="checkbox" id="menu-close" />
<label
class="menu-close-btn"
for="menu-close"
onclick="menuToggle()"
>
Fechar Menu
</label>
<ul>
<li>
<a href="" title="Ir para a página inicial">Página Inicial</a>
</li>
<li>
<a
href="produtos"
title="Conhecer os produtos da NOME DA EMPRESA"
>Produtos</a
>
</li>
<li>
<a
href="galeria"
title="Portfólio com serviços da NOME DA EMPRESA"
>Galeria</a
>
</li>
<li>
<a
href="noticias"
title="Fique por dentro das novidades da NOME DA EMPRESA"
>Notícias</a
>
</li>
<li>
<a href="videos" title="Veja os vídeos da NOME DA EMPRESA"
>Vídeos</a
>
</li>
<li>
<a
href="contato"
title="Entre em contato com a NOME DA EMPRESA"
>Contato</a
>
</li>
<li class="desktop-search">
<form action="catalogo/q.php?m=search" method="get" novalidate=""> <input type="hidden" name="m" value="search"> <input type="text" class="search" name="q" value="" placeholder="Busque um produto...">
<img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-search.svg" width="16" height="16" alt="Ícone Busca" />
</form>
</li>
</ul>
</div>
</nav>
</div>
<!--box-nav-->
</div>
<!--12-->
</div>
<!--row-->
</div>
<!--container-->
</header>
<div class="fixedCorrection">
</div>
CSS:
/* NAVBAR */
/* Estilo Barra de Navegação Responsiva */
header { box-shadow: 0px 3px 12px rgb(0 0 0 / 10%); background-color: #fff; position: fixed; width: 100%; z-index: 999; transition: 0.5s all;}
header .nav-bar { display: flex; height: 100%; position: relative; min-height: 90px; align-items: center;}
header .nav-bar nav { margin: auto 0px auto auto;}
header .nav-bar ul { padding: 0px; margin: 0px; list-style: none;}
header .nav-bar ul>li { display: inline-block; margin: 0px 10px;}
header .nav-bar li>a { color: #041c27; text-decoration: none; transition: 0.3s ease; padding: 5px 5px; font-size: 15px; font-weight: 500;}
header .nav-bar li>a:hover { color: #0098db;}
header .nav-bar ul>li:last-child { margin: 0px 0px 0px 6px;}
header .btn-topbar { background-color: #cd3537; color: white; padding: 5px 20px;}
.logo img { max-width: 160px; display: block;}
/* OVERLAY CSS */
#js-header.overlay--left:after { content: ""; background-color: rgb(0 0 0 / 80%); width: 100%; height: 110vh; display: block; position: fixed; pointer-events: unset; z-index: 998; top: -39px;}
/* CORREÇÃO BARRA FIXA */
.fixedCorrection { height: 124px;}
/* ESTILOS MOBILE */
/* Criando Ícone Hamburger */
header .menu-icon { cursor: pointer; display: none; float: right; padding: 28px 3px; position: relative; user-select: none;}header .menu-icon .navicon { background: #163d4f; display: block; height: 2px; position: relative; transition: background 0.2s ease-out; width: 18px;}header .menu-icon .navicon:before,header .menu-icon .navicon:after { background: #163d4f; content: ""; display: block; height: 100%; position: absolute; transition: all 0.2s ease-out; width: 100%;}header .menu-icon .navicon:before { top: 5px;}header .menu-icon .navicon:after { top: -5px;}
/* Criando Animação Menu Hamburger */
header .menu-btn { display: none;}header .menu-btn:checked ~ .menu-icon .navicon { background: transparent;}header .menu-btn:checked ~ .menu-icon .navicon:before { transform: rotate(-45deg);}header .menu-btn:checked ~ .menu-icon .navicon:after { transform: rotate(45deg);}header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { top: 0;}
/* Criando botão fechar */
header .menu-close { display: none;}header .menu-close-btn { background-color: #eee; color: #163d4f; padding: 5px; border-radius: 5px; margin: 5px 15px 5px auto; display: none; width: 140px; text-align: center; cursor: pointer; font-size: 12px; font-weight: 600;}
/* Manipulando lista para criar navbar slider */
@media (max-width: 992px) { /* Aplicar estilo para tela menor do que qualquer tela grande (laptop ou desk) */
header .nav-bar #nav-list { position: fixed; top: 0; left: 0; width: 0vw; height: 100vh; z-index: 999; overflow-x: hidden; -webkit-transition: width 0.5s ease-in-out; -moz-transition: width 0.5s ease-in-out; -o-transition: width 0.5s ease-in-out; transition: width 0.5s ease-in-out; background-color: #f9f9f9; box-shadow: 0px 0px 24px rgb(0 0 0 / 10%); }
header #nav-list.active { width: 70vw; }
header .nav-bar ul>li { display: block; margin: 0px; color: black; }
header .nav-bar ul>li:last-child { margin: 0px; }
header .nav-bar ul>li a { display: block; padding: 15px; border-bottom: solid 1px #ccc; color: black; }
header .nav-bar ul>li:first-of-type a { border-top: solid 1px #ccc; }
header .menu-close-btn { display: block; }
header .menu-icon { display: block; }}
/* ESTILO SEARCH BAR */
header .search { padding: 10px 10px; background-color: #f9f9f9; border: solid 1px #ccc; border-radius: 3px;}
header input:focus { border-color: transparent; box-shadow: none; outline: 0 none;}
header input.search::placeholder { color: #bbb;}
header form { display: flex; position: relative; align-items: center;margin: 0px;
}
header form img { position: absolute; right: 10px; filter: brightness(1) invert(0.3);}
.flexNavIcons { display: flex; align-items: center; gap: 15px;}
.inputSearchBtn { display: none;}
.searchBtn { display: none;}
.mobile-search { display: none;}
/* MOBILE SEARCH */
@media (max-width: 992px) { header .nav-bar { flex-wrap: wrap; } header .nav-bar li.desktop-search { display: none; } .mobile-search { margin: 10px auto 15px auto; margin-right: 0px; width: 100%; order: 1; display: none; } .mobile-search.active { display: block; } .mobile-search .search { border: 1px solid #DCDCDC; outline: none; display: block; position: relative; min-width: 130px; width: 100%; padding: 10px 5px; } header input.search::placeholder { font-size: 11px; max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } header form i { font-size: 11px; } .searchBtn { display: block; cursor: pointer; }}
/* Estilo Barra do Topo */
.topbar { background-color: #07212b; padding: 5px 0px; transition: 0.5s all;}.topbar .col-12 { display: flex; justify-content: flex-end;}.topbar a { font-size: 12px; margin: 0px 0px 0px 15px; color: #fff; text-decoration: none; transition: 0.2s ease; display: flex; flex-wrap: wrap; gap: 10px; align-items: center;}.topbar a:hover { transform: scale(1.03); color: #ffffff;}.topbar a img { width: 16px; filter: brightness(0) invert(1)}.topbar .btn-topbar { width: auto; background-color: #0071E3; border-radius: 2px; font-weight: 500; padding: 4px 15px; display: flex; align-items: center;}.topbar .btn-topbar:hover { background-color: #00638e; color: #fff; transform: none;}
/* 03.1 Manipulando conteúdo para dispositivos com telas menores do que 992px */
@media (max-width: 992px) { /* Aplicar estilo para tela menor do que qualquer tela grande (laptop ou desk) */ .topbar a { overflow: hidden; width: 24px; height: 24px; background-color: #fff; border-radius: 50px; justify-content: center; } .topbar a img { filter: brightness(1) invert(0); } .topbar a span { display: none; }}
javaScript:
// Script com função de checagem busca
function searchToggle() { if (document.getElementById("inputSearchBtn").checked) { document.getElementById("mobileSearch").classList.remove("active"); } else { document.getElementById("mobileSearch").classList.add("active"); }}
// Script com função de checagem botão hamburger
function menuToggle() { document.getElementById("menu-btn").checked = false; document.getElementById("nav-list").classList.remove("active"); document.getElementById("js-header").classList.remove("overlay--left");}
// Script para criar Overlay ao abrir navbar
function overlayLeft() { if (document.getElementById("menu-btn").checked) { document.getElementById("js-header").classList.remove("overlay--left"); document.getElementById("nav-list").classList.remove("active"); } else { document.getElementById("js-header").classList.add("overlay--left"); document.getElementById("nav-list").classList.add("active"); }}
// Script para esconder barra do topo ao descer
window.addEventListener('scroll', function(event) { let screenWidthChange = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0); navListFix(screenWidthChange);}, true);
window.addEventListener('resize', function(event) { let screenWidthChange = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0); navListFix(screenWidthChange);}, true);
function navListFix(screenWidth) { var scrollTop = window.pageYOffset !== undefined ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body) .scrollTop; // Vamos captar em pixels, a quantidade de scroll da página
var topBar = document.querySelector("#js-topbar").clientHeight;
if (scrollTop >= 1) { // Caso o usuário desca 1 pixel, vamos esconder a barra do topo
document.getElementById("js-header").style.transform = "translateY(-" + topBar + "px)";
document.getElementById("js-topbar").style.transform = "translateY(-" + topBar + "px)"; if(screenWidth < 991){ // Vamos manipular nossa navbar que abre de lado no mobile, para manter a posição quando rolar a página
document.getElementById("nav-list").style.transform = "translateY(" + topBar + "px)"; }
} else { // Caso o usuário volte ao topo da página, vamos mostrar a barra do topo
document.getElementById("js-header").style.transform = ""; document.getElementById("js-topbar").style.transform = "";
if(screenWidth < 991){ // Vamos manipular nossa navbar que abre de lado no mobile, para manter a posição quando voltar para o topo a página
document.getElementById("nav-list").style.transform = "translateY(0px)"; } }}
Você também pode gostar de ler
003. Header Clássico + Topbar + Search - Comp. Interago
Cabeçalho clássico + Topbar + Search - Componente com UX aprimorada e Pesquisa para Catálogo
Em 09/06/2022 às 17h55 - Atualizado em 16/08/2022 às 09h09
001. Header Clássico - Comp. Interago
Cabeçalho clássico - componente base para cabeçalhos horizontais
Em 09/06/2022 às 06h51 - Atualizado em 16/08/2022 às 09h09
002. Header Clássico + Topbar - Comp. Interago
Cabeçalho clássico + Topbar - Componente com UX aprimorada onde informações importantes são na primeira borda.
Em 09/06/2022 às 09h07 - Atualizado em 16/08/2022 às 09h09