<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery左侧固定导航下拉菜单代码</title>
</head>
<!--图标样式-->
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/index.css" />
<body>
<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>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/index.js" ></script>
</body>
</html>
jQuery实现的左侧三级固定导航下拉菜单特效源码.zip
版权申诉
127 浏览量
2022-11-07
23:56:46
上传
评论
收藏 35KB ZIP 举报
易小侠
- 粉丝: 6487
- 资源: 9万+