001. Header Clássico - Comp. Interago

Cabeçalho clássico - componente base para cabeçalhos horizontais

Francisco Negrão

#headers

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

#header

FIDDLE: https://jsfiddle.net/francisco_negrao/ve0cbyo9/22/

HTML:

<header id="js-header" style="transform: translateY(0px)"> <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:

section { height: 1500px; background-color: black;}

/* 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: 14px; font-weight: 600;}header .nav-bar li > a:hover { color: #107cac;}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: 90px;}

/* 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; border-right: solid 1px #eee; 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; }}

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

Gostei desse artigo Não gostei desse artigo