Last active
November 4, 2019 09:47
-
-
Save Vardner/db361aa4b8097012126447fe4fce0f72 to your computer and use it in GitHub Desktop.
Simple dropdown menu
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
HTML: | |
<div data-dropdown="toggle"> | |
<div>Block</div> | |
<ul data-dropdown="target"> | |
<li> | |
<a f href="javascript: void(0)" class="category-menu__item-link"> | |
<span> | |
TEXT | |
</span> | |
</a> | |
</li> | |
</ul> | |
</div> | |
<div id="shadow></div> | |
JS: | |
'use strict'; | |
function enableDropdowns () { | |
const dropdownElements = $('[data-dropdown=toggle]'); | |
if (dropdownElements.length) { | |
dropdownElements.click(showDropdown) | |
} | |
function showDropdown (e) { | |
const shadow = $('#shadow'); | |
const dropdown = $(this); | |
const dropdownContent = dropdown.find('[data-dropdown=target]'); | |
if (e.target.closest('[data-dropdown=target]')) { | |
return; | |
} | |
shadow.toggleClass('active'); | |
dropdownContent.slideToggle(500); | |
shadow.click( | |
() => { | |
shadow.removeClass('active'); | |
dropdownContent.removeClass('active'); | |
dropdownContent.slideUp(500); | |
} | |
) | |
} | |
} | |
enableDropdowns(); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Nice. Because of the more abstract functions such as
toggleClass
andslideToggle
that I usually tend to avoid. I am a do it myself type of guy. I get scared using these functions thinking, "What if it goes wrong?"