- Página Inicial
- Códigos CSS Prontos
- Menu responsivo com CSS, HTML e JS
- Voltar
Menu responsivo com CSS, HTML e JS
Veja neste tutorial como criar um Menu responsivo com CSS, HTML e JS.
Nesta seção, projetaremos uma estrutura simples na tag <nav>, <ul>, <li> ,<span> , <i> e a <a> para inserirmos o link de destino.
Essas são as tags que usaremos para criar o nosso Menu dropdown
.
Vamos Adicionar o HTML
<nav> <ul class="menu"> <li class="logo"><a href="#" title="Loop Nerd">Loop Nerd</a></li> <li class="item"><a href="#" title="Home">Home</a></li> <li class="item"><a href="#" title="Html">Html</a></li> <li class="item"><a href="#" title="Css">Css</a></li></li> <li class="item"><a href="#" title="Jquery">Jquery</a></li></li> <li class="item button"><a href="#" title="Entrar"><i class="icon icon-plug"></i> Entrar</a></li> <li class="item button secondary"><a href="#" title="Cadastro"><i class="icon icon-lock-1"></i> Cadastro</a></li> <li class="toggle"><span class="bars"></span></li> </ul> </nav>
Vamos Adicionar o CSS
Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso Menu responsivo com CSS HTML e JS
.
nav { background: #2f2f2f; padding: 5px 20px; } ul { list-style-type: none; } .menu a { color: #ffffff; text-decoration: none; } .menu a:hover { color: #007cff; } .logo a:hover { text-decoration: none; } .menu li { font-size: 16px; padding: 15px 5px; white-space: nowrap; } .logo a, .toggle a { font-size: 20px; } .button.secondary { border-bottom: 1px #007cff solid; } /* Mobile menu */ .menu { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .toggle { order: 1; } .item.button { order: 2; } .item { width: 100%; text-align: center; order: 3; display: none; } .item.active { display: block; } /* Navbar Toggle */ .toggle { cursor:pointer; } .bars { background: #999; display: inline-block; height: 2px; position: relative; transition: background .2s ease-out; width: 18px; } .bars:before, .bars:after { background: #999; content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%; } .bars:before { top: 5px; } .bars:after { top: -5px; } /* Tablet menu */ @media all and (min-width: 468px) { .menu { justify-content: center; } .logo { flex: 1; } .item.button { width: auto; order: 1; display: block; } .toggle { order: 2; } .button.secondary { border: 0; } .button a { padding: 7.5px 15px; background: #007cff; border: 1px #007cff solid; border-radius:50px; } .button.secondary a { background: transparent; } .button a:hover { text-decoration: none; transition:all .25s; color: #2f2f2f; } .button:not(.secondary) a:hover { background: #007cff; border-color: #007cff; } .button.secondary a:hover { color: #007cff; } } /* Desktop menu */ @media all and (min-width: 768px) { .item { display: block; width: auto; } .toggle { display: none; } .logo { order: 0; } .item { order: 1; } .button { order: 2; } .menu li { padding: 15px 10px; } .menu li.button { padding-right: 0; } }
Vamos Adicionar o script para dar o efeito mobile
<script src="js/jquery.js"></script> <script> $(function() { $(".toggle").on("click", function() { if ($(".item").hasClass("active")) { $(".item").removeClass("active"); } else { $(".item").addClass("active"); } }); }); </script>
Combinando as Três seções acima com Html Css e jquery temos o seguinte Resultado!
Veja o Resultado baixo!
Baixar Código Veja Funcionando
Publicado por: Loop Nerd
1.589 Visualizações
Deixe um comentário