Как сделать выпадающие меню на mobile и на планшете?

Question

на desctop сделано hover menu по наведению на ссылку Services, нужно на планшете и телефоне сделать выпадающее меню по click на ссылку Services. И лучше по нажатию на галочку (before) и нижние ссылки раздвигались вниз. Как это лучше реализовать ? Заранее большое человеческое спасибо.

//sub menu header

  $('#menu-item-56').hover(
     function () {
       $('.sub-menu').show();
     },
     function () {
       $('.sub-menu').hide();
     }
   );

.sub-menu {
    display: none;
    position: absolute;
    left: 0px;
    top: 67px;
    background: #0C0839;
    z-index: 99999;
    padding-top: 1rem;
    padding-bottom: 2rem;
    padding-right: 3rem;
    padding-left: 3rem;
}

.menu li {
    display: inline-block;
    padding: 0 0px;
}

<ul class="menu">
  <li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-56 nav-item">
  <a href="#" class="nav-link">Services</a><span class="icon"></span>
  <ul class="sub-menu" style="display: none;">
      <li id="menu-item-327" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-327 nav-item"><a href="#" class="nav-link">Discovery</a></li>
    <li id="menu-item-326" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-321 current_page_item menu-item-326 nav-item"><a href="#" aria-current="page" class="nav-link">Product</a></li>
    <li id="menu-item-325" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-325 nav-item"><a href="#" class="nav-link">Development</a></li>
</ul>
    </li>
  <li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57 nav-item"><a href="#" class="nav-link">Success</a></li>
    <li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53 nav-item"><a href="#" class="nav-link">About us</a></li>
        <li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54 nav-item"><a href="#" class="nav-link">Blog</a></li>
    <li class="nav-item">
<a href="/contact/" class="nav-link button nav-item__btn">
<span class="nav-link__title">Contact us</span>
 </a>
  </li>
      </ul>

БЛОГ НА HUSL

Как сделать выпадающие меню на mobile и на планшете?

Ответы (0 шт):