纯CSS隐藏和显示侧边栏菜单

来源:https://www.sucaihuo.com/js/2354.html 2017-07-08 23:24浏览(9383) 收藏

一款纯CSS隐藏和显示侧边栏菜单的特效,点击左上角的按钮出现动画特效,显示或隐藏侧边栏的导航菜单,没有引入任何javascript,个人感觉比较清爽实用,喜欢的童鞋请收下吧。
纯CSS隐藏和显示侧边栏菜单
分类:导航菜单 > 展开收缩 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分先远程调用CSS样式文件,代码如下:

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link type="text/css" rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>

接着设置好页面各元素的样式,特别是按钮的点击动画和侧边栏导航的动画效果,部分代码如下:

.menu {
  position: fixed;
  top: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 50px;
  height: 50px;
  background-color: white;
  border-radius: 50%;
  transition: transform 250ms ease;
  cursor: pointer;
  z-index: 200;
}
.menu span {
  position: relative;
  display: block;
  width: 50%;
  height: 2px;
  background-color: #444;
  float: left;
  transform-origin: center center;
  transition: transform 250ms ease;
  z-index: 200;
}
.menu span:nth-of-type(1) {
  transform: translateY(-5px);
}
.menu span:nth-of-type(3) {
  transform: translateY(5px);
}

#menu {
  display: none;
}
#menu:checked ~ .menu {
  background-color: transparent;
  transform: rotate(360deg);
  transition: transform 250ms ease;
}
#menu:checked ~ .menu span {
  background-color: white;
  transition: transform 250ms ease;
}
#menu:checked ~ .menu span:nth-of-type(1) {
  transform: translateY(1px) rotate(45deg);
}
#menu:checked ~ .menu span:nth-of-type(2) {
  display: none;
}
#menu:checked ~ .menu span:nth-of-type(3) {
  transform: translateY(-1px) rotate(-45deg);
}
#menu:checked ~ .nav {
  left: 0px;
  transition: left 500ms ease;
}
#menu:checked ~ main {
  transform: translateX(250px);
  transition: transform 500ms ease;
}

.nav {
  position: fixed;
  top: 0;
  left: -210px;
  width: 300px;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #444;
  transition: left 500ms ease;
  z-index: 0;
}
.nav ul {
  position: relative;
  list-style-type: none;
  margin: 100px 0;
  padding: 0;
}
.nav ul li {
  position: relative;
  display: block;
  border-bottom: 1px dashed rgba(255,255,255,.38);
}
.nav ul li a {
  position: relative;
  display: block;
  margin: 0;
  padding: 15px 20px;
  color: white;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
}
.nav ul li a:before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  transition: width 250ms ease;
  z-index: -1;
}
.nav ul li a:hover {
  color: #444;
}
.nav ul li a:hover:before {
  width: 100%;
  height: 100%;
  background-color: white;
  transition: width 250ms ease;
}

页面的body部分需要填充一下内容,这里我随意添加了一些内容来充实版面,部分代码如下:

<header>
		<h1><i class="fa fa-picture-o" aria-hidden="true"></i></h1>
	</header>
	<section>
		<div class="container">
			<p>第一个阶段,是做出要求,对宇宙发出指令,让宇宙了解你想要些什么,宇宙就会自动回应你的想法。</p>

			<p>这是一个很有意思的过程,就好比把宇宙当成一本货物的目录,你翻着它,然后决定“我要经历这个,我要那种东西,我要跟那种人一起生活”,你就是那个跟宇宙下订单的人。其实就是这样简单。</p>

			<p>第二步是信念。你要相信你已经拥有它了。要有一种毫不动摇的信念,就是我的说法,要相信还没有实现的事,“你的愿望就是我的命令”,宇宙就会开始运作安排,从而满足你心中的愿望。</p>
		</div>
	</section>
	<div class="img">
		<h1><i class="fa fa-picture-o" aria-hidden="true"></i></h1>
	</div>
	<section>
		<div class="container">
			<p>大多数的时候,假如我们要求的事物没有出现在生活中,我们会感到沮丧和失望,我们甚至会开始怀疑,这种怀疑会让人感到心灰意冷。接受这个感觉,然后用坚定的信念代替它:“我知道……我知道……我知道……,它就要实现了。”</p>
			
			<p>第三步,就是这个过程最后一步,接受。开始感觉好极了,想想要是你想要的事物已经出现,那会是什么感觉。</p>

			<p>当你感觉好的时候,你就是把自己和你要的事物放在同一个频率上。尝试去做一切你能做的事,帮助自己具有拥有它们的感觉。无论你能做什么,只要去做,就有助于把这些东西吸引过来。</p>
		</div>
	</section>
评论0
头像

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

1 2