[パーツ]スライドメニュー 親メニューのホバーで子メニューをスライドで表示する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 
ニャン易度 
<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;
}

copypet.jp

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

More Info

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