沃克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代码。