jQuery带炫酷动画全屏菜单导航特效插件

演示  website 下载

插件介绍

这是基于jQuery和css flexbox实现很酷的网站菜单导航，点击固定的汉堡按钮可以让菜单从网页顶部向下滑动全屏显示导航菜单。

使用方法

1.在页面中加载样式文件。

<link rel="stylesheet" href="style.css">

2. 在html页面中添加汉堡切换按钮和导航列表代码。

<header>
  <div class="menu-toggler">
    <div class="bar half top"></div>
    <div class="bar"></div>
    <div class="bar half bottom"></div>
  </div>
  <nav>
    <ul class="nav-list">
      <li>
        <a href="#" class="nav-link">首页</a>
      </li>
      <li>
        <a href="#" class="nav-link">新闻资讯</a>
      </li>
      <li>
        <a href="#" class="nav-link">联系我们</a>
      </li>
      <li>
        <a href="#" class="nav-link">关于我们</a>
      </li>
    </ul>
  </nav>
</header>

3.添加jquery代码

<script src="jquery.slim.min.js"></script>
$(document).ready(function () {
  $('.menu-toggler').on('click', function () {
    $(this).toggleClass('open');
    $('nav').toggleClass('open');
  });
  $('nav .nav-link').on('click', function () {
    $('.menu-toggler').removeClass('open');
    $('nav').removeClass('open');
  });
});