jQueryのhover()、show()、hide()を使って、簡単にプルダウンメニューを表示させる方法をご紹介します。
Contents
hover()、show()、hide()を使って、簡単にプルダウンメニューを表示するliタグのCSS記述
※デフォルトでは#idMenu li ulを非表示にします。その他必要に応じて変更して下さい。
<style type="text/css"> <!-- ul{ list-style:none; } #idMenu li { position: relative; float: left; margin: 0; padding: 5px; width: 150px; height: 20px; border: solid 1px #cccccc; line-height:1.4em } #idMenu li:hover { color: #ffffff; background-color:#CCCCCC; } #idMenu li ul { display: none; position: absolute; top: 30px; left: -1px; padding: 5px; width: 150px; background-color:#999999; border: solid 1px #cccccc; } #idMenu li ul li { margin: 0; padding: 0; width: 150px; border: none; } #idMenu li ul li a { display: inline-block; width: 150px; height: 20px; text-decoration:none; color:#FFFFFF; line-height:1.4em } #idMenu li ul li a:hover { background-color:#999999; color:#333333; text-decoration:underline; } --> </style>
hover()、show()、hide()を使ってプルダウンメニューを表示するJavaScript記述
※jquery.min.jsファイル(1.5系)を読み込みます。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
※#idMenu liをhoverするとulタグをshow()で表示し、マウスアウトでulタグをhide()で非表示にします。
<script type="text/javascript"> $(function() { $("#idMenu li").hover(function() { $(this).children('ul').show(); }, function() { $(this).children('ul').hide(); }); }); </script>
hover()、show()、hide()を使って、簡単にプルダウンメニューを表示するHTML記述
※プルダウン表示エリア(id=”idMenu”)を用意します。必要に応じて変更して下さい。
<div id="idWrap"> <h1>下の「メニュー1」「メニュー2」をマウスオーバーすると、<br />プルダウンメニューが表示されます。</h1> <ul id="idMenu"> <li>メニュー1 <ul> <li><a href="#">プルダウン11</a></li> <li><a href="#">プルダウン12</a></li> <li><a href="#">プルダウン13</a></li> </ul> </li> <li>メニュー2 <ul> <li><a href="#">プルダウン21</a></li> <li><a href="#">プルダウン22</a></li> <li><a href="#">プルダウン23</a></li> </ul> </li> </ul> </div><!--/idWrap-->
プルダウンメニューを簡単なjQueryで表示させるデモページ
プルダウンメニューを簡単なjQueryで表示させるデモページ
プルダウンのやり方って色々方法がありますが、簡単に済ませたい時はこれでやりがちです。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告