Как сделать чтобы sub menu было в 2 колонки WP?

Question

можно ли сделать submenu в wp в 2 колонки по наведению ? Слева 5 ссылок ,а справа 4 ссылки. Без Megamenu и других плагинов. Заранее спасибо.

/*hover header menu*/
$('li.menu-item').hover(function(){
  $(this).find('>.sub-menu').show();
}, function(){
  if(!$(this).hasClass('current_page_item')){
  $(this).find('.sub-menu').hide();
  }
});

<ul class="header-menu__navigation text-align-center">
<li id="menu-item-864" class="sub-menu-columns menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-864 header-menu__item"><a class="header-menu__link">Businesses</a>
<ul class="sub-menu" style="display: none;">
    <li id="menu-item-872" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-872 header-menu__item"><a href="https://dialics-site.intertech.dev/financial-services/" class="header-menu__link">Home</a></li>
    <li id="menu-item-871" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-871 header-menu__item"><a href="https://dialics-site.intertech.dev/travel-and-hospitality/" class="header-menu__link">Home</a></li>
    <li id="menu-item-870" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-870 header-menu__item"><a href="https://dialics-site.intertech.dev/insurance-industry/" class="header-menu__link">Home</a></li>
    <li id="menu-item-869" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-837 current_page_item menu-item-869 header-menu__item"><a href="https://dialics-site.intertech.dev/for-home-service/" aria-current="page" class="header-menu__link">Home</a></li>
    <li id="menu-item-868" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-868 header-menu__item"><a href="https://dialics-site.intertech.dev/legal-service/" class="header-menu__link">Home</a></li>
    <li id="menu-item-867" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-867 header-menu__item"><a href="https://dialics-site.intertech.dev/real-estate/" class="header-menu__link">Home</a></li>
    <li id="menu-item-866" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-866 header-menu__item"><a href="https://dialics-site.intertech.dev/education/" class="header-menu__link">Home</a></li>
    <li id="menu-item-865" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-865 header-menu__item"><a href="https://dialics-site.intertech.dev/healthcare/" class="header-menu__link">Home</a></li>
    <li id="menu-item-873" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-873 header-menu__item"><a href="https://dialics-site.intertech.dev/automotive/" class="header-menu__link">Home</a></li>
</ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

Вы можете использовать параметр columns чтобы указать количество колон

/*hover header menu*/
$('li.menu-item').hover(function() {
  $(this).find('>.sub-menu').show();
}, function() {
  if (!$(this).hasClass('current_page_item')) {
    $(this).find('.sub-menu').hide();
  }
});

.sub-menu {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

<ul class="header-menu__navigation text-align-center">
  <li id="menu-item-864" class="sub-menu-columns menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-864 header-menu__item"><a class="header-menu__link">Businesses</a>
    <ul class="sub-menu" style="display: none;">
      <li id="menu-item-872" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-872 header-menu__item"><a href="https://dialics-site.intertech.dev/financial-services/" class="header-menu__link">Home</a></li>
      <li id="menu-item-871" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-871 header-menu__item"><a href="https://dialics-site.intertech.dev/travel-and-hospitality/" class="header-menu__link">Home</a></li>
      <li id="menu-item-870" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-870 header-menu__item"><a href="https://dialics-site.intertech.dev/insurance-industry/" class="header-menu__link">Home</a></li>
      <li id="menu-item-869" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-837 current_page_item menu-item-869 header-menu__item"><a href="https://dialics-site.intertech.dev/for-home-service/" aria-current="page" class="header-menu__link">Home</a></li>
      <li id="menu-item-868" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-868 header-menu__item"><a href="https://dialics-site.intertech.dev/legal-service/" class="header-menu__link">Home</a></li>
      <li id="menu-item-867" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-867 header-menu__item"><a href="https://dialics-site.intertech.dev/real-estate/" class="header-menu__link">Home</a></li>
      <li id="menu-item-866" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-866 header-menu__item"><a href="https://dialics-site.intertech.dev/education/" class="header-menu__link">Home</a></li>
      <li id="menu-item-865" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-865 header-menu__item"><a href="https://dialics-site.intertech.dev/healthcare/" class="header-menu__link">Home</a></li>
      <li id="menu-item-873" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-873 header-menu__item"><a href="https://dialics-site.intertech.dev/automotive/" class="header-menu__link">Home</a></li>
    </ul>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

БЛОГ НА HUSL

Как сделать чтобы sub menu было в 2 колонки WP?

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