[パーツ]スライドメニュー アイコンのホバーでメニューがスライドで表示する2

CSS HTML
Update 2018.05.28

アイコンのホバーでメニューがスライドで表示する2

初期はメニューアイコンのみの表示でホバーすることでメニュー全体を左からスライド表示します。
こちらは少しメニュー名が遅れて表示されます。
さらにメニューホバー時はコンテンツ部分が少し透過します。

アイコンはfontawesomeを使用しています。

fontawesome.io

Font Awesome, the iconic font and CSS toolkit

Font Awesome, the iconic font and CSS framework……

fontawesome.com

ホームページを見る

browser:  65 11 20 10 
ニャン易度 
<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;
}

copypet.jp

CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか?