【jQuery】マウスオーバーで開くサイドメニュー

Image

マウスオーバーでスライドするサイドメニューをご紹介します。

以下デモです。画面の左側に表示されているバーにマウスのカーソルを載せると、メニューがスライドして表示されます。

Demo

jQueryを読み込む

GoogleのCDNを利用してjQueryを読み込みます。

CDNというのはContents Delivery Network(コンテンツ・デリバリー・ネットワーク)の略称で、ネットワークを経由してウェブコンテンツを利用するサービスを指します。ネットワークに接続されている機器であれば利用することができます。

CDNには有料、無料のものがありますが、jQueryのライブラリファイルは無料で利用できます。

jQueryのライブラリは以下の記述で読み込むことができます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

サイドメニュー

メニューを記述します。メニューのコンテンツが増えたときにスクロールが必要になるため、インナーを設けています。mainタグはデモ用の記述になります。

HTML

<div class="side-menu">
  <div class="side-menu-inner">
    <ul>
      <li><a href="#">Item 01</a></li>
      <li><a href="#">Item 02</a></li>
      <li><a href="#">Item 03</a></li>
      <li><a href="#">Item 04</a></li>
      <li><a href="#">Item 05</a></li>
      <li><a href="#">Item 06</a></li>
      <li><a href="#">Item 07</a></li>
      <li><a href="#">Item 08</a></li>
      <li><a href="#">Item 09</a></li>
      <li><a href="#">Item 10</a></li>
      <li><a href="#">Item 11</a></li>
      <li><a href="#">Item 12</a></li>
      <li><a href="#">Item 13</a></li>
      <li><a href="#">Item 14</a></li>
      <li><a href="#">Item 15</a></li>
    </ul>
  </div>
</div>
<main>
  <h1>Contents</h1>
  <p>左のバーにカーソルを載せるとメニューが開く</p>
</main>

CSS

以下、CSSです。

position: fixedを使用してサイドメニューを固定し、leftにマイナスの値を指定することでサイドメニューが隠れた状態にしています。また、右側にpaddingを持たせて画面上にバーの一部を表示するようにしています。

body {
  margin: 0;
  padding: 0;
  color: #333;
}
main {
  height: 2000px;
  padding: 0 0 0 75px;
}
a {
  color: #333;
}
li {
  width: 100%;
  height: 75px;
  line-height: 75px;
  font-size: 18px;
  list-style-type: none;
}
.side-menu {
  position: fixed;
  top: 0;
  left: -300px;
  width: 300px;
  height: 100%;
  padding: 0 50px 0 0;
  background: rgba( 195, 165, 115, 0.8);
}
.side-menu-inner {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

JS

以下、スクリプトです。

animateでpadding-leftをコントロールしてサイドメニューの開閉を実装しています。stopは開閉途中にマウスオーバーしたときの対策です。stopなしの場合、マウスオーバーした分だけ遅れてメニューが開閉してしまうので注意しましょう。

stopの詳細は以下のリンク参照。

stop

$(function() {
   $('.side-menu').hover(
    function(){
      $(this).stop(true).animate({'padding-left':'300px' }, 500);
    },
    function () {
      $(this).animate({'padding-left':'0px'}, 500);
    }
  );
});

Copy & Paste

以下、コピペ用です。自由に変更して活用してください。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
   $('.side-menu').hover(
    function(){
      $(this).stop(true).animate({'padding-left':'300px' }, 500);
    },
    function () {
      $(this).animate({'padding-left':'0px'}, 500);
    }
  );
});
</script>
<style>
body {
  margin: 0;
  padding: 0;
  color: #333;
}
main {
  height: 2000px;
  padding: 0 0 0 75px;
}
a {
  color: #333;
}
li {
  width: 100%;
  height: 75px;
  line-height: 75px;
  font-size: 18px;
  list-style-type: none;
}
.side-menu {
  position: fixed;
  top: 0;
  left: -300px;
  width: 300px;
  height: 100%;
  padding: 0 50px 0 0;
  background: rgba( 195, 165, 115, 0.8);
}
.side-menu-inner {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
</style>
</head>
<body>
  <div class="side-menu">
    <div class="side-menu-inner">
      <ul>
        <li><a href="#">Item 01</a></li>
        <li><a href="#">Item 02</a></li>
        <li><a href="#">Item 03</a></li>
        <li><a href="#">Item 04</a></li>
        <li><a href="#">Item 05</a></li>
        <li><a href="#">Item 06</a></li>
        <li><a href="#">Item 07</a></li>
        <li><a href="#">Item 08</a></li>
        <li><a href="#">Item 09</a></li>
        <li><a href="#">Item 10</a></li>
        <li><a href="#">Item 11</a></li>
        <li><a href="#">Item 12</a></li>
        <li><a href="#">Item 13</a></li>
        <li><a href="#">Item 14</a></li>
        <li><a href="#">Item 15</a></li>
      </ul>
    </div>
  </div>
  <main>
    <h1>Contents</h1>
    <p>左のバーにカーソルを載せるとメニューが開く</p>
  </main>
</body>
</html>