今回はHTMLとCSSだけで簡単に実装できる、横からスライドするナビの作り方の紹介をします。
ちょっとしたエフェクトやアニメーションなら、javascriptを使わず、CSSを利用しての表現が可能です。
また、CSSは動作がスムーズで、Javascriptに比べると初心者にとってわかりやすいコード表記である点が良いところです。
それでは早速コードを見ていきましょう。
まずはHTMLで簡単なナビを作っていきます。
<body>
<ul class="menu">
<li class="menu-item1"><a href="#">Home</a></li>
<li class="menu-item2"><a href="#">Profile</a></li>
<li class="menu-item3"><a href="#">Work</a></li>
<li class="menu-item4"><a href="#">Access</a></li>
<li class="menu-item5"><a href="#">Contact</a></li>
</ul>
</body>
次に、CSSのコードです。
.menu{
list-style-type: none;
}
.menu li{
margin-bottom:15px;
}
.menu li a{
font-weight:bold;
display:block;
margin-left: -200px;
width: 300px;
padding: 8px 25px 8px 0px;
color: #fff;
text-align: right;
border-radius: 0 40px 40px 0;
transition:all 0.5s ease;
text-decoration: none;
}
.menu-item1 a{background-color:#87ceeb;}
.menu-item2 a{background-color:#b686eb;}
.menu-item3 a{background-color:#eb86a6;}
.menu-item4 a{background-color:#ebdf86;}
.menu-item5 a{background-color:#86eb8e;}
.menu li a:hover{
margin-left: -100px;
}
これで完成です。マウスをホバーするとメニューのリストがにょきっと飛び出してきますね。
仕組みを説明すると、これは予めmargin-left:-200で要素をブラウザの左に隠しており、マウスホバーした時にmargin-left:-100の位置に要素が移動するようになっています。
※ホバーの際のmargin-leftの値を大きくしすぎると、メニューのリストのwidthが足りなくなってしまうので注意が必要です。
以上がCSSのみを使ってのスライドするナビの作り方になります。
