1. <!DOCTYPE>
  2. <html>
  3. <head>
  4. 	<meta charset="utf-8" />
  5. 	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  6. 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7. 	<title>CSS3侧滑导航</title>
  8. 	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  9. 	<style type="text/css">
  10. 	*{padding: 0;margin: 0;}
  11. 		nav{
  12. 			width: 100%;
  13. 			height: 50px;
  14. 			background-color: rgba(26,188, 156, 0.75);
  15. 			position: relative;
  16. 		}
  17. 		div{
  18. 			position: absolute;
  19. 			height: 100%;
  20. 			width: 50px;
  21. 			left: 20px;
  22. 			cursor: pointer;
  23. 			-webkit-transition: transform 1s;
  24. 			-moz-transition: transform 1s;
  25. 			-ms-transition: transform 1s;
  26. 			-o-transition: transform 1s;
  27. 			transition: transform 1s;
  28. 		}
  29. 		#hide,#show{
  30. 			display: block;
  31. 			height: 3px;
  32. 			background-color: #FFF;
  33. 			position: absolute;
  34. 			top: 50%;
  35. 			-webkit-transition: opacity .5s;
  36. 			-moz-transition: opacity .5s;
  37. 			-ms-transition: opacity .5s;
  38. 			-o-transition: opacity .5s;
  39. 			transition: opacity .5s;
  40. 		}
  41. 		#show{
  42. 			width: 20px;
  43. 			left: 15px;
  44. 			opacity: 0;
  45. 		}
  46. 		#hide{
  47. 			width: 30px;
  48. 			left: 10px;
  49. 			margin-top: -1.5px;
  50. 		}
  51. 		#hide::before,#hide::after,#show::before,#show::after{
  52. 			content: "";
  53. 			display: block;
  54. 			height: 3px;
  55. 			background-color: #FFF;
  56. 			position: absolute;
  57. 		}
  58. 		#hide::before,#hide::after{
  59. 			width: 30px;
  60. 		}
  61. 		#show::before,#show::after{
  62. 			width: 25px;
  63. 		}
  64. 		#hide::before,#show::before{
  65. 			top: -10px;
  66. 		}
  67. 		#hide::after,#show::after{
  68. 			top: 10px;
  69. 		}
  70. 		#show::before{
  71. 			 -webkit-transform: rotate(35deg) translateX(5px);
  72. 			 -moz-transform: rotate(35deg) translateX(5px);
  73. 			 -ms-transform: rotate(35deg) translateX(5px);
  74. 			 -o-transform: rotate(35deg) translateX(5px);
  75. 			 transform: rotate(35deg) translateX(5px);
  76. 		}
  77. 		#show::after{
  78. 			  -webkit-transform: rotate(-35deg) translateX(5px);
  79. 			 -moz-transform: rotate(-35deg) translateX(5px);
  80. 			 -ms-transform: rotate(-35deg) translateX(5px);
  81. 			 -o-transform: rotate(-35deg) translateX(5px);
  82. 			 transform: rotate(-35deg) translateX(5px);
  83. 		}
  84. 		ul{
  85. 			list-style: none;
  86. 			background-color: #455552;
  87. 			position: absolute;
  88. 			top: 50px;
  89. 			left: -200px;
  90. 			width: 74px;
  91. 			-webkit-transition: all .5s ease-in-out;
  92. 			-moz-transition: all .5s ease-in-out;
  93. 			-ms-transition: all .5s ease-in-out;
  94. 			-o-transition: all .5s ease-in-out;
  95. 			transition: all .5s ease-in-out;
  96. 		}
  97. 		li{
  98. 			margin: 0;
  99. 			padding: 0;
  100. 			position: relative;
  101. 			text-align: center;
  102. 		}
  103. 		a{
  104. 			text-decoration: none;
  105. 			color:#FFF;
  106. 			display: inline-block;
  107. 			height: 40px;
  108. 			line-height: 40px;
  109. 		}
  110. 		li:hover{
  111. 			background-color: rgba(26,188, 156, 0.75);
  112. 		}
  113. 	</style>
  114. </head>
  115. <body>
  116. 	<nav>
  117. 		<div id="toggleMenu">
  118. 			<span id="hide"></span>
  119. 			<span id="show"></span>
  120. 		</div>
  121. 		<ul id="list">
  122. 			<li>
  123. 				<a href="#">首页</a>
  124. 			</li>
  125. 			<li>
  126. 				<a href="#">问题</a>
  127. 			</li>
  128. 			<li>
  129. 				<a href="#">文章</a>
  130. 			</li>
  131. 			<li>
  132. 				<a href="#">关注</a>
  133. 			</li>
  134. 			<li>
  135. 				<a href="#">发现</a>
  136. 			</li>
  137. 		</ul>
  138. 	</nav>
  139. 	<script type="text/javascript">
  140. 		var toggle = document.getElementById("toggleMenu");
  141. 		var list = document.getElementById("list");
  142. 		var hide = document.getElementById("hide");
  143. 		var show = document.getElementById("show");
  144. 		var isHidden = true;
  145.  
  146. 		window.onload = function() {
  147. 			toggle.onclick=function(){
  148. 				if(isHidden){
  149. 					list.style.left="0px";
  150. 					isHidden = false;
  151. 					hide.style.opacity=0;
  152. 					this.style.mozTransform = "rotate(180deg)";
  153. 					this.style.msTransform = "rotate(180deg)";
  154. 					this.style.oTransform = "rotate(180deg)";
  155. 					this.style.webkitTransform = "rotate(180deg)";
  156. 					this.style.transform = "rotate(180deg)";
  157. 					show.style.opacity=1;
  158. 				}else{
  159. 					list.style.left="-200px";
  160. 					isHidden = true;
  161. 					hide.style.opacity=1;
  162. 					this.style.mozTransform = "rotate(0deg)";
  163. 					this.style.msTransform = "rotate(0deg)";
  164. 					this.style.oTransform = "rotate(0deg)";
  165. 					this.style.webkitTransform = "rotate(0deg)";
  166. 					this.style.transform = "rotate(0deg)";
  167. 					show.style.opacity=0;
  168. 				}
  169. 			}
  170. 		}
  171. 	</script>
  172. </body>
  173. </html>

　　

