Блог

Главная - Вопросы по программированию - Как создать это меню WordPress?

Как создать это меню WordPress?

#javascript #wordpress

Вопрос:

Я застрял на несколько дней, пытаясь заставить свое мобильное меню работать таким образом (посмотрите на поведение подменю, а не на CSS/всплывающее окно).:

мобильное меню GIF

На gif видно, что он работает, но это просто какой-то неприятный жестко закодированный JavaScript, так что я мог бы показать вам, ребята, что мне нужно. На данный момент мой ходунки меню выглядит так:

 class Rima_Mobile_Walker extends Walker_Nav_Menu {
    function start_el( amp;$output, $item, $depth = 0, $args = NULL, $id = 0 ){

        $classes = "menu-item nav-id-" . $item->ID;
        $classes .= $item->menu_item_parent ? "parent-nav-id-" . $item->menu_item_parent : "";

        switch ($depth) {
            case 0:
                $classes .= $args->walker->has_children ? " has-submenu" : "";
                break;
            case 1:
                $classes = "has-parent";
                $classes .= $args->walker->has_children ? " has-subsubmenu" : "";
                break;
            default:
                $classes = "has-parent";
                $classes .= $args->walker->has_children ? " has-subsubmenu" : "";
                break;
        }

        $output .= sprintf(
            
        "n%s<li class='%s'><a href='%s'><h2>%s</h2></a>n",
        
        $awo, $classes, $item->url, $item->title );
    }

    function start_lvl( amp;$output, $depth = 0, $args= NULL ) {
        $indent = str_repeat( "t", $depth );
        $output .= "n$indent<ul class="pl-0 d-none" role="menu">n";
    }
}

This returns the following HTML:

 <ul id="menu-hoofdmenu" class="list-unstyled">
   <li style="opacity:0.7" class="go-back d-none">
      <a href="#">
         <h2>.. Vorige</h2>
      </a>
   </li>
   <li class="menu-item nav-id-39">
      <a href="http://testwp.test/">
         <h2>Home</h2>
      </a>
   </li>
   <li class="menu-item nav-id-10">
      <a href="http://testwp.test/over-ons/">
         <h2>Over ons</h2>
      </a>
   </li>
   <li class="menu-item nav-id-470 has-submenu">
      <a href="http://testwp.test/onze-vacatures/">
         <h2>Vacatures</h2>
      </a>
      <ul class="pl-0 d-none" role="menu">
         <li class="has-parent has-subsubmenu">
            <a href="#">
               <h2>Productiewerk (Sub lvl 1)</h2>
            </a>
            <ul class="pl-0 d-none" role="menu">
               <li class="has-parent">
                  <a href="#">
                     <h2>Gezichtsbehandelingen (Sub lvl 2)</h2>
                  </a>
               </li>
               <li class="has-parent">
                  <a href="#">
                     <h2>Rugbehandelingen (Sub lvl 2)</h2>
                  </a>
               </li>
            </ul>
         </li>
         <li class="has-parent">
            <a href="#">
               <h2>Schoonmaak (Sub lvl 1)</h2>
            </a>
         </li>
         <li class="has-parent">
            <a href="#">
               <h2>Bloemengroothandel (Sub lvl 1)</h2>
            </a>
         </li>
      </ul>
   </li>
   <li class="menu-item nav-id-465">
      <a href="http://testwp.test/contact/">
         <h2>Contact</h2>
      </a>
   </li>
</ul>

Я не хочу, чтобы это был пост «пожалуйста, помогите мне», но я действительно ценю, что мне помогли.

Метки: