当前位置 :首页 > 网页特效 > 导航菜单 > jQuery多级下拉菜单特效

jQuery多级下拉菜单特效

80 0 时间:2019-07-18 11:53  查看评论 (0)
内容摘要:jquery实现的下拉菜单特效,固定浏览器左边栏,能实现二级与三级下拉菜单,很实用

使用方法

css代码:

<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">    
<link rel="stylesheet" href="css/datouwang.css" />

js代码

<script type="text/javascript" src="js/jquery.min.js"></script>    
<script type="text/javascript" src="js/datouwang.js" ></script>

html结构

<div class="s-side">    
	<ul>    
		<!--这部分是导航栏信息。-->    
		<li class="s-firstItem first">    
			<a href="#">    
				<i class="fa fa-home"></i>    
				<span>首页</span>    
			</a>    
		</li>    
		<li class="first">    
			<div class="d-firstNav s-firstNav clearfix">    
				<i class="fa fa-bars"></i>    
				<span>一级菜单</span>    
				<i class="fa fa-caret-right fr "></i>    
			</div>    
			<ul class="d-firstDrop s-firstDrop">    
				<li>    
					<div class="d-secondNav s-secondNav">    
						<i class="fa fa-minus-square-o"></i>    
						<span>二级菜单</span>    
						<i class="fa fa-caret-right fr"></i>    
					</div>    
					<ul class="d-secondDrop s-secondDrop">    
						<li class="s-thirdItem">    
							<a href="#">三级导航</a>    
						</li>    
						<li class="s-thirdItem">    
							<a href="#">三级导航</a>    
						</li>    
					</ul>    
				</li>    
				<li>    
					<div class="d-secondNav s-secondNav">    
						<i class="fa fa-minus-square-o"></i>    
						<span>二级菜单</span>    
						<i class="fa fa-caret-right fr "></i>    
					</div>    
					<ul class="d-secondDrop s-secondDrop">    
						<li class="s-thirdItem">    
							<a href="#">三级导航</a>    
						</li>    
					</ul>    
				</li>    
				<li class="s-secondItem">    
					<a href="#">    
						<i class="fa fa-minus-square-o"></i>    
						<span>二级导航</span>    
					</a>    
				</li>    
			</ul>    
		</li>    
		<li class="first">    
			<div class="d-firstNav s-firstNav">    
				<i class="fa fa-bars"></i>	                        
				<span>一级菜单</span>    
				<i class="fa fa-caret-right fr" ></i>    
			</div>    
			<ul class="d-firstDrop s-firstDrop">    
				<li class="s-secondItem">    
					<i class="fa fa-minus-square-o"></i>    
					<a href="#">二级导航</a>    
				</li>    
				<li class="s-secondItem">    
					<i class="fa fa-minus-square-o"></i>    
					<a href="#">二级导航</a>    
				</li>    
			</ul>    
		</li>    
	</ul>    
</div>


讨论这个项目(0)回答他人问题有机会获得积分奖励哦

稍等,评论加载中...

发送qq消息

关注公众号
扫一扫关注公众号

微信交流请加:tgw750203

在线客服