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

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