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

Em 09/06/2022 às 09h07 - Atualizado em 16/08/2022 às 09h09

#header #modelos

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

Gostei desse artigo Não gostei desse artigo

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

Francisco Negrão

· #headers

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

Francisco Negrão

· #headers

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

Francisco Negrão

· #headers