【jQuery】プラグインなしで縦型のドロップダウンメニューを作る(現在の位置のメニューを開けた状態にする)

公開日： 2016/08/05 : 最終更新日：2016/08/14 jQuery

dropdown_menu2

『【jQuery】プラグインなしで縦型のドロップダウンメニューを作る』で作ったドロップダウンメニューの応用です。

違いは何かというと…

【特徴】

・子カテゴリーに進むと、そのカテゴリーを開いた状態から始まる。(他のメニューをクリックしたらもともと開いていたメニューは閉まり、クリックしたメニューが開く)

・今いるメニュー場所がハイライトされる。

・ハイライト時、子カテゴリーに孫カテゴリーがある場合、孫カテゴリーもハイライトされる。

※html5の記述式で書いています。

サンプル

See the Pen WxPjJz by kajico (@kajilabo) on CodePen.

※メニュー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;
}