一款可以隐藏的侧边栏动画导航菜单的特效,点击侧边栏的一个垂直按钮,可以控制菜单的展开或收缩,每一个菜单的鼠标悬停特效样式都不相同,个人觉得侧边栏导航应用还是比较广泛的,喜欢的童鞋请收下吧。
页面的head部分,需远程调用一个图标样式库font-awesome.min.css,并引入本地样式文件style.css,代码如下:
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link type="text/css" rel="stylesheet" href="css/style.css">
页面的body部分,多个菜单的li标签放入一个div容器里面,代码如下:
<header>
<div id="toggle">
<span>
<i class="fa fa-bars"></i> 我的青春修炼手册
</span>
</div>
<div id="menu">
<ul class="unstyled-list">
<li>
<span class="book"></span>
<i class="fa fa-book"></i>
知识强化生命力
</li>
<li>
<span class="movies"></span>
<i class="fa fa-music"></i>
音乐缓解了压力
</li>
<li>
<span class="computer"></span>
<i class="fa fa-television"></i>
电脑也是生产力
</li>
<li>
<span class="home"></span>
<i class="fa fa-tint"></i>
水滴石穿靠毅力
</li>
<li>
<span class="beauty"></span>
<i class="fa fa-heartbeat"></i>
心理素质算能力
</li>
<li>
<span class="clothing"></span>
<i class="fa fa-shopping-bag"></i>
犒劳自己要给力
</li>
<li>
<span class="sport"></span>
<i class="fa fa-futbol-o"></i>
户外运动需卖力
</li>
</ul>
</div>
</header>
页面的底部,需远程调用jQuery库,并引入一个JS样式文件,用来响应点击事件,代码如下:
<script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791