【jQuery】プラグインなしで縦型のドロップダウンメニューを作る(現在の位置のメニューを開けた状態にする)
公開日: : 最終更新日:2016/08/14 jQuery
『【jQuery】プラグインなしで縦型のドロップダウンメニューを作る』で作ったドロップダウンメニューの応用です。
違いは何かというと…
【特徴】
・子カテゴリーに進むと、そのカテゴリーを開いた状態から始まる。(他のメニューをクリックしたらもともと開いていたメニューは閉まり、クリックしたメニューが開く)
・今いるメニュー場所がハイライトされる。
・ハイライト時、子カテゴリーに孫カテゴリーがある場合、孫カテゴリーもハイライトされる。
※html5の記述式で書いています。
サンプル
※メニュー3 > 子メニュー2 のページにいる場合の状態。cssでの設定なので、ページごとにそれぞれ手動で設定してます(笑)
設置方法
1. jQueryを読み込む
HTMLファイルの<head>~</head>内に下記を記述します。
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <script> $(function(){ $('.sub_menu').hide(); $('.open').show(); $('.main_menu').click(function(){ $('ul.sub_menu').slideUp(); $('.main_menu').removeClass('open'); if($('+ul.sub_menu',this).css('display') == 'none'){ $('+ul.sub_menu',this).slideDown(); $(this).addClass('open'); } }); }); </script>
もしくは、<head>~</head>内に
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="js/custom.js"></script>
と記述し、外部の任意のjsファイルに、
$(function(){ $('.sub_menu').hide(); $('.open').show(); $('.main_menu').click(function(){ $('ul.sub_menu').slideUp(); $('.main_menu').removeClass('open'); if($('+ul.sub_menu',this).css('display') == 'none'){ $('+ul.sub_menu',this).slideDown(); $(this).addClass('open'); } }); });
を追記する。
2. HTMLファイルに書き込む
HTMLファイルのドロップダウンメニューを設置したい部分に書き込みます。
今いるページの<li>タグに 「class="this_page"」を書き込むと、ハイライトされます。
今いるページのカテゴリーの「<div class="main_menu">」と「 <ul class="sub_menu">」に class値「open」を追記します。
<ul class="sub_menu open">
<div id="category"> <ul id="menu"> <li><div class="main_menu">メニュー1</div> <ul class="sub_menu"> <li><a href="#">子メニュー1</a></li> <li><a href="#">子メニュー2</a></li> <li><a href="#">子メニュー3</a></li> </ul> </li> <li><div class="main_menu">メニュー2</div> <ul class="sub_menu"> <li><a href="#">子メニュー1</a></li> <li><a href="#">子メニュー2</a></li> <li><a href="#">子メニュー3</a></li> </ul> </li> <li><div class="main_menu open">メニュー3</div> <ul class="sub_menu open"> <li><a href="#">子メニュー1</a></li> <li class="this_page"><a href="#">子メニュー2</a></li> <li><a href="#">子メニュー3</a> <ul class="third_menu"> <li><a href="#">孫メニュー1</a></li> <li><a href="#">孫メニュー2</a></li> <li><a href="#">孫メニュー3</a></li> </ul> </li> </ul> </li> <li><a href="#"><div class="main_menu">メニュー4</div></a></li> </ul> </div>
3. cssファイルに書き込む
cssファイルに記述します。
ul, li{ margin: 0px; padding: 0px; list-style-type: none; } #category { background-color: #f2f2f2; box-shadow: 0px 0px 10px #ccc; border: 1px solid #bbb; padding-bottom: 10px; font-size: 15px; color: #666; font-weight: bold; padding-top: 10px; width: 300px; } #category a { text-decoration: none; color: #666; } #category a:hover { color: #ffffff; } #menu { border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #CCC; } .main_menu{ padding-top: 15px; padding-bottom: 15px; background-color: #f2f2f2; font-weight: bold; padding-left: 20px; text-indent: 10; display: block; position: relative; border-top-width: 1px; border-top-style: dashed; border-top-color: #CCC; width: 280px; } .main_menu::before { content: ''; width: 8px; height: 8px; border: 0px; border-top: solid 2px #357097; border-right: solid 2px #357097; -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); position: absolute; top: 50%; right: 20px; margin-top: -6px; } #menu .open::before { -ms-transform: rotate(315deg); -webkit-transform: rotate(315deg); transform: rotate(315deg); margin-top: -3px; } #menu .main_menu:hover ,#menu .open { background-color: #357097; color: #FFF; } #menu .main_menu:hover::before ,#menu .open::before{ border-top: solid 2px #ffffff; border-right: solid 2px #ffffff; } .sub_menu li a{ padding-top: 10px; padding-bottom: 10px; text-indent: 40px; background-color: #ccdfeb; display: block; position: relative; border-top-width: 1px; border-top-style: dashed; border-top-color: #CCC; } .sub_menu li a:hover{ background-color: #7094ac; } li .this_page a { background-color: #aac9de; } .sub_menu li a::before{ content: ''; width: 0; height: 0; border: solid 4px transparent; border-left: solid 6px #357097; position: absolute; top: 50%; left: 0; margin-top: -4px; margin-left: 25px; } .sub_menu li a:hover::before { border-left: solid 6px #ffffff; } .third_menu li a{ padding-left: 40px; border-top-style: none; padding-bottom: 6px; padding-top: 6px; } .third_menu li a::before{ margin-left: 65px; }
関連記事
-
【jQuery】プラグインなしでコンテンツを切り替えるタブメニューを作る
並んだタブをクリックすると、そのすぐ下のボックス内のコンテンツが切り替わります。タブはスマートフ...
-
【jQuery】プラグインなしで縦型のドロップダウンメニューを作る
jQueryのプラグインを使わない縦型のドロップダウンメニューの作り方です。CSSを変更すれば、...
-
【jQuery】サムネイルをクリックするとメイン画像が切り替わる
サムネイルをクリックすると、上の大きい画像がサムネイルの画像と切り替わるようにします。 サンプル ...
-
【jQueryプラグイン】FractionSlider:スライダー内の画像やテキストなどの要素に、さまざまな動きをつける
FractionSlider FractionSlider デモ j...
-
【jQuery】開閉するボックスを作る
ボタンをクリックすると、隠されたボックスの表示/非表示を切り替えます。CSSプロパティを操作する...