The Power of Pure CSS - No JavaScript Needed

119

<div id="nav">
	<ul class="nav-menu clearfix unstyled">
		<li><a href="#" class="three-d active">
			Home
				<span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span>
			 </a></li>
		<li><a href="#" class="three-d">
			Services
				<span class="three-d-box"><span class="front">Services</span><span class="back">Services</span></span>
			 </a></li>
		<li><a href="#" class="three-d">
			Products
				<span class="three-d-box"><span class="front">Products</span><span class="back">Products</span></span>
			 </a></li>
		<li><a href="#" class="three-d">
			About
				<span class="three-d-box"><span class="front">About</span><span class="back">About</span></span>
			 </a></li>
		<li><a href="#" class="three-d">
			Contact
				<span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
			 </a></li>
		<li><a href="#" class="three-d">
			Blog
				<span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
        </a>
				<ul class="clearfix unstyled drop-menu">
					<li><a href="#" class="three-d">
						Html5
							<span class="three-d-box"><span class="front">Html5</span><span class="back">Html5</span></span>
					</a></li>
					<li><a href="#" class="three-d">
						Css3
							<span class="three-d-box"><span class="front">Css3</span><span class="back">Css3</span></span>
					</a></li>
					<li><a href="#" class="three-d">
						JavaScript
				<span class="three-d-box"><span class="front">JavaScript</span><span class="back">JavaScript</span></span>
					</a></li>
					<li><a href="#" class="three-d">
						Videogames
				<span class="three-d-box"><span class="front">Videogames</span><span class="back">Videogames</span></span>
					</a></li>
				</ul>
					</li>
					<li><a href="#" class="three-d">
						Shop On-line
			<span class="three-d-box"><span class="front">Shop On-line</span><span class="back">Shop On-line</span></span>
				</a></li>
		</ul>
</div>

@import url("https://www.w3cplus.com/demo/css3/base.css");

@font-face {
    font-family: 'sansationregular';
    src: url('https://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot');
    src: url('https://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot?#iefix') format('https://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/embedded-opentype'),
         url('https://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.woff') format('woff'),
         url('https://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.ttf') format('truetype'),
         url('https://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.svg#sansationregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
	background-color:#edecec;
}
ul, li {
  list-style: none outside none;
}
/* basic menu styles */
.nav-menu {
  display: block;
	background: #74adaa;
	width:951px;
	margin: 50px auto 150px;
}
.nav-menu > li {
  display: inline;
  float:left;			
	border-right:1px solid #94c0be;
  position: relative;
}
.nav-menu > li:last-child {
  border-right: none;
}
.nav-menu li a {
  color: #fff;
	display: block;
	text-decoration: none;
	font-family: 'sansationregular';
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-transform: capitalize;
	overflow: visible;
	line-height: 20px;
	font-size: 20px;
	padding: 15px 30px 15px 31px;			
}

/* animation domination */
.three-d {
  -webkit-perspective: 200px;
  -moz-perspective: 200px;
  -ms-perspective: 200px;
  -o-perspective: 200px;
  perspective: 200px;
  -webkit-transition: all .07s linear;
  -moz-transition: all .07s linear;
  -ms-transition: all .07s linear;
  -o-transition: all .07s linear;
  transition: all .07s linear;
  position: relative;
}

.three-d:not(.active):hover {
  cursor: pointer;
}

.three-d:not(.active):hover .three-d-box, 
.three-d:not(.active):focus .three-d-box {
  -wekbit-transform: translateZ(-25px) rotateX(90deg);
  -moz-transform: translateZ(-25px) rotateX(90deg);
  -o-transform: translateZ(-25px) rotateX(90deg);
  -ms-transform: translateZ(-25px) rotateX(90deg);
  transform: translateZ(-25px) rotateX(90deg);
}

.three-d-box {
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
  -webkit-transform: translatez(-25px);
  -moz-transform: translatez(-25px);
  -ms-transform: translatez(-25px);
  -o-transform: translatez(-25px);
  transform: translatez(-25px);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-pointer-events: none;
  -moz-pointer-events: none;
  -ms-pointer-events: none;
  -o-pointer-events: none;
  pointer-events: none;
  position: absolute;
  top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.front {
  -webkit-transform: rotatex(0deg) translatez(25px);
  -moz-transform: rotatex(0deg) translatez(25px);
  -ms-transform: rotatex(0deg) translatez(25px);
  -o-transform: rotatex(0deg) translatez(25px);
  transform: rotatex(0deg) translatez(25px);
}

.back {
  -webkit-transform: rotatex(-90deg) translatez(25px);
  -moz-transform: rotatex(-90deg) translatez(25px);
  -ms-transform: rotatex(-90deg) translatez(25px);
  -o-transform: rotatex(-90deg) translatez(25px);
  transform: rotatex(-90deg) translatez(25px);
  color: #FFE7C4;
}

.front, .back {
  display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #74adaa;
	padding: 15px 30px 15px 31px;	
	color: white;
	-webkit-pointer-events: none;
  -moz-pointer-events: none;
  -ms-pointer-events: none;
  -o-pointer-events: none;
  pointer-events: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.nav-menu li .active .front,
.nav-menu li .active .back,
.nav-menu li a:hover .front,
.nav-menu li a:hover .back {
  background-color: #51938f;
  -webkit-background-size: 5px 5px;
  background-size: 5px 5px;
  background-position: 0 0, 30px 30px;
  background-image: -webit-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
  background-image: -moz-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
	background-image: -ms-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
  background-image: -o-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
  background-image: linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
}
.nav-menu ul {
  position: absolute;
  left: -40px;
	text-align: left;
	line-height: 40px;
	font-size: 14px;
	width: 200px;
	-webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -ms-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  -webkit-transform-origin: 0px 0px;
  -moz-transform-origin: 0px 0px;
  -ms-transform-origin: 0px 0px;
  -o-transform-origin: 0px 0px;
  transform-origin: 0px 0px;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  -ms-transform: rotateX(-90deg);
  -o-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
	backface-visibility: hidden;
}
.nav-menu > li:hover ul {
  display: block;
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
	transform: rotateX(0deg);
}

83

3D navigation with pure CSS

By: pixeldev

nav {
	margin: 27px auto 0;
	position: relative;
	width: 590px;
	height: 50px;
	background-color: #34495e;
	border-radius: 8px;
	font-size: 0;
}
nav a {
	line-height: 50px;
	height: 100%;
	font-size: 15px;
	display: inline-block;
	position: relative;
	z-index: 1;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	color: white;
	cursor: pointer;
}
nav .animation {
	position: absolute;
	height: 100%;
	top: 0;
	z-index: 0;
	transition: all .5s ease 0s;
	border-radius: 8px;
}
a:nth-child(1) {
	width: 100px;
}
a:nth-child(2) {
	width: 110px;
}
a:nth-child(3) {
	width: 100px;
}
a:nth-child(4) {
	width: 160px;
}
a:nth-child(5) {
	width: 120px;
}
nav .start-home, a:nth-child(1):hover~.animation {
	width: 100px;
	left: 0;
	background-color: #1abc9c;
}
nav .start-about, a:nth-child(2):hover~.animation {
	width: 110px;
	left: 100px;
	background-color: #e74c3c;
}
nav .start-blog, a:nth-child(3):hover~.animation {
	width: 100px;
	left: 210px;
	background-color: #3498db;
}
nav .start-portefolio, a:nth-child(4):hover~.animation {
	width: 160px;
	left: 310px;
	background-color: #9b59b6;
}
nav .start-contact, a:nth-child(5):hover~.animation {
	width: 120px;
	left: 470px;
	background-color: #e67e22;
}

body {
	font-size: 12px;
	font-family: sans-serif;
	background: #2c3e50;
}
h1 {
	text-align: center;
	margin: 40px 0 40px;
	text-align: center;
	font-size: 30px;
	color: #ecf0f1;
	text-shadow: 2px 2px 4px #000000;
	font-family: 'Cherry Swash', cursive;
}

p {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    color: #ecf0f1;
    font-family: 'Cherry Swash',cursive;
    font-size: 16px;
}

span {
    color: #2BD6B4;
}

81

* { 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
-o-box-sizing: border-box; 
box-sizing: border-box; 
/* adds animation for all transitions */ 
-webkit-transition: .25s ease-in-out; 
-moz-transition: .25s ease-in-out; 
-o-transition: .25s ease-in-out; 
transition: .25s ease-in-out; 
margin: 0; 
padding: 0; 
-webkit-text-size-adjust: none; 
}

/* Makes sure that everything is 100% height */

html,body { 
height: 100%; 
overflow: hidden; 
}

/* gets the actual input out of the way; 
we're going to style the label instead */

#drawer-toggle { 
position: absolute; 
opacity: 0; 
}

#drawer-toggle-label { 
-webkit-touch-callout: none; 
-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none; 
left: 0px; 
height:50px; 
width: 50px; 
display: block; 
position: fixed; 
 background: rgba(255,255,255,.0);
z-index: 1; 
}

/* adds our "hamburger" menu icon */

#drawer-toggle-label:before { 
content: ''; 
display: block; 
position: absolute; 
height: 2px; 
width: 24px; 
background: #8d8d8d; 
left: 13px; 
top: 18px; 
box-shadow: 0 6px 0 #8d8d8d, 0 12px 0 #8d8d8d; 
}

header { 
width: 100%; 
position: fixed; 
left: 0px; 
background: #efefef; 
padding: 10px 10px 10px 50px; 
font-size: 30px; 
line-height: 30px; 
z-index: 0; 
}

/* drawer menu pane - note the 0px width */

#drawer { 
position: fixed; 
top: 0; 
left:-300px; 
height: 100%; 
width: 300px; 
background: #2f2f2f; 
overflow-x: hidden; 
overflow-y: scroll; 
padding: 20px; 
-webkit-overflow-scrolling: touch; 
}

/* actual page content pane */

#page-content { 
margin-left: 0px; 
margin-top: 50px; 
width: 100%; 
height: calc(100% - 50px); 
overflow-x:hidden; 
overflow-y:scroll; 
-webkit-overflow-scrolling: touch; 
padding: 20px; 
}

/* checked styles (menu open state) */

#drawer-toggle:checked ~ #drawer-toggle-label { 
height: 100%; 
width: calc(100% - 300px); 
background: rgba(255,255,255,.8); 
}

#drawer-toggle:checked ~ #drawer-toggle-label, 
#drawer-toggle:checked ~ header { 
left: 300px; 
}

#drawer-toggle:checked ~ #drawer { 
left: 0px; 
}

#drawer-toggle:checked ~ #page-content { 
margin-left: 300px; 
}

/* Menu item styles */

#drawer ul { 
list-style-type:none; 
}

#drawer ul a { 
display:block; 
padding:10px; 
color:#c7c7c7; 
text-decoration:none; 
}

#drawer ul a:hover { 
color:white; 
}

/* Responsive MQ */

@media all and (max-width:350px) {

#drawer-toggle:checked ~ #drawer-toggle-label { 
height: 100%; 
width: 50px; 
}

#drawer-toggle:checked ~ #drawer-toggle-label, 
#drawer-toggle:checked ~ header { 
left: calc(100% - 50px); 
}

#drawer-toggle:checked ~ #drawer { 
width: calc(100% - 50px); 
padding: 20px; 
}

#drawer-toggle:checked ~ #page-content { 
margin-left: calc(100% - 50px); 
}

}

60

Responsive Pure CSS Menu Drawer

By: pixeldev

58

Flip Navbar with Pure CSS

By: pixeldev

<li class="body">
     
		<ul class="main">
        
			<li><a><i class="fa fa-home" aria-hidden="true"></i> HOME</a></li>
        
			<li class="projects"><a><i class="fa fa-tasks" aria-hidden="true"></i>  ANIMATION 1 ↓</a>
				<ul class="ul" style="margin-left:-20px">
					<li><a>projects 1</a></li>
					<li><a>projects 2</a></li>
					<li><a>projects 3</a></li>
					<li><a>projects 4</a></li>
				</ul>
			</li>
        
			<li class="about"><a><i class="fa fa-tasks" aria-hidden="true"></i> ANIMATION 2 ↓</a>
				<ul class="ul1" style="margin-left:-20px">
					<li><a>projects 1</a></li>
					<li><a>projects 2</a></li>
					<li><a>projects 3</a></li>
					<li><a>projects 4</a></li>
				</ul>
			</li> 
        
			<li class="about"><a><i class="fa fa-tasks" aria-hidden="true"></i> ANIMATION 3 ↓</a>
				<ul class="ul2" style="margin-left:-20px">
					<li><a>projects 1</a></li>
					<li><a>projects 2</a></li>
					<li><a>projects 3</a></li>
					<li><a>projects 4</a></li>
				</ul>
			</li>

body{
font-family: 'Cormorant Garamond', serif;
font-size:15px;
 font-weight: bold;
}

ul{
position:absolute;
list-style-type:none;
background:#CE93D8;
margin:0px;
padding:0px;
margin-top:-90px;
}

li{
display:inline-block;
padding:20px;
cursor:pointer;
}

a{
text-decoration:none;
color:black;
}

.ul{
position:absolute;
display:none;
background:#b3d4fc;

-webkit-animation:mymove .3s linear ;
}

.ul:hover .ul{
display:block;
}

li ul li:hover a{
color:white;
}

.projects:hover ul{
display:block;
margin-top:20px;
}

.projects:hover .ul li{
display:block;
}

.projects .ul li a{
padding:10px;
color:black;
}

.projects .ul li:hover a{
color:white;
}

li ul li{
transition:all .2s;
}

li ul li:hover{
background:#795548;
}

@-webkit-keyframes mymove {
    0%  {transform:translate3d(0px,50px,0px)}
    
    25% {transform:translate3d(0,0px,0)}
  
   50% {transform:translate3d(0,25px,0)}
  
   100% {transform:translate3d(0,0,0)}
}

div{
background:#80CBC4;

height:70px;
 box-shadow: 
        0px 11px 8px -10px #CCC,
        0px -11px 8px -10px #CCC; 
}
.ul1{
position:absolute;
display:none;
background:#b3d4fc;
-webkit-animation:move .3s linear alternate ;
}
.about .ul1 li a{
  color:black;
}
.about .ul1 li:hover a{
  color:white;
}
.about:hover .ul1{
display:block;
margin-top:20px;
}
.about:hover .ul1 li{
display:block;
}
.ul1:hover .ul1 {
display:block;
}
@-webkit-keyframes move {
   0%   {transform:translate3d(50px,0,0)}
    
    25% {transform:translate3d(0,0,0)}
  
   50% {transform:translate3d(25px,0,0)}
  
   100% {transform:translate3d(0,0,0)}
}

.ul2{
position:absolute;
display:none;
background:#b3d4fc;
-webkit-animation:move1 .2s linear alternate ;
}
.about .ul2 li a{
  color:black;
}
.about .ul1 li:hover a{
  color:white;
}
.about:hover .ul2{
display:block;
margin-top:20px;
}
.about:hover .ul2 li{
display:block;
}
.ul2:hover .ul2 {
display:block;
}
@-webkit-keyframes move1 {
   0%   {transform:  scale(.5);}
    50% {transform:scale(1.2);}
  100% {transform:scale(1);}
}

.ul li:hover{
  background:#689F38;
}
.ul1 li:hover{
  background:#689F38;
}
.ul2 li:hover{
  background:#689F38;
}

58

Pure CSS Dropdown Menubar with animations

By: pixeldev

<header id="head">
	<div class="container">
    	<nav id="menu">
    		
    		<label id="toggle-nav-label" for="toggle-nav"><i class="icon-reorder"></i></label>
    		
    		<div class="box">
	    		<ul>
	    			<li><a href="#"><i class="icon-home"></i> home</a></li>
	    			<li><a href="#"><i class="icon-file-alt"></i> about</a></li>
	    			<li><a href="#"><i class="icon-copy"></i> works</a></li>
	    			<li><a href="#"><i class="icon-envelope"></i> contacts</a></li>
	    		</ul>
    		</div>
    		
    	</nav>
	</div>
</header>

<section id="content">
	<div class="container">
		<h1>Pure CSS Navigation Overlay</h1>
		<p>Nisi pellentesque placerat penatibus montes ridiculus ridiculus! Penatibus porttitor, augue? Odio sed, elementum, in nisi ultricies enim? Risus scelerisque placerat et elementum odio dictumst. Scelerisque phasellus, sit in diam odio lectus porta, vel duis pid nisi! Eu eros! Sit non aenean enim hac egestas ultrices, et pulvinar sed, arcu et, arcu vel tortor turpis, phasellus lundium turpis turpis hac eros, auctor dignissim ut facilisis, est? Duis odio magnis? Aenean ultrices, mattis placerat adipiscing cum adipiscing ut, scelerisque augue in massa, pulvinar augue! Amet rhoncus arcu phasellus integer adipiscing tristique facilisis! Adipiscing sed ac turpis scelerisque nunc sit tempor turpis ultricies egestas adipiscing magnis sit augue et pulvinar sociis, urna in, aliquam sagittis dictumst</p>
		<p>Aliquam cum, auctor habitasse, elementum tempor et sit, urna integer. Dictumst, turpis penatibus magnis integer placerat adipiscing aliquam, sit rhoncus ut et, integer elementum tempor nisi nec facilisis, nec phasellus. Nisi odio lundium, eu rhoncus massa vut lacus magna mauris magnis! Eu tempor hac ac turpis eros tristique est pellentesque ac nascetur nascetur urna, placerat vel eu vel, dictumst amet. Pulvinar arcu odio, cursus, ridiculus nisi tempor sagittis amet platea? Vel mus quis nunc sed quis! Sagittis habitasse elementum ac rhoncus rhoncus amet nunc et? Phasellus! Phasellus urna, et aliquet diam sociis egestas duis? Porta lundium velit nisi nec, massa porta dolor nunc, mid lorem sit magnis montes. Vel nisi, elementum vut! Nisi nisi habitasse integer! Dolor sed.</p>
	</div>
</section>

@import url('https://fonts.googleapis.com/css?family=Merriweather+Sans:700,300');
@import url('https://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css');

* { padding: 0px; margin: 0px; border: 0px; outline: 0px; }		/* fast reset */

body { 
	font-family: 'Merriweather Sans', Arial, sans-serif;
	font-size: 12px; 
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

li { list-style: none; }

.container { margin: 0px 20% 0px 20%; }

#head { margin-top: 20px; }

#menu .box {
	position: fixed;
	text-align: center;
	overflow: hidden;
	z-index: -1;
	opacity: 0;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background: rgba(0,0,0,0.8);
	-webkit-transition: all 0.3s ease-in-out; 
	-moz-transition: all 0.3s ease-in-out; 
	-o-transition: all 0.3s ease-in-out; 
	transition: all 0.3s ease-in-out;
}

#menu ul {
	position: relative;
	top: 20%;
	-webkit-transform: scale(2);
	-moz-transform: scale(2);
	-ms-transform: scale(2);
	transform: scale(2);
	-webkit-transition: all 0.3s ease-in-out; 
	-moz-transition: all 0.3s ease-in-out; 
	-o-transition: all 0.3s ease-in-out; 
	transition: all 0.3s ease-in-out;
}

#menu li { 
	display: inline-block; 
	margin: 20px;
}

#menu li a {
	border-radius: 3px;
	padding: 15px;
	border: 1px solid transparent;
	text-decoration: none;
	font-size: 18px;
	color: #fff;
	-webkit-transition: all 0.2s ease-in-out; 
	-moz-transition: all 0.2s ease-in-out; 
	-o-transition: all 0.2s ease-in-out; 
	transition: all 0.2s ease-in-out;
}

#menu li a:hover { border-color: #fff; }

#menu li a i { 
	margin-right: 5px; 
	font-size: 24px;
}

#toggle-nav-label {
	color: rgba(0,0,0,0.5);
	background: rgba(0,0,0,0.2);
	text-align: center;
	line-height: 30px;
	font-size: 16px;
	display: block;
	cursor: pointer;
	position: relative;
	z-index: 500;
	width: 30px;
	height: 30px;
	border-radius: 5px;
}

#toggle-nav { display: none; }

#toggle-nav:checked ~ .box { 
	opacity: 1;
	z-index: 400;
}

#toggle-nav:checked ~ .box ul {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

#toggle-nav:checked ~ #toggle-nav-label { 
	background: #fff; 
	color: rgba(0,0,0,0.8);
}

#content { margin: 20px 0px 20px 0px; }

#content h1 {
	margin-bottom: 20px;
	font-size: 30px;
}

#content p {
	font-size: 14px;
	line-height: 150%;
	margin-bottom: 20px;
}

55

Pure CSS Navigation Overlay

By: pixeldev

<ul class="navigation">
	<li class="nav-item"><a href="#">Home</a></li>
	<li class="nav-item"><a href="#">Portfolio</a></li>
	<li class="nav-item"><a href="#">About</a></li>
	<li class="nav-item"><a href="#">Blog</a></li>
	<li class="nav-item"><a href="#">Contact</a></li>
</ul>

<div class="site-wrap">
	
  <h1>Pure CSS Off-Screen Menu</h1>
  <h3>Finally, an off-screen menu that doesn't require a bunch of Javascript to work. </h3>
  
  <p>This concept relies on the <code>:checked</code> pseudo-selector as well as the general sibling <code>~</code> selector, so it has decent browser support.</p>
  <p><strong>Browsers supported:</strong> IE9+, Firefox 3.5+, Chrome any, Safari 3.2+, Opera 9.5+</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi vero nisi eos sed qui natus, ut eius reprehenderit error nesciunt veniam aliquam nulla itaque labore obcaecati molestiae eveniet, perferendis provident amet perspiciatis expedita accusantium! Eveniet, quos voluptas et, labore natus, saepe unde est nulla sit eaque tempore debitis accusantium. Recusandae.</p>
  <p>Dolorem aliquam a libero reiciendis obcaecati doloribus ipsa eos laudantium, dicta in! Odit iure ut ratione, dolorum cupiditate perferendis voluptatum sapiente, dignissimos sunt necessitatibus, reprehenderit consequatur dolorem. Aliquam veniam quaerat, pariatur deserunt reiciendis vero vitae, repellat omnis sequi dolor nesciunt. Nihil similique alias impedit, obcaecati eligendi delectus voluptatum! Ipsum, vel.</p>
  <p>Sint, perspiciatis nemo aut, rerum excepturi deleniti modi quos nihil corporis eum, maiores soluta labore, consectetur eligendi nesciunt. Placeat, incidunt! Illum placeat eligendi, veritatis consectetur eum! Dolor obcaecati minima ab placeat voluptatem neque modi doloribus, magnam qui voluptate eaque in. Nulla expedita hic porro architecto facere officiis vitae numquam, dolor!</p>
  <p>Perferendis quis ea incidunt ducimus nisi voluptate natus. Repellat asperiores quod rerum rem quos blanditiis enim modi, veniam voluptas a facilis! Velit cum omnis, voluptatum eum inventore! Corrupti, suscipit, neque distinctio expedita est laboriosam cum aliquid minus tempora quaerat officia possimus unde vel deleniti eaque fugit accusamus iusto dolorum natus.</p>
  
  <p>Demo by Austin Wulf. <a href="http://www.sitepoint.com/pure-css-off-screen-navigation-menu">See article</a>.</p>
</div>

/* Navigation Menu - Background */
.navigation {
  /* critical sizing and position styles */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  
  /* non-critical appearance styles */
  list-style: none;
  background: #111;
}

/* Navigation Menu - List items */
.nav-item {
  /* non-critical appearance styles */
  width: 200px;
  border-top: 1px solid #111;
  border-bottom: 1px solid #000;
}

.nav-item a {
  /* non-critical appearance styles */
  display: block;
  padding: 1em;
  background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  color: white;
  font-size: 1.2em;
  text-decoration: none;
  transition: color 0.2s, background 0.5s;
}

.nav-item a:hover {
  color: #c74438;
  background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(75,20,20,0.65) 100%);
}

/* Site Wrapper - Everything that isn't navigation */
.site-wrap {
  /* Critical position and size styles */
  min-height: 100%;
  min-width: 100%;
  background-color: white; /* Needs a background or else the nav will show through */
  position: relative;
  top: 0;
  bottom: 100%;
  left: 0;
  z-index: 1;
  
  /* non-critical apperance styles */
  padding: 4em;
  background-image: linear-gradient(135deg, rgb(254,255,255) 0%,rgb(221,241,249) 35%,rgb(160,216,239) 100%);
  background-size: 200%;
}

/* Nav Trigger */
.nav-trigger {
  /* critical styles - hide the checkbox input */
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

label[for="nav-trigger"] {
  /* critical positioning styles */
  position: fixed;
  left: 15px; top: 15px;
  z-index: 2;
  
  /* non-critical apperance styles */
  height: 30px;
  width: 30px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,");
  background-size: contain;
}

/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
  transition: left 0.2s;
}

.nav-trigger:checked + label {
  left: 215px;
}

.nav-trigger:checked ~ .site-wrap {
  left: 200px;
  box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}

body {
	/* Without this, the body has excess horizontal scroll when the menu is open */
  overflow-x: hidden;
}

/* Additional non-critical styles */

h1, h3, p {
  max-width: 600px;
  margin: 0 auto 1em;
}

code {
	padding: 2px;
	background: #ddd;
}

/* Micro reset */
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
html, body { height: 100%; width: 100%; font-family: Helvetica, Arial, sans-serif; }

52

Pure CSS Off-Screen Navigation Menu

By: pixeldev

<nav id="nav" class="clearfix">
		<ul>
			<li>
				<a href="#">Home</a>
				<ul>
					<li><a href="#">Menu Item 1</a></li>
					<li class="submenu">
						<a href="#">Menu Item 2</a>
						<ul>
							<li><a href="#">Subitem 1</a></li>
							<li class="submenu">
								<a href="#">Subitem 2</a>
								<ul>
									<li><a href="#">Subitem 1</a></li>
									<li><a href="#">Subitem 2</a></li>
									<li><a href="#">Subitem 3</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li class="submenu">
						<a href="#">Menu Item 3</a>
						<ul>
							<li><a href="#">Subitem 1</a></li>
							<li><a href="#">Subitem 2</a></li>
							<li><a href="#">Subitem 3</a></li>
						</ul>				
					</li>
					<li><a href="#">Menu Item 4</a></li>
				</ul>
			</li>
			<li>
				<a href="#">About</a>
				<ul>
					<li><a href="#">Menu Item 1</a></li>
					<li><a href="#">Menu Item 2</a></li>
					<li><a href="#">Menu Item 3</a></li>
				</ul>
			</li>
			<li>
				<a href="#">Products</a>
				<ul>
					<li class="submenu">
              <a href="#">Menu Item 1</a>
              <ul>
							<li><a href="#">Subitem 1</a></li>
							<li><a href="#">Subitem 2</a></li>
							<li><a href="#">Subitem 3</a></li>
						</ul>
            </li>
					<li><a href="#">Menu Item 2</a></li>
             <li><a href="#">Menu Item 3</a></li>
				</ul>
			</li>
			<li>
				<a href="#">Contact</a>
			</li>
		</ul>
	</nav>

