使用方法
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>