沃克nav mega菜單

Question

請幫我， 我正在做一個使用WordPress主題的在線購物網站，我遇到了一個問題，使超級菜單，我有以下的HTML代碼。 我已經嘗試從其他來源的導航沃克，但結果不符合我創建的HTML代碼。

<div class="mega-categories">  
<ul class="mega-list"> 
    <li class="mega-sub-menu"> 
    <a href="#">link 1</a> 
     <div class="mega-menu-page"> 
      <div class="mega-page-list col-md-3"> 
      <ul class="mega-sub-list"> 
      <li><a href="#">page link 1</a> 
       <ul> 
       <li><a href="#">sub page link 1</a></li> 
       <li><a href="#">sub page link 1</a></li> 
       <li><a href="#">sub page link 1</a></li> 
       <li><a href="#">sub page link 1</a></li> 
       <li><a href="#">sub page link 1</a></li> 
       </ul> 
       </li> 
      <li><a href="#">page link 2</a> 
      <ul> 
       <li><a href="#">sub page link 2</a></li> 
       <li><a href="#">sub page link 2</a></li> 
       <li><a href="#">sub page link 2</a></li> 
       <li><a href="#">sub page link 2</a></li> 
       <li><a href="#">sub page link 2</a></li> 
       </ul> 
      </li> 
      </ul> 
      </div> 

      <div class="mega-page-list col-md-3"> 
      <ul class="mega-sub-list"> 
      <li><a href="#">page link 3</a> 
      <ul> 
       <li><a href="#">sub page link 3</a></li> 
       <li><a href="#">sub page link 3</a></li> 
       <li><a href="#">sub page link 3</a></li> 
       <li><a href="#">sub page link 3</a></li> 
       <li><a href="#">sub page link 3</a></li> 
       </ul> 
      </li> 
      <li><a href="#">page link 4</a> 
       <ul> 
       <li><a href="#">sub page link 4</a></li> 
       <li><a href="#">sub page link 4</a></li> 
       <li><a href="#">sub page link 4</a></li> 
       <li><a href="#">sub page link 4</a></li> 
       <li><a href="#">sub page link 4</a></li> 
       </ul> 
      </li> 
      </ul> 
      </div> 
      <div class="mega-page-list col-md-3"> 
      <ul class="mega-sub-list"> 
      <li><a href="#">page link 5</a> 
       <ul> 
       <li><a href="#">sub page link 5</a></li> 
       <li><a href="#">sub page link 5</a></li> 
       <li><a href="#">sub page link 5</a></li> 
       <li><a href="#">sub page link 5</a></li> 
       <li><a href="#">sub page link 5</a></li> 
       </ul> 
      </li> 
      <li><a href="#">page link 6</a> 
       <ul> 
       <li><a href="#">sub page link 6</a></li> 
       <li><a href="#">sub page link 6</a></li> 
       <li><a href="#">sub page link 6</a></li> 
       <li><a href="#">sub page link 6</a></li> 
       <li><a href="#">sub page link 6</a></li> 
       </ul> 
      </li> 
      </ul> 
      </div> 
      <div class="mega-page-list col-md-3"> 
      <ul class="mega-sub-list"> 
      <li><a href="#"> 
       <img src="http://localhost/wordpress/wp-content/uploads/2016/05/vertical-banner-1.jpg" class="img-responsive"/></a></li> 
      </ul> 
      </div> 
     </div> 
    </div> 
    </li> 
</ul> 
</div> 

Answer 1

如果您正在使用WordPress它是一個名爲Megamenu插件的幫助下創建兆豐菜單非常簡單：https://wordpress.org/plugins/megamenu/。 這將節省大量時間，如果你創建兆豐菜單有了這個插件

Answer 2

的問題是如何讓WP導航學步車，我這個步行者導航代碼

<?php 
 
$megamenu = 0; 
 
$count=0; 
 
class nav_walker_megamenu extends Walker_Nav_Menu { 
 
     public function start_lvl(&$output, $depth = 0, $args = array()) { 
 
      $indent = str_repeat("\t", $depth); 
 
      if($depth == 0) $output .= "\n$indent<div class=\"mega-menu-page\"> 
 
              $indent<ul class=\"mega-sub-list\">\n"; 
 
         else $output .= "\n$indent<ul class=\"sub-menu\">\n"; 
 
    } 
 

 
     public function end_lvl(&$output, $depth = 0, $args = array()) { 
 
     $indent = str_repeat("\t", $depth); 
 
     if($depth == 0) $output .= "$indent</ul>\n          
 
            $indent</div>\n"; 
 
        else $output .= "$indent</ul>\n"; 
 

 
    } 
 

 
    function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) { 
 
     global $megamenu; 
 
     $megamenu++; 
 
     global $count; 
 
     $count++; 
 
     $indent = ($depth) ? str_repeat("\t", $depth) : ''; 
 
     $class_names = ''; 
 
     $classes = empty($item->classes) ? array() : (array) $item->classes; 
 
     $classes[] = 'menu-item-' . $item->ID; 
 
\t \t 
 
if ($megamenu == 4) { 
 
      $output .= "\n$indent</ul>$indent<ul class=\"drop-dow\">\n"; 
 
      $megamenu = 1; 
 

 
     } 
 

 
     $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args)); 
 
     $class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : ''; 
 

 
     $id = apply_filters('nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args); 
 

 
     $id = $id ? ' id="' . esc_attr($id) . '"' : ''; 
 

 

 
     $output .= $indent . '<li' . $id . $class_names .'>'; 
 

 
     $atts = array(); 
 

 
     $atts['title'] = ! empty($item->attr_title) ? $item->attr_title : ''; 
 
     $atts['target'] = ! empty($item->target)  ? $item->target  : ''; 
 
     $atts['rel'] = ! empty($item->xfn)  ? $item->xfn  : ''; 
 
     $atts['href'] = ! empty($item->url)  ? $item->url  : ''; 
 
     $atts = apply_filters('nav_menu_link_attributes', $atts, $item, $args); 
 

 
     $attributes = ''; 
 

 
     foreach ($atts as $attr => $value) { 
 
      if (! empty($value)) { 
 
       $value = ('href' === $attr) ? esc_url($value) : esc_attr($value); 
 
       $attributes .= ' ' . $attr . '="' . $value . '"'; 
 
      } 
 
     } 
 

 
     if ($item->menu_item_parent == 0) $megamenu = 0; 
 
     $item_output = $args->before; 
 
     $item_output .= '<a'. $attributes .'>'; 
 
     $item_output .= $args->link_before .apply_filters('the_title', $item->title, $item->ID) . $args->link_after; 
 
     $item_output .= '</a>'; 
 
     $item_output .= $args->after; 
 
     if ($megamenu == 4) $megamenu = 0; 
 
     $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args); 
 

 
    } 
 
} // Walker_Nav_Menu

試過的幫助

帶代碼nav walker out這些結果不符合我上面創建的html代碼。