- Página Inicial
- Códigos CSS Prontos
- Full Screen Menu Html e Css
- Voltar
Full Screen Menu Html e Css
Neste artigo veja como criar um Menu com efeito de FULL SCREEN quando o usuário clica no Botão Hamburguer do menu
Estrutura Base que vamos usar no projeto!
A estrutura base do nosso pequeno projeto para os ícones vai ser composto por apenas dois arquivos, por ser apenas dois arquivos, não será algo muito complexo de realizar, o primeiro arquivo será o index.html e o segundo style.css.
Portanto, crie uma pasta CSS, para inserir o arquivo style.css, a mesma regra serve se você estiver usando scripts crie pastas para organizar o seu projeto seja qual for organização é fundamental para organização e manutenção no futuro.
Nesta seção, projetaremos uma estrutura simples nas tags <div>, <span>, <?>, e a tag <a> para inserirmos o link de destino.
Essa tag que usaremos para criar o nosso Full Screen Menu Html e Css.
A primeira coisa que você deve fazer é colocar todas as tags básicas que são essenciais independente de qual projeto esteja sendo desenvolvido.
Nesta seção, usaremos algumas as tags HTML para montar a estrutura do Menu.
Estrutura Código Html:
<div class="menu-btn" id="toggle"> <span class="hamburguer-1"></span> <span class="hamburguer-2"></span> <span class="hamburguer-3"></span> </div> <div class="overlay" id="overlay"> <nav class="overlay-menu"> <ul> <li><a href="#" title="Home">Home</a></li> <li><a href="#" title="Sobre">Sobre</a></li> <li><a href="#" title="Blog">Blog</a></li> <li><a href="#" title="Contato">Cotato</a></li> </ul> </nav> </div>
Estrutura Código CSS
Para conseguirmos o efeito desejado no Menu, vamos adicionar algumas propriedades CSS para as tags que foram colocadas na sessão HTML que usamos.
Portanto, você pode criar um arquivo style.css, coloque todo o código que se encontra logo mais abaixo.
Nesta seção, usaremos algumas propriedades CSS para estilizar os nosso menu.
.menu-btn { position: fixed; top: 5%; right: 7%; height: 27px; width: 30px; cursor: pointer; z-index: 100; transition: opacity 0.25s ease; } .menu-btn:hover { opacity: 0.7; } .menu-btn.active .hamburguer-1 { transform: translateY(11px) translateX(0) rotate(45deg); background: #010101; } .menu-btn.active .hamburguer-2 { opacity: 0; background: #010101; } .menu-btn.active .hamburguer-3 { transform: translateY(-5px) translateX(0) rotate(-45deg); background: #010101; } .menu-btn span { background: #202020; border: none; height: 3px; width: 100%; position: absolute; top: 0; left: 0; transition: all 0.35s ease; cursor: pointer; } .menu-btn span:nth-of-type(2) { top: 8px; } .menu-btn span:nth-of-type(3) { top: 16px; } .overlay { position: fixed; background: #FFE452; top: 0; left: 0; z-index: 9; width: 100%; height: 0%; opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0.35s, height 0.35s; overflow: hidden; } .overlay.open { opacity: 0.9; visibility: visible; height: 100%; } .overlay.open li { -webkit-animation: fadeInRight 0.5s ease forwards; animation: fadeInRight 0.5s ease forwards; -webkit-animation-delay: 0.35s; animation-delay: 0.35s; } .overlay.open li:nth-of-type(2) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .overlay.open li:nth-of-type(3) { -webkit-animation-delay: 0.45s; animation-delay: 0.45s; } .overlay.open li:nth-of-type(4) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .overlay nav { position: relative; height: 70%; top: 50%; transform: translateY(-50%); font-size: 50px; font-family: "Vollkorn", serif; font-weight: 400; text-align: center; } .overlay ul { list-style: none; padding: 0; margin: 0 auto; display: inline-block; position: relative; height: 100%; } .overlay ul li { display: block; height: 25%; height: calc(100% / 4); min-height: 50px; position: relative; opacity: 0; } .overlay ul li a { display: block; position: relative; color: #010101; text-decoration: none; overflow: hidden; } .overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after { width: 100%; } .overlay ul li a:after { content: ""; position: absolute; bottom: 0; left: 50%; width: 0%; transform: translateX(-50%); height: 3px; background: #010101; transition: 0.35s; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; left: 20%; } 100% { opacity: 1; left: 0; } } @keyframes fadeInRight { 0% { opacity: 0; left: 20%; } 100% { opacity: 1; left: 0; } }
Vamos adicionar o Script para dar o efeito FULL SCREEN
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script type="text/javascript"> $('#toggle').click(function() { $(this).toggleClass('active'); $('#overlay').toggleClass('open'); }); </script>
Combinando as Três seções acima com Html, Css e Javascript temos o seguinte Resultado!
Veja o Resultado baixo!
Full Screen Menu Html e Css
Baixar Código Veja Funcionando
Neste artigo, você aprendeu o passo a passo de como estilizar Full Screen Menu Html e Css
.
existem diversas formas de estilizar menus com efeitos, cores, formas e animações diferentes.
Fica o desafio para você tentar criar um novo design do zero a criatividade é sua.
faça um exemplo e comente aqui em baixo e deixe um link do seu desafio.
Publicado por: Loop Nerd
151 Visualizações
Deixe um comentário