Dropdown submenu

menu.coffee

$ ->
  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)

menu.sass

.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