画面横からスライドして表示されるナビゲーションメニューの作り方

2018.02.24 2018.03.26jQuery

画面の横にチラッと見えていて、マウスホバーすると横からスライドして表示されるナビゲーションメニューの作り方をご紹介します。

サブナビゲーション的な役割のメニューなどで、こういうUIたまに見ますよね。グローバルナビゲーションとは別に下層ページに個別のナビゲーションを設置したいときなどに使えるかと思います。

画面横からスライドして表示されるナビゲーションメニュー

■HTML

<ul id="slide_menu">
<li><a href="#">Menu01</a></li>
<li><a href="#">Menu02</a></li>
<li><a href="#">Menu03</a></li>
<li><a href="#">Menu04</a></li>
<li><a href="#">Menu05</a></li>
<li><a href="#">Menu06</a></li>
</ul>

HTMLはごくごくシンプルに、一般的なリストの形ですね。

■CSS

#slide_menu {
background: #fff;
padding: 30px 20px;
margin-top: -200px;
position: fixed;
top: 50%;
z-index: 10000;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
width: 250px;
box-sizing: border-box;
}
#slide_menu li a:link,
#slide_menu li a:visited {
color: #5d5d5d;
text-decoration: none;
}
#slide_menu li a:hover,
#slide_menu li a:active {
color: #EB714E;
text-decoration: underline;
}

コンテンツとの重なりを表現するため、ここではbox-shadowを指定しています。

また、位置の指定はpositionで行っています。そのため、#slide_menuの親要素にposition:relative;を忘れずに指定しておきましょう。他のコンテンツとの重なり具合を見つつ、適宜z-indexを指定しておくといいと思います。

■jQuery

$(function(){
$('#slide_menu').css({
right: '-200px',
});
$('#slide_menu')
.on('mouseover', function(){
$(this).stop(true).animate({
right: 0
}, 200, 'easeInOutCubic');
})
.on('mouseout', function(){
$(this).stop(true).animate({
right: '-200px'
}, 200, 'easeInOutCubic');
});
});

#slide_menuは、初期状態で右に200px隠し、50pxだけチラ見せしておきます。

そして、マウスホバーするとアニメーションでスライドさせ、マウスが外れると元の位置へという流れです。

WordPressテーマ『HIGHLAND』公開しました