Html
    Css
    Js
@import url(https://fonts.googleapis.com/css?family=Lato);
	body,html {
	background-color:#14213D;
	height:100%;
	width:100%;
	padding:0;
	margin:0;
	font-family:'Lato',sans-serif;
}
.nav {
	position:relative;
	width:auto;
	display:inline-block;
	border:none;
}
.btn-nav {
	position:fixed;
	top:50px;
	left:30px;
	background:transparent;
	border:none;
	padding:10px;
	-webkit-transition:all .5s ease;
	-moz-transition:all .5s ease;
	-ms-transition:all .5s ease;
	-o-transition:all .5s ease;
	transition:all .5s ease;
	cursor:pointer;
	z-index:99999;
}
.btn-nav:focus {
	outline:0;
}
.icon-bar {
	display:block;
	margin:6px 0;
	width:40px;
	height:5px;
	background-color:#FFFFFF;
}
.btn-nav:hover .icon-bar {
	-webkit-transition:all 1s ease;
	-moz-transition:all 1s ease;
	-ms-transition:all 1s ease;
	-o-transition:all 1s ease;
	transition:all 1s ease;
	background-color:#FCA311;
}
.nav-content {
	position:fixed;
	top:-100%;
	bottom:0;
	left:0;
	right:0;
	background:#000000;
	display:block;
	height:100%;
	z-index:9;
}
.nav-list {
	list-style:none;
	padding:0;
	position:relative;
	top:30%;
}
.item-anchor:after {
	content:"";
	position:absolute;
	width:3px;
	height:3px;
	left:0;
	bottom:0;
	z-index:9;
	background:transparent;
	-webkit-transition:all 1s ease;
	-moz-transition:all 1s ease;
	-ms-transition:all 1s ease;
	-o-transition:all 1s ease;
	transition:all 1s ease;
}
.item-anchor {
	color:#fff;
	font-size:30px;
	text-transform:uppercase;
	position:relative;
	text-decoration:none;
	padding:10px;
}
.item-anchor:hover,.item-anchor:focus {
	color:#FCA311;
	-webkit-transition:all 1s ease;
	-moz-transition:all 1s ease;
	-ms-transition:all 1s ease;
	-o-transition:all 1s ease;
	transition:all 1s ease;
}
.item-anchor:hover:after,.item-anchor:focus:after {
	width:100%;
	background:#FCA311;
	-webkit-transition:all 1s ease;
	-moz-transition:all 1s ease;
	-ms-transition:all 1s ease;
	-o-transition:all 1s ease;
	transition:all 1s ease;
}
.nav-item {
	margin:40px auto;
	text-align:center;
}
.animated {
	display:block;
	margin:0 auto;
}
.animated:hover .icon-bar,.animated:focus .icon-bar {
	background-color:#FCA311;
}
.animated:focus {
	cursor:pointer;
	z-index:9999;
}
.middle {
	margin:0 auto;
}
.icon-bar {
	-webkit-transition:all .7s ease;
	-moz-transition:all .7s ease;
	-ms-transition:all .7s ease;
	-o-transition:all .7s ease;
	transition:all .7s ease;
	z-index:999999;
}
.animated .icon-bar {
	z-index:999999;
	background-color:#FCA311;
}
.animated .top {
	-webkit-transform:translateY(10px) rotateZ(45deg);
	-moz-transform:translateY(10px) rotateZ(45deg);
	-ms-transform:translateY(10px) rotateZ(45deg);
	-o-transform:translateY(10px) rotateZ(45deg);
	transform:translateY(10px) rotateZ(45deg);
}
.animated .bottom {
	-webkit-transform:translateY(-11px) rotateZ(-45deg);
	-moz-transform:translateY(-11px) rotateZ(-45deg);
	-ms-transform:translateY(-11px) rotateZ(-45deg);
	-o-transform:translateY(-11px) rotateZ(-45deg);
	transform:translateY(-11px) rotateZ(-45deg);
}
.animated .middle {
	width:0;
}
@keyframes showNav {
	from {
	top:-100%;
}
to {
	top:0;
}
}@-webkit-keyframes showNav {
	from {
	top:-100%;
}
to {
	top:0;
}
}@-moz-keyframes showNav {
	from {
	top:-100%;
}
to {
	top:0;
}
}@-o-keyframes showNav {
	from {
	top:-100%;
}
to {
	top:0;
}
}.showNav {
	-webkit-animation:showNav 1s ease forwards;
	-moz-animation:showNav 1s ease forwards;
	-o-animation:showNav 1s ease forwards;
	animation:showNav 1s ease forwards;
}
@keyframes hideNav {
	from {
	top:0;
}
to {
	top:-100%;
}
}@-webkit-keyframes hideNav {
	from {
	top:0;
}
to {
	top:-100%;
}
}@-moz-keyframes hideNav {
	from {
	top:0;
}
to {
	top:-100%;
}
}@-o-keyframes hideNav {
	from {
	top:0;
}
to {
	top:-100%;
}
}.hideNav {
	-webkit-animation:hideNav 1s ease forwards;
	-moz-animation:hideNav 1s ease forwards;
	-o-animation:hideNav 1s ease forwards;
	animation:hideNav 1s ease forwards;
}
.hidden {
	display:none;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

jQuery弹出全屏菜单

基于jquery的弹出全屏菜单覆盖层,css3过渡特效,简单美观实用

0