megamenu.js-响应式jQuery大型菜单插件

megamenu.js是一款非常实用的响应式jQuery大型菜单插件。该大型菜单兼容IE8+浏览器，它使用jQuery动画作为过渡效果，并且具有响应式效果，可以无缝和wordpress集成。它的特点还有：

• 跨浏览器兼容。
• 不为下拉列表添加任何class类。
• 智能在大屏幕和小屏幕之间切换菜单。
• 100%响应式，可在任何设备上工作。
• 可以和wordpress无缝集成。
• 使用jquery animations作为动画效果。
• 使用简单。
• 通过LESS编写。
• 使用ionicons字体图标。
• 轻量级，文件体积小。

使用方法

该大型菜单使用ionicons字体图标，使用是要将它引入。另外还要引入jQuery和megamenu.js文件。

<script src="js/jquery.min.js"></script>
<script src="js/megamenu.js"></script>    
  

HTML结构

该大型菜单的基本HTML结构如下：

<div class="menu-container">
  <div class="menu">
    <ul>
      <li></li>
      <li></li>
      <!-- What ever, basic html menu(lists)! Dont worry megamenu.js will know -->
    </ul>
  </div>
</div>
  

与Wordpress集成

由于megamenu.js在显示下拉列表时不使用任何的class类，所以它可以和Wordpress无缝集成。

1、在functions.php中添加下面的代码：

// Remove the <div> surrounding the dynamic navigation to cleanup markup
function my_wp_nav_menu_args($args = '')
{
    $args['container'] = false;
    return $args;
}
// Remove Injected classes, ID's and Page ID's from Navigation <li> items
function my_css_attributes_filter($var)
{
    return is_array($var) ? array() : '';
}

// Remove surrounding <div> from WP Navigation
add_filter('wp_nav_menu_args', 'my_wp_nav_menu_args');
// Remove Navigation <li> injected classes
add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);
// Remove Navigation <li> injected ID
add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1); 
// Remove Navigation <li> Page ID's
add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);
    
  

2、然后就可以将megamenu.js包裹在Wordpress的菜单容器中。

<div class="menu-container">
    <div class="menu">
      <?php wp_nav_menu(); ?>
    </div>
</div>   
  

megamenu.js大型菜单的github地址为：https://github.com/marioloncarek/megamenu-js