<nav class="cp_sidebarmenu">
<ul>
<li><a href="#"><i class="fa fa-home fa-2x fa-fw"></i><span>Menu1</span></a></li>
<li><a href="#"><i class="fa fa-file-text fa-2x fa-fw"></i><span>Menu2</span></a></li>
<li><a href="#"><i class="fa fa-comment fa-2x fa-fw"></i><span>Menu3</span></a></li>
<li><a href="#"><i class="fa fa-share-alt fa-2x fa-fw"></i><span>Menu4</span></a></li>
</ul>
<ul class="control">
<li><a href="#"><i class="fa fa-cog fa-2x fa-fw"></i><span>Menu</span></a></li>
</ul>
</nav>
.cp_sidebarmenu {
position: absolute;
z-index: 1000;
top: 0;
bottom: 0;
left: 0;
overflow: hidden;
width: 3.5em;
height: 100%;
-webkit-transition: width 0.6s ease;
transition: width 0.6s ease;
-webkit-transform: translateZ(0) scale(1,1);
border-right: 1px solid #e5e5e5;
background: #37474F;
}
.cp_sidebarmenu:hover {
overflow: visible;
width: 17em;
}
.cp_sidebarmenu ul {
margin: 7px 0;
padding: 0;
outline: 0;
}
.cp_sidebarmenu li {
position: relative;
display: block;
width: 17em;
margin: 0;
padding: 0;
outline: 0;
}
.cp_sidebarmenu li a {
position: relative;
display: table;
border-spacing: 0;
border-collapse: collapse;
text-decoration: none;
color: #ffffff;
}
.cp_sidebarmenu li:before {
content:"";
position: absolute;
top: 0px;
left: -17em;
height: 100%;
width: 17em;
background : rgba(240,98,146 ,0.5);
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.cp_sidebarmenu li:hover:before {
left:0;
}
.cp_sidebarmenu span {
position: relative;
display: table-cell;
width: 14em;
vertical-align: middle;
}
.cp_sidebarmenu > ul.control {
position: absolute;
bottom: 0;
left: 0;
}
.cp_sidebarmenu ul li i {
font-size: 1.5em;
display: inline-block;
padding: 0.5em;
vertical-align: middle;
}
<header class="cp_sidebarmenu">
<nav class="cp_sidenav">
<ul class="menu">
<li><a href="#"><i class="fa fa-home fa-2x fa-fw"></i><span>Menu1</span></a></li>
<li><a href="#"><i class="fa fa-file-text fa-2x fa-fw"></i><span>Menu2</span></a></li>
<li><a href="#"><i class="fa fa-comment fa-2x fa-fw"></i><span>Menu3</span></a></li>
<li><a href="#"><i class="fa fa-share-alt fa-2x fa-fw"></i><span>Menu4</span></a></li>
</ul>
</nav>
</header>
<div class="contents">
コンテンツ
</div>
html,
body {
overflow-x: hidden;
height: 100%;
margin: 0;
padding: 0;
}
.cp_sidebarmenu {
position: fixed;
z-index: 1;
bottom: 0;
width: 3.5em;
height: 100%;
-webkit-transition: width 0.4s;
transition: width 0.4s;
background: rgba(255,112,67 ,1);
}
.cp_sidebarmenu:hover {
width: 17em;
}
.cp_sidebarmenu:hover + .contents {
max-width: 100%;
-webkit-transform: translateX(17em);
transform: translateX(17em);
opacity: 0.4;
}
.cp_sidebarmenu:hover .cp_sidenav li:nth-of-type(1) span {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.cp_sidebarmenu:hover .cp_sidenav li:nth-of-type(2) span {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.cp_sidebarmenu:hover .cp_sidenav li:nth-of-type(3) span {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.cp_sidebarmenu:hover .cp_sidenav li:nth-of-type(4) span {
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.cp_sidebarmenu:hover .cp_sidenav span {
text-indent: 0;
}
.cp_sidebarmenu ul li i {
font-size: 1.5em;
display: inline-block;
padding: 0.5em;
vertical-align: middle;
}
.cp_sidenav li:hover {
background-color: rgba(38,50,56 ,1);
}
.cp_sidenav li:hover:before {
background-color: rgba(38,50,56 ,1);
}
.cp_sidenav li:hover a {
color: rgba(255,112,67 ,1);
}
.cp_sidenav li:before {
position: absolute;
z-index: 1;
top: 0;
left: -0.925rem;
width: 0.925rem;
height: 100%;
content: '';
-webkit-transition: background 0.4s;
transition: background 0.4s;
background: rgba(255,112,67 ,1);
}
.cp_sidenav ul {
margin-top: 1.85rem;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding: 0;
list-style: none;
}
.cp_sidenav li {
position: relative;
clear: both;
width: 100%;
padding: 0;
-webkit-transition: background 0.4s;
transition: background 0.4s;
}
.cp_sidenav li a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.cp_sidenav a {
width: 100%;
-webkit-transition: color 0.4s;
transition: color 0.4s;
text-decoration: none;
color: #fefefe;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.cp_sidenav a span {
font-family: Roboto;
position: relative;
z-index: 0;
display: block;
-webkit-transition: text-indent 0.4s ease-in-out;
transition: text-indent 0.4s ease-in-out;
white-space: nowrap;
text-indent: -20em;
}
.contents {
height: 100%;
min-height: 100vh;
margin-top: 0;
padding-left: 140px;
-webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
transition: opacity 0.4s, -webkit-transform 0.4s;
transition: transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s, -webkit-transform 0.4s;
background-image: url(https://picsum.photos/1001/665/?random);
background-position: center center;
background-size: cover;
}
<div class="cp_sidebar">
<header>Menu</header>
<nav class="cp_sidebar_nav">
<ul>
<li><a href="#"><i class="fa fa-home fa-fw"></i><span>Menu1</span></a>
<ul class="cp_sidebar_2ndnav">
<li><a href="#"><i class="fa fa-calendar fa-fw"></i>Menu1 2nd Menu1</a></li>
<li><a href="#"><i class="fa fa-calendar-minus-o fa-fw"></i>Menu1 2nd Menu2</a></li>
<li><a href="#"><i class="fa fa-calendar-times-o fa-fw"></i>Menu1 2nd Menu3</a></li>
<li><a href="#"><i class="fa fa-calendar-plus-o fa-fw"></i>Menu1 2nd Menu4</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-file-text fa-fw"></i><span class="">Menu2</span></a>
<ul class="cp_sidebar_2ndnav">
<li><a href="#"><i class="fa fa-file-image-o fa-fw"></i>Menu2 2nd Menu1</a></li>
<li><a href="#"><i class="fa fa-file-video-o fa-fw"></i>Menu2 2nd Menu2</a></li>
<li><a href="#"><i class="fa fa-file-audio-o fa-fw"></i>Menu2 2nd Menu3</a></li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-comment fa-fw"></i><span class="">Menu3</span></a>
<ul class="cp_sidebar_2ndnav">
<li><a href="#"><i class="fa fa-commenting fa-fw"></i>Menu3 2nd Menu1</a></li>
<li><a href="#"><i class="fa fa-comments fa-fw"></i>Menu3 2nd Menu2</a></li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-share-alt fa-fw"></i><span class="">Menu4</span></a>
<ul class="cp_sidebar_2ndnav">
<li><a href="#"><i class="fa fa-facebook fa-fw"></i>Menu4 2nd Menu1</a></li>
<li><a href="#"><i class="fa fa-twitter fa-fw"></i>Menu4 2nd Menu2</a></li>
<li><a href="#"><i class="fa fa-google-plus fa-fw"></i>Menu4 2nd Menu3</a></li>
</ul>
</li>
<li class="control"><a href="#"><i class="fa fa-cog fa-fw"></i><span class="">Menu5</span></a></li>
</ul>
</nav>
</div>
.cp_sidebar a {
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
text-decoration: none;
}
.cp_sidebar a:hover {
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.cp_sidebar * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_sidebar {
position: absolute;
top: 0;
visibility: visible;
overflow: hidden;
width: 270px;
height: 100%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
background-color: #37474F;
}
.cp_sidebar header {
display: block;
width: 100%;
padding: 0.75em 1em;
background-color: #00BCD4;
}
.cp_sidebar_nav {
font-size: 1.2em;
position: fixed;
z-index: 9;
overflow: hidden;
/* overflow: auto; メニューをスクロールさせる場合*/
height: 100%;
padding-bottom: 6em;
background-color: #263238;
-webkit-overflow-scrolling: touch;
}
.cp_sidebar_nav ul {
display: block;
margin: 0;
padding: 0;
list-style: none;
width: 270px;
}
.cp_sidebar_nav ul li {
display: inline-block;
width: 100%;
margin-left: 0;
padding-left: 0;
}
.cp_sidebar_nav ul li.control {
background-color: #006064;
}
.cp_sidebar_nav ul li a {
font-size: 0.75em;
position: relative;
display: block;
padding: 1.05em 1em;
color: rgba(255, 255, 255, 0.9);
}
.cp_sidebar_nav ul li a:hover {
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
background-color: rgba(0,172,193 ,0.9);
}
.cp_sidebar_nav ul li i {
font-size: 1.5em;
display: inline-block;
padding-right: 0.5em;
vertical-align: middle;
}
.cp_sidebar_nav ul li > ul li a {
font-size: 0.6em;
}
.cp_sidebar_nav > ul > li > a:after {
font-family: FontAwesome;
font-size: 1.5em;
position: absolute;
top: 50%;
right: 0.5em;
width: auto;
content: '\f0a9';
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #ffffff;
}
.cp_sidebar_nav .cp_sidebar_2ndnav {
position: absolute;
z-index: 9;
top: 0;
left: 2.2em;
height: 100vh;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-transform: translateX(100%);
transform: translateX(100%);
background-color: #455a64;
}
.cp_sidebar_nav .cp_sidebar_2ndnav a:hover {
background-color: rgba(0,172,193 ,0.7);
}
.cp_sidebar_nav ul > li:hover .cp_sidebar_2ndnav {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-transform: translateX(0);
transform: translateX(0);
}
<ul class="cp_sidebarmenu">
<li><a href="#"><i class="fa fa-home"></i><span>Menu1</span></a>
<ul>
<li><a href="#"><i class="fa fa-calendar"></i><span>menu1-1</span></a></li>
<li><a href="#"><i class="fa fa-calendar-check-o"></i><span>menu1-2</span></a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-file-text"></i><span>Menu2</span></a>
<ul>
<li><a href="#"><i class="fa fa-file-image-o"></i><span>menu2-1</span></a></li>
<li><a href="#"><i class="fa fa-file-video-o"></i><span>menu2-2</span></a></li>
<li><a href="#"><i class="fa fa-file-audio-o"></i><span>menu2-3</span></a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-comment"></i><span>Menu3</span></a>
<ul>
<li><a href="#"><i class="fa fa-commenting"></i><span>menu3-1</span></a></li>
<li><a href="#"><i class="fa fa-comments"></i><span>menu3-2</span></a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-share-alt"></i><span>Menu4</span></a>
<ul>
<li><a href="#"><i class="fa fa-facebook"></i><span>menu4-1</span></a></li>
<li><a href="#"><i class="fa fa-twitter"></i><span>menu4-2</span></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i><span>menu4-3</span></a></li>
</ul>
</li>
</ul>
.cp_sidebarmenu {
font-size: 0;
position: absolute;
z-index: 10;
top: 0;
left: 0;
height: 100%;
padding: 0.4em 0;
text-align: center;
color: white;
background: #37474f;
}
.cp_sidebarmenu li {
line-height: 100%;
position: relative;
display: inline-block;
list-style: none;
-webkit-transform: translateZ(0);
transform: translateZ(0);
vertical-align: middle;
pointer-events: none;
}
.cp_sidebarmenu a {
font-size: 16px;
line-height: 100%;
position: relative;
display: block;
min-width: 5em;
margin-bottom: 0.4em;
padding: 0.4em;
-webkit-transition: background 0.3s;
transition: background 0.3s;
text-decoration: none;
pointer-events: auto;
color: #ffffff;
}
.cp_sidebarmenu a:active,
.cp_sidebarmenu a:focus {
background: #0097a7;
}
.cp_sidebarmenu i {
font-size: 2em;
display: block;
margin-bottom: 0.2em;
}
.cp_sidebarmenu span {
font-size: 0.625em;
}
.cp_sidebarmenu li:hover ul {
-webkit-transform: translateX(0);
transform: translateX(0);
background: #0097a7;
}
.cp_sidebarmenu > li {
display: block;
}
.cp_sidebarmenu > li > a {
background: #37474f;
}
.cp_sidebarmenu > li:hover {
z-index: 100;
}
.cp_sidebarmenu > li:hover a {
background: #0097a7;
}
.cp_sidebarmenu > li a:hover {
background: #00acc1;
}
.cp_sidebarmenu > li:hover a:after {
opacity: 1;
}
.cp_sidebarmenu > li ul {
position: absolute;
z-index: -1;
top: 0;
left: 100%;
width: auto;
height: 100%;
-webkit-transition: 0.5s -webkit-transform;
transition: 0.5s -webkit-transform;
transition: 0.5s transform;
transition: 0.5s transform, 0.5s -webkit-transform;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
white-space: nowrap;
background: #0097a7;
padding: 0;
}