以前にCSSでドロップダウンメニューを作成しました。
CSSではマウスオーバーでしか動的なことは出来ないため、マウスオーバーで開閉するようなものでした。
あわせて読みたい
CSSの擬似クラス(hover)でメニューにドロップダウンを可能な限り簡単に追加する前回メニューを横並びにしましたが、そのメニューに子要素があった場合の話です。例えば「カテゴリー一覧」というメニューがあって、そこにマウスカーソルを当てると下...
今回はjQueryを使ってメニューをクリックするとドロップダウンメニューが開閉するように作ってみようと思います。
目次
クリックで開閉させるサンプルコード
HTML
<!doctype html>
<html lang="ja">
<head></head>
<body>
<div id="container">
<header></header>
<nav id="headernav">
<ul class="gmenu clearfix">
<li>
<a href="https://swell.dev-lib.work">メニューA</a>
<ul>
<li><a href="https://swell.dev-lib.work">メニューA-1</a></li>
<li><a href="https://swell.dev-lib.work">メニューA-2</a></li>
<li><a href="https://swell.dev-lib.work">メニューA-3</a></li>
<li><a href="https://swell.dev-lib.work">メニューA-4</a></li>
</ul>
</li>
<li>
<a href="https://swell.dev-lib.work">メニューB</a>
<ul>
<li><a href="https://swell.dev-lib.work">メニューB-1</a></li>
<li><a href="https://swell.dev-lib.work">メニューB-2</a></li>
<li><a href="https://swell.dev-lib.work">メニューB-3</a></li>
<li><a href="https://swell.dev-lib.work">メニューB-4</a></li>
</ul>
</li>
<li>
<a href="https://swell.dev-lib.work">メニューC</a>
<ul>
<li><a href="https://swell.dev-lib.work">メニューC-1</a></li>
<li><a href="https://swell.dev-lib.work">メニューC-2</a></li>
<li><a href="https://swell.dev-lib.work">メニューC-3</a></li>
<li><a href="https://swell.dev-lib.work">メニューC-4</a></li>
</ul>
</li>
<li>
<a href="https://swell.dev-lib.work">メニューD</a>
<ul>
<li><a href="https://swell.dev-lib.work">メニューD-1</a></li>
<li><a href="https://swell.dev-lib.work">メニューD-2</a></li>
<li><a href="https://swell.dev-lib.work">メニューD-3</a></li>
<li><a href="https://swell.dev-lib.work">メニューD-4</a></li>
</ul>
</li>
<li>
<a href="https://swell.dev-lib.work">メニューE</a>
<ul>
<li><a href="https://swell.dev-lib.work">メニューE-1</a></li>
<li><a href="https://swell.dev-lib.work">メニューE-2</a></li>
<li><a href="https://swell.dev-lib.work">メニューE-3</a></li>
<li><a href="https://swell.dev-lib.work">メニューE-4</a></li>
</ul>
</li>
</ul>
</nav>
<div id="content"></div><!-- /#content -->
<footer></footer>
</div><!-- /#container -->
</body>
</html>
上の画像の赤い部分のメニューから出てくるプルダウンのサブメニューをクリックで開閉できるようにします。
CSS
/* メニュー */
ul.gmenu {
margin: 0;
padding: 0;
background-color: #000000;
display: flex;
justify-content: center;
/* text-align: center; */
}
ul.gmenu > li {
display: inline-block;
padding: 5px;
font-weight: bold;
width: 15%;
text-align: center;
}
ul.gmenu > li a {
color: #ffffff;
display: block;
}
/* サブメニュー */
ul.gmenu ul {
display: none;
}
ul.gmenu > li ul {
height: auto;
position: absolute;
background-color: #000000;
padding: 5px;
margin-left: -5px;
}
ul.gmenu ul > li {
display: block;
padding: 5px;
}
ul.gmenu li:hover {
background-color: #666666;
}
メニュー部分のCSSです。
以前作成したもののメニュー部分だけを抜き出しました。
これに対しjQueryはこれだけです。
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js?ver=1.12.2'></script>
<script type="text/javascript">
$(function(){
$('#headernav ul > li').click(function() {
$(this).children('ul').slideToggle();
return false;
});
});
</script>
これで親メニューをクリックしたらサブメニューが開閉します。
ただ、これだけでは微妙です。
一度開いたサブメニューは親を再度クリックしないと消えないのです。
ロストフォーカスでサブメニューが閉じるようにしたいですよね？
ロストフォーカスで閉じるメニュー
$('#headernav ul > li').click(function() {
$(this).children('ul').slideToggle();
return false;
});
$('#headernav ul > li').hover(function() {}, function () {
$(this).children('ul').slideUp();
});
こんな感じかな？ってやってみたのですが・・・うまくいきません！
- クリックするとサブメニューが開く
- 再度クリックするか、親メニューもしくはサブメニューからロストフォーカスしたときに閉じる
これがうまく出来るように色々調べてたらきれいに僕の想像通りに作成している人を見つけました。
丸投げみたいで申し訳ないですが、そちらのサイトを見たほうが早いと思いますのでリンクを貼っておきます。
[btn class=”simple”]クリックで表示する吹き出し型ドロップダウンメニュー[/btn]
近いところまではいったんですかね。
$(btn).bind(“click”, “focus”, function(event){
bind() を使っていますね。
bind() は同じようなもので on() というのもあります。
こちらは、複数のイベントを追加したい場合に使います。
コメント