- Página Inicial
- Jquery
- Menu Dropdown Toggle
- Voltar
Menu Dropdown Toggle
Neste tutorial veja como criar um Menu Dropdown Toggle
Nesta seção, projetaremos uma estrutura simples na tag <nav>, <ul>, <li> e a <href> para inserir link de destino.
Essas são as tags que usaremos para criar o nosso menu dropdown toggle com html, css e jquery.
Vamos Adicionar o HTML
<nav role="navigation" class="menu"> <ul class="menu-items"> <li class="menu-item"> <a href="#" class="menu-link" title="Home"><span>Home</span></a> </li> <li class="menu-item dropdown"> <a href="#" class="menu-link" title="Front-end"><span>Front-end +</span></a> <nav class="submenu"> <ul class="submenu-items"> <li class="submenu-item"><a href="#" class="submenu-link">Html</a></li> <li class="submenu-item"><a href="#" class="submenu-link">Css</a></li> <li class="submenu-item"><a href="#" class="submenu-link">Jquery</a></li> </ul> </nav> </li> <li class="menu-item"> <a href="#" class="menu-link" title="Artigos"><span>Artigos</span></a> </li> <li class="menu-item"> <a href="#" class="menu-link" title="Sobre"><span>Sobre</span></a> </li> <li class="menu-item"> <a href="#" class="menu-link" title="Contato"><span>contato</span></a> </li> </ul> </nav>
Vamos Adicionar o CSS
Nesta seção, usaremos algumas propriedades CSS para estilizar e animar o nosso
com html, css e jquery.dropdown toggle
.menu { font-family: 'open_sansregular'; font-size: 16px; } .menu-items { padding: 0; list-style: none; } .menu-item { display: inline-block; margin-right: 25px; } .menu-item:last-child { margin-right: 0; } .menu-link, .menu-link:link, .menu-link:visited, .menu-link:active, .submenu-link, .submenu-link:link, .submenu-link:visited, .submenu-link:active { display: block; position: relative; font-size: 14px; letter-spacing: 1px; cursor: pointer; text-decoration: none; outline: none; } .menu-link, .menu-link:link, .menu-link:visited, .menu-link:active { color: #242424; font-weight: bold; } .menu-link::before { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 2px; background-color: #0055f7; opacity: 0; -webkit-transform: translate(0, 10px); transform: translate(0, 10px); transition: opacity 0.3s ease, transform 0.3s ease; } .menu-link:hover::before, .menu-link:hover::before { opacity: 1; -webkit-transform: translate(0, 5px); transform: translate(0, 5px); } .dropdown { position: relative; } .dropdown .menu-link { padding-right: 15px; height: 17px; line-height: 17px; } .dropdown .menu-link::after { content: ""; position:absolute; top: 6px; right: 0; border: 5px solid transparent; border-top-color: #fff; } .submenu { position: absolute; top: 100%; left: 50%; z-index: 100; width: 200px; margin-left: -100px; background: #fff; border-radius: 3px; line-height: 1.46667; margin-top: -5px; box-shadow: 0 0 8px rgba(0,0,0,.3); opacity:0; -webkit-transform: translate(0, 0) scale(.85); transform: translate(0, 0)scale(.85); transition: transform 0.1s ease-out, opacity 0.1s ease-out; pointer-events: none; } .submenu::after, .submenu::before { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -10px; border: 10px solid transparent; height: 0; } .submenu::after { border-bottom-color: #fff; } .submenu::before { margin-left: -13px; border: 13px solid transparent; border-bottom-color: rgba(0,0,0,.1); -webkit-filter:blur(1px); filter:blur(1px); } .submenu-items { list-style: none; padding: 10px 0; } .submenu-item { display: block; text-align: left; } .submenu-link, .submenu-link:link, .submenu-link:visited, .submenu-link:active { color: #242424; font-weight: bold; padding: 10px 20px; } .submenu-link:hover { color: #0055f7; } .submenu-seperator { height: 0; margin: 12px 10px; border-top: 1px solid #eee; } .show-submenu .submenu { opacity: 1; -webkit-transform: translate(0, 25px) scale(1); transform: translate(0, 25px) scale(1); pointer-events: auto; }
Vamos Adicionar o Scritpt para dar o efeito Toggle
OBS: não esqueça de linkar o jquery.js
exemplo:
<script src="js/jquery.js"></script>
<script> [].slice.call(document.querySelectorAll('.dropdown .menu-link')).forEach(function(el){ el.addEventListener('click', onClick, false); }); function onClick(e){ e.preventDefault(); var el = this.parentNode; el.classList.contains('show-submenu') ? hideSubMenu(el) : showSubMenu(el); } function showSubMenu(el){ el.classList.add('show-submenu'); document.addEventListener('click', function onDocClick(e){ e.preventDefault(); if(el.contains(e.target)){ return; } document.removeEventListener('click', onDocClick); hideSubMenu(el); }); } function hideSubMenu(el){ el.classList.remove('show-submenu'); } </script>
Combinando as Três seções acima Html Css e jquery temos o seguinte Resultado!
Veja o Resultado baixo!
Baixar Código Veja Funcionando
Publicado por: Loop Nerd
224 Visualizações
Deixe um comentário