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

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』公開しました

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

このブログで紹介しているカスタマイズを、これでもかと盛り込んだ高性能なテーマになっております。商用・非商用問わず無料、是非ご利用ください。

ブログ集客メール講座登録フォーム

「売上が不安定で、月末になるといつも不安……」
「営業が苦手で新規開拓がうまくいかない……」
「Webが苦手でブログをうまく活用できない……」

個人起業家・フリーランスのあなた、こんなお悩みはありませんか?

実は僕も、独立して最初に直面したのが「集客」の壁でした。

しかし今は、1年の大半をベトナムで過ごしながら、フリーランスのWebディベロッパーとして生計を立てています。

僕がなぜ、時間・場所・人間関係に縛られずに暮らせるようになったのか?

その答えは「ブログ」にあります。

今なら、「初心者の人が成果を上げるため」のブログ集客ノウハウを、メール講座限定でお伝えします。

興味のある人は、今すぐ以下から登録【無料】を!

ブログ初心者が生き残るためのブログ集客メール講座

柴田竹思

柴田竹思

日本&ベトナム二拠点生活中のWeb系フリーランス。最近は育児6:仕事4のバランスで生活してます。これでもかってくらい奥さんの尻に敷かれてる座布団系男子です。

プロフィールはこちら