I use This code on my dropdown list Item on click.. it’s working Good . but Problem is .. when I click in link not working..
[].slice.call(document.querySelectorAll('.dropdown .nav-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'); }
An example from here ==> https://codepen.io/0fercpkzi/full/jOMqXgV
Advertisement
Answer
Remove e.preventDefault
inside showSubMenu
, or, perform a check to see if it’s an a
tag being clicked:
[].slice.call(document.querySelectorAll('.dropdown .nav-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) { // Return if target is an anchor tag if (e.target.localName === 'a') return; e.preventDefault(); if (el.contains(e.target)) { return; } document.removeEventListener('click', onDocClick); hideSubMenu(el); }); } function hideSubMenu(el) { el.classList.remove('show-submenu'); }
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { background-color: #f00; } .nav { width: 550px; margin: 100px auto 0 auto; text-align: center; } /* Navigation */ .nav { font-family: Georgia, Arial, sans-serif; font-size: 14px; } .nav-items { padding: 0; list-style: none; } .nav-item { display: inline-block; margin-right: 25px; } .nav-item:last-child { margin-right: 0; } .nav-link, .nav-link:link, .nav-link:visited, .nav-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; } .nav-link, .nav-link:link, .nav-link:visited, .nav-link:active { color: #fff; font-weight: bold; } .nav-link::before { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 3px; background: rgba(0, 0, 0, 0.2); opacity: 0; -webkit-transform: translate(0, 10px); transform: translate(0, 10px); transition: opacity 0.3s ease, transform 0.3s ease; } .nav-link:hover::before, .nav-link:hover::before { opacity: 1; -webkit-transform: translate(0, 5px); transform: translate(0, 5px); } .dropdown { position: relative; } .dropdown .nav-link { padding-right: 15px; height: 17px; line-height: 17px; } .dropdown .nav-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: #3498db; padding: 10px 20px; } .submenu-link:hover { text-decoration: underline; } .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; }
<nav role="navigation" class="nav"> <ul class="nav-items"> <li class="nav-item dropdown"> <a href="#" class="nav-link"><span>Drop Down</span></a> <nav class="submenu"> <ul class="submenu-items"> <li class="submenu-item"><a href="google.com" class="submenu-link">Google</a></li> <li class="submenu-item"><a href="youtube.com" class="submenu-link">Yuotube</a></li> <li class="submenu-item"><a href="facebook.com" class="submenu-link">Facebook</a></li> </ul> </nav> </li> </ul> </nav>