CSS3侧滑导航的更多相关文章

  1. css3动画导航实现

    代码 <!DOCTYPE html> <!-- saved from url=(0223)file:///C:/Users/user/AppData/Local/Temp/HZ$D. ...

  2. Android之侧滑导航栏

    今天学习的新内容是侧滑导航栏,我想大家肯定都比较熟悉了,因为这个效果在qq里面也有,最近一直跟室友们玩的游戏是快速让自己的头像的点赞量上千.当然我的效果跟qq是没有办法比的,因为那里面的功能是在是太强 ...

  3. Android 使用Toolbar+DrawerLayout快速实现仿“知乎APP”侧滑导航效果

    在以前,做策划导航的时候,最常用的组件便是SlidingMenu了,当初第一次用它的时候觉得那个惊艳啊,体验可以说是非常棒. 后来,Android自己推出了一个可以实现策划导航的组件DrawerLay ...

  4. 如何用CSS和jQuery实现一个侧滑导航菜单

    为了建立导航菜单,让我们先看看html结构:<!DOCTYPE html><html lang="en"><head> <meta cha ...

  5. 使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...

  6. css3制作导航栏

    <!doctype html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  7. 分针网—IT教育：使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的.本次分享的主题: ...

  8. NavigationViewDemo【和DrawerLayout搭配使用实现侧滑导航视图界面】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 主要记录NavigationView的使用,而一般情况下NavigationView是和DrawerLayout搭配使用的,还有To ...

  9. jQuery+css3侧边栏导航菜单

    效果体验:http://hovertree.com/texiao/jquery/37/ 代码如下: <!doctype html> <html lang="zh" ...

随机推荐

  1. 使用InstelliJ IDEA创建Web应用程序

    环境版本 Windows 8.1IDE:InstelliJ IDEA 13    Spring:Spring 4.1.1 & Spring MVC 4.1.1    WebLogic 10.3 ...

  2. 基于Masonry自己主动计算cell的高度

    /** * This is a very very helpful category for NSTimer. * * @author huangyibiao * @email huangyibiao ...

  3. 理解Swift中map 和 flatMap对集合的作用

    map和flatMap是函数式编程中常见的概念,python等语言中都有.借助于 map和flapMap 函数可以非常轻易地将数组转换成另外一个新数组. map函数可以被数组调用,它接受一个闭包作为參 ...

  4. hdoj 1429 胜利大逃亡(续) 【BFS+状态压缩】

    题目:pid=1429">hdoj 1429 胜利大逃亡(续) 同样题目: 题意:中文的,自己看 分析:题目是求最少的逃亡时间.确定用BFS 这个题目的难点在于有几个锁对于几把钥匙.唯 ...

  5. Max Points on a Line（直线上最多的点数）

    给定一个二维平面,平面上有 n 个点,求最多有多少个点在同一条直线上. 示例 1: 输入: [[1,1],[2,2],[3,3]] 输出: 3 解释: ^ | |        o |     o | ...

  6. ubuntu升级到14.04后终端显示重叠

    系统升级后,发现这个问题非常不爽,问题不大,但有时候找不到解决方法,让人纠结好久.解决方法例如以下: 编辑->配置文件首选项->常规-> monospace 改为ubuntu mon ...

  7. poj_3468,线段树成段更新

    参考自http://www.notonlysuccess.com/index.php/segment-tree-complete/ #include<iostream> #include& ...

  8. m_Orchestrate learning system---二十六、动态给封装好的控件添加属性

    m_Orchestrate learning system---二十六.动态给封装好的控件添加属性 一.总结 一句话总结:比如我现在封装好了ueditor控件,我外部调用这个控件,因为要写数据到数据库 ...

  9. 32.AngularJS 表达式

    转自:https://www.cnblogs.com/best/tag/Angular/ AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据 ...

  10. springBoot 打war包 程序包com.sun.istack.internal不存在的问题

    使用的是 idea - Lifecycle-package 的方式打包(maven) 确认  <packaging>war</packaging> 修改启动类: (原启动类) ...