スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

クリックして内容が表示されるボタンと、マウスを乗せて内容が表示されるボタンがあるとします。私はクリックよりマウスを乗せる方が気軽におこなえると思います。クリックはひと手間多いですし、クリックして別のページに移動したら面倒だと思うと躊躇してしまいます。

ですので、自分でサイトを作る場合、できるだけマウスを乗せて開くようにしています。しかし、タッチデバイスの場合、マウスを乗せるという動作がないのでクリックで開くようにしないと仕方ありません。

hover-click-button.png

そこで、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で書き必要があります。

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

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

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。