Skip to content

Instantly share code, notes, and snippets.

@pzi
Created July 6, 2016 07:51
Show Gist options
  • Save pzi/f36193a4f2b27cf081121018e335171d to your computer and use it in GitHub Desktop.
Save pzi/f36193a4f2b27cf081121018e335171d to your computer and use it in GitHub Desktop.
Dropdown submenu
$ ->
closeTimeout = 200
isSubmenuOpen = false
toggleSubmenu = (event, $li) ->
$target = $(event.target)
event.preventDefault()
if isSubmenuOpen
closeSubmenu($li)
else
openSubmenu($li)
startCloseSubmenu = ($li) ->
$li.data('closeTimer', window.setTimeout(closeSubmenu.bind(null, $li), closeTimeout))
openSubmenu = ($li) ->
isSubmenuOpen = true
closeTimer = $li.data('closeTimer')
if closeTimer?
window.clearTimeout(closeTimer)
$li
.addClass('is-open')
.find('.submenu')
.attr('aria-hidden', false)
closeSubmenu = ($li) ->
isSubmenuOpen = false
$li
.removeClass('is-open')
.find('.submenu')
.attr('aria-hidden', true)
$('.menu li:has(ul)')
.each ->
$li = $(this)
$li
.on 'touchstart', 'button', (event) -> toggleSubmenu(event, $li)
.on 'mouseenter', -> openSubmenu($li)
.on 'mouseleave', -> startCloseSubmenu($li)
.on 'focusin', -> openSubmenu($li)
.on 'focusout', -> startCloseSubmenu($li)
.submenu
background-color: #fff
box-shadow: 0 7px 7px black(0.15)
list-style: none
margin: 0
min-width: 150px
opacity: 0
padding: 0
position: absolute
right: 5px
top: 100%
transform: translateY(10px)
transition: visibility 0s linear 100ms, opacity 100ms linear, transform 100ms linear
visibility: hidden
z-index: 10
li
padding: 0
a
display: block
padding: $break-space
&:hover, &:active
background-color: $submenu-background-color
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment