<div id="holder">
<h2>CSS Menu Effects by Joni</h2>
<!-- EFFECTS -->
<input type="radio" id="top" name="effects" checked><label for="top">Top</label>
<input type="radio" id="right" name="effects" ><label for="right">Right</label>
<input type="radio" id="bottom" name="effects" ><label for="bottom">Bottom</label>
<input type="radio" id="left" name="effects" ><label for="left">Left</label>
<input type="radio" id="top-right" name="effects" ><label for="top-right">Top Right</label>
<input type="radio" id="bottom-right" name="effects" ><label for="bottom-right">Bottom Right</label>
<input type="radio" id="bottom-left" name="effects" ><label for="bottom-left">Bottom Left</label>
<input type="radio" id="top-left" name="effects" ><label for="top-left">Top Left</label>
<input type="radio" id="top-right-rotate" name="effects" ><label for="top-right-rotate">Top Right Rotate</label>
<input type="radio" id="bottom-right-rotate" name="effects" ><label for="bottom-right-rotate">Bottom Right Rotate</label>
<input type="radio" id="bottom-left-rotate" name="effects" ><label for="bottom-left-rotate">Bottom Left Rotate</label>
<input type="radio" id="top-left-rotate" name="effects" ><label for="top-left-rotate">Top Left Rotate</label>
<input type="radio" id="top-scale" name="effects" ><label for="top-scale">Top Scale</label>
<input type="radio" id="right-scale" name="effects" ><label for="right-scale">Right Scale</label>
<input type="radio" id="bottom-scale" name="effects" ><label for="bottom-scale">Bottom Scale</label>
<input type="radio" id="left-scale" name="effects" ><label for="left-scale">Left Scale</label>
<input type="radio" id="top-right-scale" name="effects" ><label for="top-right-scale">Top Right Scale</label>
<input type="radio" id="right-bottom-scale" name="effects" ><label for="right-bottom-scale">Right Bottom Scale</label>
<input type="radio" id="bottom-left-scale" name="effects" ><label for="bottom-left-scale">Bottom Left Scale</label>
<input type="radio" id="left-top-scale" name="effects" ><label for="left-top-scale">Left Top Scale</label>
<input type="radio" id="middle-scale" name="effects" ><label for="middle-scale">Middle Scale</label>
<input type="radio" id="middle-rotate-scale" name="effects" ><label for="middle-rotate-scale">Middle Rotate Scale</label>
<input type="radio" id="middle-rotatex-scale" name="effects" ><label for="middle-rotatex-scale">Middle RotateX Scale</label>
<input type="radio" id="middle-rotatey-scale" name="effects" ><label for="middle-rotatey-scale">Middle RotateY Scale</label>
<input type="radio" id="middle-skew" name="effects" ><label for="middle-skew">Middle Skew</label>
<input type="radio" id="left-skew" name="effects" ><label for="left-skew">Left Skew</label>
<input type="radio" id="right-skew" name="effects" ><label for="right-skew">Right Skew</label>
<input type="checkbox" id="nav">
<label for="nav" class="entypo-menu"></label>
<!-- NAVIGATION STARTS -->
<nav role='navigation'>
<ul>
<h2>Check out these also :)</h2>
<li><a href="https://cdpn.io/wgFJG">Mega Menu Pure CSS and HTML by Joni</a></li>
<li><a href="https://cdpn.io/JGaBr">Scroll effect with text with help from Skrollr</a></li>
<li><a href="https://cdpn.io/hfeib">Minimal Mobile Markup by Joni</a></li>
<li><a href="https://cdpn.io/abvFk">Minimal Hover Menu</a></li>
</ul>
</nav>
</div>
@import url(http://weloveiconfonts.com/api/?family=entypo);
@import url(https://fonts.googleapis.com/css?family=Roboto:100);
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
html {
height:100%;
}
body {
font-family:'HelveticaNeue-Light', Roboto;
height:100%;
padding:0 60px;
background:#34aadc;
perspective:100000;
transform-style:preserve-3d;
}
#holder {
display:block;
padding:60px 0;
}
input[id*="nav"] {
top:-40px;
left:-40px;
background:red;
position:absolute;
z-index:1;
}
input[id*="nav"] + label {
width:40px;
height:40px;
top:0;
left:0;
text-align:center;
line-height:40px;
color:#fff;
position:absolute;
z-index:1;
cursor:pointer;
font-size:22px;
transition:.5s;
}
input[id*="nav"]:checked + label {
color:#34aadc;
}
nav {
width:100%;
height:100%;
background:#333;
position:fixed;
transition:.5s;
top:0;
left:0;
}
nav ul {
padding:75px;
}
nav ul li {
padding:4px 0 3px 0;
}
nav ul li a {
text-decoration:none;
color:#fff;
}
nav ul li a:hover {
color:#34aadc;
}
h2 {
padding:10px 10px 10px 0;
font-size:24px;
color:#fff;
font-weight:bold;
}
input[type="radio"] {
display:none;
}
input[type="radio"] + label {
border:2px solid #fff;
display:inline-block;
padding:10px;
margin-bottom:10px;
border-radius:4px;
cursor:pointer;
}
input[type="radio"]:checked + label {
background:#fff;
}
/* EFFECTS */
input[id*="top"]:checked ~ nav {
transform:translate3d(0,-100%,0);
}
input[id*="right"]:checked ~ nav {
transform:translate3d(100%,0,0);
}
input[id*="bottom"]:checked ~ nav {
transform:translate3d(0,100%,0);
}
input[id*="left"]:checked ~ nav {
transform:translate3d(-100%,0,0);
}
input[id*="top-right"]:checked ~ nav {
transform:translate3d(100%,-100%,0);
}
input[id*="bottom-right"]:checked ~ nav {
transform:translate3d(100%,100%,0);
}
input[id*="bottom-left"]:checked ~ nav {
transform:translate3d(-100%,100%,0);
}
input[id*="top-left"]:checked ~ nav {
transform:translate3d(-100%,-100%,0);
}
input[id*="top-right-rotate"]:checked ~ nav {
transform:rotate(90deg);
transform-origin:100% 0;
}
input[id*="bottom-right-rotate"]:checked ~ nav {
transform:rotate(90deg);
transform-origin:100% 100%;
}
input[id*="bottom-left-rotate"]:checked ~ nav {
transform:rotate(-90deg);
transform-origin:0 100%;
}
input[id*="top-left-rotate"]:checked ~ nav {
transform:rotate(-90deg);
transform-origin:0 0;
}
input[id*="top-scale"]:checked ~ nav {
transform:scale(0);
transform-origin:50% 0;
}
input[id*="right-scale"]:checked ~ nav {
transform:scale(0);
transform-origin:100% 50%;
}
input[id*="bottom-scale"]:checked ~ nav {
transform:scale(0);
transform-origin:50% 100%;
}
input[id*="left-scale"]:checked ~ nav {
transform:scale(0);
transform-origin:0 50%;
}
input[id*="top-right-scale"]:checked ~ nav {
transform:scale(0);
transform-origin:100% 0;
}
input[id*="right-bottom-scale"]:checked ~ nav {
transform:scale(0);
transform-origin:100% 100%;
}
input[id*="bottom-left-scale"]:checked ~ nav {
transform:scale(0);
transform-origin:0 100%;
}
input[id*="left-top-scale"]:checked ~ nav {
transform:scale(0);
transform-origin:0 0;
}
input[id*="middle-scale"]:checked ~ nav {
transform:scale(0);
transform-origin:50% 50%;
backface-visibility:hidden;
}
input[id*="middle-rotate-scale"]:checked ~ nav {
transform:scale(0) rotate(360deg);
transform-origin:50% 50%;
}
input[id*="middle-rotatex-scale"]:checked ~ nav {
transform:scale(0) rotatex(360deg);
transform-origin:50% 50%;
}
input[id*="middle-rotatey-scale"]:checked ~ nav {
transform:scale(0) rotatey(360deg);
transform-origin:50% 50%;
}
input[id*="middle-skew"]:checked ~ nav {
transform:scale(0) skew(90deg);
transform-origin:50% 50%;
backface-visibility:hidden;
}
input[id*="left-skew"]:checked ~ nav {
transform:scale(0) skew(90deg);
transform-origin:0 50%;
}
input[id*="right-skew"]:checked ~ nav {
transform:scale(0) skew(-90deg);
transform-origin:100% 50%;
}
input[id*="nav"]:checked ~ nav {
transform:translate3d(0,0,0);
position:fixed;
}
Also see: Tab Triggers