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.

Francisco Negrão

#Headers

Postado: 09/06/2022 às 09h07

FIDDLE: https://jsfiddle.net/francisco_negrao/7grzxs34/71/

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="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>
<nav>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label onclick="overlayLeft()" class="menu-icon" for="menu-btn">
<span class="navicon"></span>
</label>
<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>
</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 .menu-btn:checked~#nav-list {
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 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 botão hamburger

function menuToggle() {
document.getElementById("menu-btn").checked = false;

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");
} else {
document.getElementById("js-header").classList.add("overlay--left");
}
}

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

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.

Francisco Negrão

#Headers

Você também pode gostar de ler

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

001. Header Clássico - Comp. Interago