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

CSS HTML
 2018.05.28
 2018.07.05

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

初期はメニューアイコンのみの表示でホバーすることでメニュー全体を左からスライド表示します。

アイコンは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 
ニャン易度 
<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;
}

copypet.jp

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

More Info

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