@import url(https://reset5.googlecode.com/hg/reset.min.css);

/* Demo Config */
body {font-family:sans-serif}
ul, li {list-style:none; margin:0; padding:0}

/* Nav */
#nav {background-color:#2980b9}
#nav a {color:#fff; display:block; padding:15px 20px; text-decoration:none}
#nav ul li {position:relative}

/* Top Level */
#nav li {transition:background-color .5s}
#nav li:hover {background-color:#50AEED}
#nav > ul > li {display:block; float:left}

/* Sub-level 1 */
#nav > ul li:hover > ul {opacity:1; top:45px; visibility:visible}
#nav > ul ul {opacity:0; visibility:hidden; position:absolute; top:60px; transition:all .25s}
#nav > ul ul li {background-color:#3498db; width:180px}
#nav > ul ul li a {padding:10px 20px}

/* Level 2 and Beyond */
#nav > ul  ul li > ul {margin-left:180px; top:15px}
#nav > ul  ul li:hover > ul {margin-left:180px; top:0}
#nav li.submenu:after {content:"\25BA"; color:#fff; display:block; float:right; font-size:10px; height:20px; position:absolute; right:10px; top:12px}

/* Clearfix */
.clearfix:after {visibility: hidden; display: block; font-size: 0; content:" "; clear:both; height:0}

51

Animated Navigation Menu using Pure CSS

By: pixeldev

50

Navigation list underline with animated pure css

By: pixeldev

:root {
  --menu: 70px; /* Defines the header height to be reused across the layout for consistency */
  
  --black: #08170a;
  --black-green: #0f2913;
  --green-black: #1e5225;
  --green-black-medium: #26915d;
  --green: #06ba78;
  --green-white-medium: #6ccf93;
  --green-white: #b8ffc0;
}

/* === Essential logic for anchor navigation === */
html {
    /* Prevents the fixed menu from covering the section content when jumping to an ID */
    scroll-padding-top: var(--menu); 
    /* Enables smooth transition when clicking navigation links instead of an instant jump */
    scroll-behavior: smooth; 
}
/* ======================================== */

* {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  /* Offsets the body content so the first section isn't hidden under the fixed navbar */
  padding-top: var(--menu); 
}

nav {
  width: 100%;
  background: var(--black);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  height: var(--menu); /* Uses the variable to match the global layout height */
  position: fixed;
  top: 0;
}

nav a {
  color: var(--green-white);
  text-decoration: none;
  font-size: 20px;
  height: 100%;
  display: block;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bolder;
}

div {
  width: 100%;
  /* Ensures each section fills the remaining viewport height (100vh) minus the menu height */
  height: calc(100vh - var(--menu)); 
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bolder;
  font-size: 15px;
  color: var(--green-white);
}

/* Logic to cycle through 5 different background colors based on the element's index */
div:nth-child(5n+1) { background: var(--green-black); }
div:nth-child(5n+4) { background: var(--green-white-medium); }
div:nth-child(5n+2) { background: var(--green-black-medium); }
div:nth-child(5n+5) { background: var(--green); }
div:nth-child(5n+3) { background: var(--black-green); }

37

Navigation

Hamburger Menu

By: pixeldev

3D navigation with pure CSS

By: pixeldev

Navigation Menu

By: pixeldev

Responsive Pure CSS Menu Drawer

By: pixeldev

Flip Navbar with Pure CSS

By: pixeldev

Pure CSS Dropdown Menubar with animations

By: pixeldev

Pure CSS Navigation Overlay

By: pixeldev

Pure CSS Off-Screen Navigation Menu

By: pixeldev

Animated Navigation Menu using Pure CSS

By: pixeldev

Navigation list underline with animated pure css

By: pixeldev

Scroll Navigation

By: pixeldev