Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Pure CSS menu demo
/* Pure CSS menu demo */
body {
font-family: "Trebuchet MS", sans-serif;
font-size: 30px;
line-height: 1.4
}
/* CSS 2 */
.menu-bar {
background-color: #666;
color: #eee;
height: 1.4em;
padding: 0.1em 0;
overflow: visible;
}
.menu {
width: 8em;
}
.menu label {
background-color: #666;
cursor: pointer;
padding: 0 0.5em;
}
.menu-clicker {
position: absolute;
top: -1000px;
left: -1000px;
width: 0;
height: 0;
margin: 0;
opacity: 0;
}
.container {
max-height: 0;
overflow: hidden;
position: relative;
}
.options {
background-color: #eee;
border: solid 1px #666;
}
.options a {
display: block;
padding: 0.1em 0.5em;
text-decoration: none;
}
.options a, .options a:visited {
color: #666;
}
.options a:hover {
background-color: #acd;
}
/* CSS 3 */
.menu-clicker:checked {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.menu-clicker:checked ~ .container {
max-height: 9em;
z-index: 2;
}
.container {
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
-ms-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
transition: all 400ms ease-out;
-webkit-box-shadow: 0.1em 0.1em 0.2em #999;
-moz-box-shadow: 0.1em 0.1em 0.2em #999;
box-shadow: 0.1em 0.1em 0.2em #999;
<p>Click the Ingredients menu!</p>
<div class="menu-bar">
<div class="menu">
<input class="menu-clicker" type="checkbox" id="menu-1">
<label for="menu-1">Ingredients</label>
<div class="container">
<div class="options">
<a href="http://dabblet.com/gist/2004521" target="_top">Bacon</a>
<a href="http://dabblet.com/gist/2004521" target="_top">Lettuce</a>
<a href="http://dabblet.com/gist/2004521" target="_top">Tomato</a>
<a href="http://dabblet.com/gist/2004521" target="_top">Mayonnaise</a>
<a href="http://dabblet.com/gist/2004521" target="_top">Bread</a>
</div>
</div>
</div>
</div>
{"view":"split-vertical","seethrough":"","prefixfree":"","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment