可以隐藏的侧边栏动画导航菜单【原创

来源:https://www.sucaihuo.com/js/2473.html 2017-07-19 23:57浏览(1720) 收藏

一款可以隐藏的侧边栏动画导航菜单的特效,点击侧边栏的一个垂直按钮,可以控制菜单的展开或收缩,每一个菜单的鼠标悬停特效样式都不相同,个人觉得侧边栏导航应用还是比较广泛的,喜欢的童鞋请收下吧。
可以隐藏的侧边栏动画导航菜单
分类:导航菜单 > 图标导航 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的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>
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/2473.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2