<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/RYJASM/pen/epdRZO?depth=everything&order=popularity&page=47&q=react&show_forks=false" />
<style class="cp-pen-styles">@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");
.menu {
font-family: arial;
background: #333;
display: table;
position: relative;
margin: 0 0.75rem;
box-shadow: 0 2rem 9rem rgba(0, 0, 0, 0.8);
}
.menu:before, .menu:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 0.75rem;
background: #333;
}
.menu:before {
left: -0.75rem;
border-radius: 0.75rem 0 0 0.75rem;
}
.menu:after {
right: -0.75rem;
border-radius: 0 0.75rem 0.75rem 0;
}
.menu_item {
display: block;
float: left;
white-space: nowrap;
color: #ccc;
font-size: 1.5rem;
}
.menu_item:last-child {
margin-right: 0;
}
.menu_item .toggle {
display: none;
}
.menu_item .toggle:checked ~ .expander {
max-width: 16rem;
background: #222;
}
.menu_item .toggle:checked ~ .expander .menu_icon {
color: #ABDC38;
-webkit-animation: none;
animation: none;
}
.menu_item .toggle:checked ~ .expander .menu_text {
color: #fff;
}
.menu_item .expander {
max-width: 3rem;
overflow: hidden;
-webkit-transition: all ease-in-out 233ms;
transition: all ease-in-out 233ms;
padding: 1.5rem;
padding-right: 1.5rem;
}
.menu_item .expander:hover {
background: #000;
}
.menu_item .expander:hover .menu_icon {
color: #fff;
-webkit-animation: jiggle ease-in-out 400ms infinite;
animation: jiggle ease-in-out 400ms infinite;
}
.menu_item label {
line-height: 3rem;
}
.menu_item .menu_icon {
display: inline-block;
font-size: 3rem;
line-height: 3rem;
vertical-align: middle;
width: 3rem;
text-align: center;
margin-right: 0.5rem;
-webkit-transition: color ease-in-out 80ms;
transition: color ease-in-out 80ms;
}
.menu_item .menu_text {
line-height: 3rem;
color: transparent;
display: inline-block;
vertical-align: middle;
padding-right: 1.5rem;
-webkit-transition: color ease-out 333ms;
transition: color ease-out 333ms;
}
.menu_title {
color: #fff;
font-size: 1.5rem;
display: block;
float: left;
line-height: 3rem;
padding: 1.5rem;
}
.positioner {
display: table;
margin: 0 auto;
margin-top: calc(50vh - 3.75rem);
}
@-webkit-keyframes jiggle {
0% {
-webkit-transform: none;
transform: none;
}
25% {
-webkit-transform: rotateZ(5deg);
transform: rotateZ(5deg);
}
75% {
-webkit-transform: rotateZ(-5deg);
transform: rotateZ(-5deg);
}
100% {
-webkit-transform: none;
transform: none;
}
}
@keyframes jiggle {
0% {
-webkit-transform: none;
transform: none;
}
25% {
-webkit-transform: rotateZ(5deg);
transform: rotateZ(5deg);
}
75% {
-webkit-transform: rotateZ(-5deg);
transform: rotateZ(-5deg);
}
100% {
-webkit-transform: none;
transform: none;
}
}
</style></head><body>
<div class="positioner">
<div class="menu">
<div class="menu_title">
Fancy Icon Menu
</div>
<div class="menu_item">
<input class="toggle" name="menu_group" id="sneaky_toggle" type="radio">
<div class="expander">
<label for="sneaky_toggle"><i class="menu_icon fa fa-bomb"></i> <span class="menu_text">Da Bomb</span></label>
</div>
</div>
<div class="menu_item">
<input class="toggle" name="menu_group" id="sneaky_toggle2" type="radio">
<div class="expander">
<label for="sneaky_toggle2"><i class="menu_icon fa fa-bell"></i> <span class="menu_text">Da Bell</span></label>
</div>
</div>
<div class="menu_item">
<input class="toggle" name="menu_group" id="sneaky_toggle3" type="radio">
<div class="expander">
<label for="sneaky_toggle3"><i class="menu_icon fa fa-child"></i> <span class="menu_text">Da Kid</span></label>
</div>
</div>
</div>
</div>
<div class="positioner">
<div class="menu">
<div class="menu_title">
Fancy Icon Menu
</div>
<div class="menu_item">
<input class="toggle" name="menu_group2" id="sneaky_togglea" type="checkbox">
<div class="expander">
<label for="sneaky_togglea"><i class="menu_icon fa fa-bomb"></i> <span class="menu_text">Da Bomb</span></label>
</div>
</div>
<div class="menu_item">
<input class="toggle" name="menu_group2" id="sneaky_toggleb" type="checkbox">
<div class="expander">
<label for="sneaky_toggleb"><i class="menu_icon fa fa-bell"></i> <span class="menu_text">Da Bell</span></label>
</div>
</div>
<div class="menu_item">
<input class="toggle" name="menu_group2" id="sneaky_togglec" type="checkbox">
<div class="expander">
<label for="sneaky_togglec"><i class="menu_icon fa fa-child"></i> <span class="menu_text">Da Kid</span></label>
</div>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >// This box must be useful for something... how about some extra comments?
// This is a css only solution to an expanding menu
// It uses radio buttons and...
// These standard CSS "tricks"
// the :checked css pseudo class
// max-width transition effect
// Block, float:left is used for menu items, so they'll display inline and react to each other's widths
// Line-height and vertical align is used to ensure that the icons/text and things stay lined up.
// * Vertical align works in this case because inline-block elements are next to each other.
// * They vertically align with themselves and not the parent.
/*
The icons are font awesome icons
https://fortawesome.github.io/Font-Awesome/
*/
/*
The html structure goes like this
div.menu {
div.menu_item {
input.toggle {
}
.expander {
label {
i.menu_icon {}
span.menu_text {}
}
}
}
}
*/
// How it all comes together
//
// 1.) By default the max-width of the expander is set to the icon size plus a little extra for padding.
// 2.) The expander overflow is set to hidden
// 3.) Fun fact. Labels work to toggle check boxes too. So we hide the check box itself.
// 4.) In the html we set the name of each radio button the same, so they interact with each other when clicked
// 5.) Give each radio a unique ID
// 6.) Using CSS, we then create a property that selects elements next to the input.toggle element
// When it is checked.
// 7.) Using this selector we set the max-width of the .expander and give it a transition property of all. For fun I added a background change as well.
// * Max-width will allow us to use a dynamic width to transition to with CSS. But it needs a maxiumum value. I set an arbitrary width of 16rem.
// If this is increased, the timing of the transition CSS property will need to be adjusted since it uses the max value to set the speed
// * That should get the boxes expanding and closing on click.
// 8.) To make it look like a menu. I wrapped each .menu_item with another div and gave it some background.
// 9.) There is also an issue of wrapping text. To make the button text not wrap apply the white-space: nowrap; property to the menu_item.
// 10.) From there, it's all just stylistic adjustments
//# sourceURL=pen.js
</script>
</body></html>
