jQuery手机侧边滑动导航菜单特效代码下载


jQuery手机侧边滑动导航菜单特效代码下载
jQuery手机侧边滑动导航菜单特效代码下载以及滑动导航菜单等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:200,300,400,600,700">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" href="css/demo.css">

2. 引入JS

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="dist/hc-mobile-nav.js"></script>

3. HTML代码

	<div id="container">
      <header>
        <div class="wrapper cf">
          <nav id="main-nav">
            <ul class="first-nav">
              <li class="cryptocurrency">
                <a href="#" target="_blank">Cryptocurrency</a>
                <ul>
                  <li><a href="#">Bitcoin</a></li>
                  <li><a href="#">Ethereum</a></li>
                  <li><a href="#">NEO</a></li>
                  <li><a href="#">ZCash</a></li>
                  <li><a href="#">Dogecoin</a></li>
                </ul>
              </li>
            </ul>
            <ul class="second-nav">
              <li class="devices">
                <a>Devices</a>
                <ul>
                  <li class="mobile">
                    <a href="#">Mobile Phones</a>
                    <ul>
                      <li><a href="#">Super Smart Phone</a></li>
                      <li><a href="#">Thin Magic Mobile</a></li>
                      <li><a href="#">Performance Crusher</a></li>
                      <li><a href="#">Futuristic Experience</a></li>
                    </ul>
                  </li>
                  <li class="television">
                    <a href="#">Televisions</a>
                    <ul>
                      <li><a href="#">Flat Superscreen</a></li>
                      <li><a href="#">Gigantic LED</a></li>
                      <li><a href="#">Power Eater</a></li>
                      <li><a href="#">3D Experience</a></li>
                      <li><a href="#">Classic Comfort</a></li>
                    </ul>
                  </li>
                  <li class="camera">
                    <a href="#">Cameras</a>
                    <ul>
                      <li><a href="#">Smart Shot</a></li>
                      <li><a href="#">Power Shooter</a></li>
                      <li><a href="#">Easy Photo Maker</a></li>
                      <li><a href="#">Super Pixel</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li class="magazines">
                <a href="#">Magazines</a>
                <ul>
                  <li><a href="#">National Geographic</a></li>
                  <li><a href="#">Scientific American</a></li>
                  <li><a href="#">The Spectator</a></li>
                  <li><a href="#">The Rambler</a></li>
                  <li><a href="#">Physics World</a></li>
                  <li><a href="#">The New Scientist</a></li>
                </ul>
              </li>
              <li class="store">
                <a href="#">Store</a>
                <ul>
                  <li>
                    <a href="#">Clothes</a>
                    <ul>
                      <li>
                        <a href="#">Women's Clothing</a>
                        <ul>
                          <li><a href="#">Tops</a></li>
                          <li><a href="#">Dresses</a></li>
                          <li><a href="#">Trousers</a></li>
                          <li><a href="#">Shoes</a></li>
                          <li><a href="#">Sale</a></li>
                        </ul>
                      </li>
                      <li>
                        <a href="#">Men's Clothing</a>
                        <ul>
                          <li><a href="#">Shirts</a></li>
                          <li><a href="#">Trousers</a></li>
                          <li><a href="#">Shoes</a></li>
                          <li><a href="#">Sale</a></li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a href="#">Jewelry</a>
                  </li>
                  <li>
                    <a href="#">Music</a>
                  </li>
                  <li>
                    <a href="#">Grocery</a>
                  </li>
                </ul>
              </li>
              <li class="collections"><a href="#">Collections</a></li>
              <li class="credits"><a href="#">Credits</a></li>
            </ul>
          </nav>
          <h1>HC MobileNav</h1>
          <h2>jQuery plugin for creating toggled mobile multi-level navigations, allowing endless nesting of submenu elements.</h2>
          <a class="toggle">
            <span></span>
            Toggle Navigation
          </a>
        </div>
      </header>
      <main>
        <div class="wrapper">
          <div class="content">
            <h4>Chose side</h4>
            <div class="actions">
              <div><a href="#" data-demo="{side:'left'}" class="button active">Left side</a></div>
              <div><a href="#" data-demo="{side:'right'}" class="button">Right side</a></div>
            </div>
            <h4>Levels open</h4>
            <div class="actions">
              <div><a href="#" data-demo="{levelOpen:'overlap', levelSpacing:40}" class="button active">Overlap levels</a></div>
              <div><a href="#" data-demo="{levelOpen:'expand', levelSpacing:25}" class="button">Expand levels</a></div>
              <div><a href="#" data-demo="{levelOpen:false, levelSpacing:25}" class="button">Unfolded levels</a></div>
            </div>
          </div>
        </div>
      </main>
	</div>
	<script>
        (function($) {
          var $nav = $('#main-nav');
          var $toggle = $('.toggle');
          var defaultData = {
            maxWidth: false,
            customToggle: $toggle,
            navTitle: 'All Categories',
            levelTitles: true
          };
          // we'll store our temp stuff here
          var $clone = null;
          var data = {};
          // calling like this only for demo purposes
          const initNav = function(conf) {
            if ($clone) {
              // clear previous instance
              $clone.remove();
            }
            // remove old toggle click event
            $toggle.off('click');
            // make new copy
            $clone = $nav.clone();
            // remember data
            $.extend(data, conf)
            // call the plugin
            $clone.hcMobileNav($.extend({}, defaultData, data));
          }
          // run first demo
          initNav({});
          $('.actions').find('a').on('click', function(e) {
            e.preventDefault();
            var $this = $(this).addClass('active');
            var $siblings = $this.parent().siblings().children('a').removeClass('active');
            initNav(eval('(' + $this.data('demo') + ')'));
          });
        })(jQuery);
      </script>

相关推荐

发表评论

相关文章