003. Header Clássico + Topbar + Search - Comp. Interago

Cabeçalho clássico + Topbar + Search - Componente com UX aprimorada e Pesquisa para Catálogo

Francisco Negrão

#Headers

Postado: 09/06/2022 às 17h55

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>

<!--<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>

</div>

</div>

</div>

<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>

</div>

</div>

</div>

</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)";
}
}
}

003. Header Clássico + Topbar + Search - Comp. Interago

Cabeçalho clássico + Topbar + Search - Componente com UX aprimorada e Pesquisa para Catálogo

Francisco Negrão

#Headers

Você também pode gostar de ler

001. Header Clássico - Comp. Interago

002. Header Clássico + Topbar - Comp. Interago