利用jQuery实现侧边浮动多级导航菜单代码



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

101 402 135



特效描述:利用jQuery实现 侧边浮动 多级导航 菜单代码。利用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>
	  <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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册
二十二
关注
TA的相关作品 >>更多
热搜关键词


热门标签: 收缩导航菜单 二级导航菜单 文字收缩展开 下拉导航菜单 图片收缩展开 竖直导航菜单 图标导航菜单 固定导航菜单 侧边导航菜单 树形导航菜单 网址导航菜单 导航菜单插件 文字导航菜单 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 收缩收起展开 导航菜单导航条

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到