- Página Inicial
- Códigos CSS Prontos
- Menu Responsivo html e css efeito slideDown
- Voltar
Menu Responsivo html e css efeito slideDown
Neste tutorial vamos criar um Menu Responsivo html e css efeito slideDown
.
Nesta seção, projetaremos uma estrutura simples na tag <ul>, <li> , <div> e a <a> para inserir o link de destino.
Essas são as tags que usaremos para criar o nosso Menu Responsivo
.
Vamos Adicionar o HTML
<link href="https://fonts.googleapis.com/css?family=Passion+One:400,700,900|Roboto:400,700" rel="stylesheet"> <div class="menu-responsivo"> <div class="top-nav-responsivo" id="mobile"> <a href="#">Home</a> <a href="#">Html</a> <a href="#">Css</a> <a href="#">Jquery</a> <a href="#">WordPress</a> <a href="javascript:void(0);" style="font-size:22px; margin-right: 5px;" class="icon" onclick="myFunction()">☰</a> </div> </div> <div class="menu"> <ul> <li><a href="#" class="underline-center">Menu</a></li> <li><a href="#" class="underline-center">Html</a></li> <li><a href="#" class="underline-center">Css</a></li> <li><a href="#" class="underline-center">Jquery</a></li> <li><a href="#" class="underline-center">WordPress</a></li> </ul> </div>
Vamos Adicionar o CSS
Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso Menu
.
*{ /*Resetando as configurações*/ margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .menu-responsivo { display: none; animation-name: menu-responsivo; animation-duration: 2s; } @keyframes menu-responsivo { 0% {opacity: 0;} 10% {opacity:0; top: 0;} 40% {opacity: 1; top: 20px;} 100% {opacity: 1; top: 20px;} } .menu { background: #f1f1f1; font-family: 'Passion One', cursive; font-size: 3em; display: flex; justify-content: center; align-items: center; position: relative; top: 0px; padding: 0.8em 0; animation-name: menu; animation-duration: 2s; } @keyframes menu { 0% {opacity: 0;} 10% {opacity:0; top: -150px;} 40% {opacity: 1; top: -150px;} 100% {opacity: 1; top: 0px;} } .menu ul { list-style-type: none; width: 1000px; display: flex; flex-wrap: wrap; justify-content: space-between; } .menu ul li a { color: #565454; text-decoration: none; } .menu ul li a:hover { text-decoration: none; color: #282828; } .underline-center { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; overflow: hidden; } .underline-center:before { content: ""; position: absolute; z-index: -1; left: 50%; right: 50%; bottom: 0; background: #00c3ff; height: 3px; -webkit-transition-property: left, right; transition-property: left, right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .underline-center:hover:before, .underline-center:focus:before, .underline-center:active:before { left: 0; right: 0; } .top-nav-responsivo { overflow: hidden; background-color: #282828; } .top-nav-responsivo a { float: left; display: block; color: #00c3ff; text-align: center; padding: 14px 26px; text-decoration: none; font-size: 22px; font-family: 'Roboto', cursive; } .top-nav-responsivo a:hover { background-color: #ddd; color: black; } .top-nav-responsivo .icon { display: none; } @media screen and (max-width: 1028px) { .menu { font-size: 40pt; } } @media screen and (max-width: 800px) { .menu { display: none; } .menu-responsivo { display: block; width: 100%; } } @media screen and (max-width: 800px) { .top-nav-responsivo a:not(:first-child) {display: none;} .top-nav-responsivo a.icon { float: right; display: block; } } @media screen and (max-width: 800px) { .top-nav-responsivo.responsivo {position: relative;} .top-nav-responsivo.responsivo .icon { position: absolute; right: 0; top: 0; } .top-nav-responsivo.responsivo a { float: none; display: block; text-align: left; } }
Vamos Adicionar o script para o menu responsivo
<script> function myFunction() { var x = document.getElementById("mobile"); if (x.className === "top-nav-responsivo") { x.className += " responsivo"; } else { x.className = "top-nav-responsivo"; } } </script>
Combinando as Três seções acima com Html Css e javascript temos o seguinte Resultado!
Veja o Resultado baixo!
Baixar Código Veja Funcionando
Publicado por: Loop Nerd
621 Visualizações
Deixe um comentário