レスポンシブなサイトに！jQueryでオンマウスでもクリックでも開くボタン

そこで、jQueryを使ってオンマウスでもクリックでも開くボタンを作ってみます。PCの場合はオンマウスで、タッチデバイスの場合はクリックという感じです。レスポンシブウェブデザインに便利だと思います。

ボタン1つの場合

まずは、HTMLですが、特に問題はないと思います。aがボタン、divが現れる部分になります。

<div id="hover-click">
  <a href="#">マウスを乗せるかクリックすると</a>
  <div>このように現れます</div>
</div>

続いてCSSです。

#hover-click{
  position: relative;
  width: 100%;
  margin: 30px 0;
}
#hover-click > a{
  display: block;
  width: 100%;
  padding: 10px;
  background: #8bc34a;
  color: #fff;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
}
#hover-click > div{
  display: none;
  z-index: 9999;
  position: absolute;
  width: 100%;
  padding: 50px 0;
  background: #dcedc8;
  text-align: center;
}

PCのときはオンマウスで、タッチデバイスのときはクリックで、というのが今回の主旨ですので、レスポンシブに使えないと意味がありません。ということで、横幅はパーセントで指定しています。

最後にjQueryです。

$(function() {
  var contents = $("#hover-click > div");
  $("#hover-click > a").click(function(){
    $(contents).toggle();
    return false;
  });
  $("#hover-click")
  .mouseover(function(){
    $(contents).show();
  })
  .mouseout(function(){
    $(contents).hide();
  });
});

2行目で、#hover-click divをcontentという変数にします。

3～6行目でクリックで先ほどのcontentを開閉するようにします。3行目の「#hover-click > a」の「>」がないと、現れるdiv内にリンクがあった場合にそちらのリンクにも反応してしまいますので注意してください。

7～13行目でマウスを乗せて現れて、マウスを外すと消えるようにします。

ボタン2つの場合

続いて、ボタンが2つの場合を考えてみます。

まずはHTMLです。ボタンと現れるボックスごとにdivで囲んでいます。

<div id="hover-click2">
  <div>
    <a href="#">マウスを乗せるかクリックすると</a>
    <div>1</div>
  </div>
  <div>
    <a href="#">マウスを乗せるかクリックすると</a>
    <div>2</div>
  </div>
</div>

続いてCSS。

#hover-click2 {
  display: inline-block;
  position: relative;
  width: 100%;
  margin: 30px 0;
}
#hover-click2 > div {
  display: block;
  float: left;
  width: 48%;
}
#hover-click2 > div:first-child {
  margin-right: 4%;
} 
#hover-click2 > div > a {
  display: block;
  width: 100%;
  padding: 10px 0;
  background: #8bc34a;
  color: #fff;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
}
#hover-click2 > div > div {
  display: none;
  z-index: 9999;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 50px 0;
  background: #dcedc8;
  text-align: center;
}

こちらもレスポンシブにしています。ボタンの大きさは48％で、最初のボタンの右側に4%の間隔を空けることで合計100%にしています。

「#hover-click2 div div」はposition: absolute;を指定していて、その基準は「#hover-click2」となります。ですので、widthは親要素の「#hover-click2 > div」ではなく、「#hover-click2」が基準となります。

最後にjQueryです。

$(function() {
  $('#hover-click2 > div > a').click(function(){
     $("+ div",this).toggle();
     return false;
  });
  $("#hover-click2 > div")
  .mouseover(function(){
    $("> div",this).show();
  })
  .mouseout(function(){
    $("> div",this).hide();
  });
});

2～5行目でa要素をクリックすると、その隣のdivが開閉されるようにします。

6～12行目でマウスを乗せて現れて、マウスを外すと消えるようにします。

さいごに

さいごにちょっと余談。マウスを乗せたときの動きはCSSのhoverでもいいのでは、と思う人もいるかもしれません。

確かに、マウスを乗せたときの動きはCSSだけでおこなえます。しかし、クリックはjQueryでおこなう必要があります。

クリックはjQueryでおこなうと、クリックして閉じた場合、jQueryによって以下のようにインラインにCSSが追加されます。

<div style="display: none;">このように現れます</div>

こうなると、CSSのhoverで何をしようがインラインのdisplay: none;に勝てません。hoverをjQueryのmouseoutとmouseoverでおこなうと、当然インラインで書き換えられます。ですのでマウスを乗せたときの動きもjQueryで書き必要があります。

ということで、マウスを乗せてもクリックしても現れるボタンの作り方を解説しました。

結構使い勝手がよいので、様々な用途に使えると思います。これを作ってメガメニューを作ってもいいと思うので、また記事にできればと思います。