• このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

Bootstrap4でドロップダウンメニューの中にアコーディオンを作る!

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

こんにちは、プロクラスの渡辺です!
今日は備忘録も兼ねて、Bootstrap4を使って、ドロップダウンメニューを作った時に調べまくってたどり着いた方法をご紹介しようと思います 😉
難しいことは分からないからとりあえずコピペさせてほしい!っていう方もいらっしゃると思うので、コードも載せておきます。
ただ、私も難しいことは分からないので大したことは説明していません!!

さて、みんな大好き(なのかはわからないのですが)Bootstrapとここ最近やっとお近づきになれたので、意気揚々と使っていたのです!
Bootstrap4以降ガイド」さんを見ながらやるとそれなりにちゃんとしたものができるのですが、今回はとある問題にぶち当たりました 😥 

メニューボタンです!!!

スマホは対応しなくていいということだったので、メニューをずらずらと並べるのではなく「ドロップダウン」を使用したメニューを作ることになりました。ですが、メニューが入れ子になっているので、なんとかせねばなりません。
入れ子になっているだけなら、先駆者の方々がすでにブログなりをアップしてくださっているのですが、今回はそこに+αがあります。

「階層のメニューは折り畳みになっている」

これです。ものすごく大変でしたが何とか力技で実現できたのでご紹介します。スマホ時の事は今回は記憶から消し去ることにしました!

実現したいこと

  1. メニューボタンを押したらドロップダウンメニューが出てくる
  2. 一部だけ折り畳みメニューになっていて、入れ子になっている
  3. 折り畳みメニューによくある、ぬるっと動くアレがしたい

この3つを頑張って作ろうと思います!

1.メニューボタンを押したらドロップダウンメニューが出てくる

これは特に説明するほどでもないと思うのですが、普通ですね!
「コンポーネント」の「ドロップダウン」でドロップダウンメニューが作れます!
移行ガイドさんのドロップダウンのページ

こんな感じですね 😀  

2.一部だけ折り畳みメニューになっていて、入れ子になっている

これは単純に考えた結果、「ドロップダウン」の中に「折り畳み(アコーディオン)」を入れたらいいのでは!?
っていうことなので実際のコードはこちらです!▼


<div class="dropdown float-right">
  <button class="btn btn-secondary dropdown-toggle btn-nav" type="button">
	メニュー
  </button>
	 
<div class="test-nav dropdown-menu dm-nav">
<ul id="accordion_menu">
		  
	<li>
<a data-toggle="collapse" href="#menu01" aria-controls="#menu01" aria-expanded="false">予約登録</a>
		  </li>

		  
	<li>
<a data-toggle="collapse" href="#menu02" aria-controls="#menu02" aria-expanded="false">メール作成</a>
		  </li>

		  
	<li>
<a data-toggle="collapse" href="#menu03" aria-controls="#menu03" aria-expanded="false">予約関係<i class="fas fa-caret-down"></i></a>
		  </li>

		  
<ul id="menu03" class="collapse" data-parent="#accordion_menu">
	<li><a href="#">予約一覧</a></li>
	<li><a href="#">予約履歴一覧</a></li>
	<li><a href="#">キャンセル履歴</a></li>

		  </ul>

		  
	<li class="last">
<a data-toggle="collapse" href="#menu04" aria-controls="#menu04" aria-expanded="false">各種マスタ<i class="fas fa-caret-down"></i></a>
		  </li>

		  
<ul id="menu04" class="collapse" data-parent="#accordion_menu">
	<li class="ml-2"><a href="#">予約情報表示設定</a></li>
	<li class="ml-2"><a href="#">営業日設定</a></li>
	<li class="ml-2"><a href="#">講師設定</a></li>

		  </ul>
</ul>
</div>
</div>

今回作成したメニューは、右側にあって、ドロップダウンメニューは右揃えで出てきてほしかったのでcssをいじっています。あとは見た目をちょちょっと整えているので、cssも載せておきます▼

.click-show {
  display: block !important;
}
.dropdown-menu {
	left: -100%;
	width: 200%;
}
.dropdown-menu #accordion_menu {
    margin: 0;
    list-style: none;
    padding: 0 10px;
}
.dropdown-menu #accordion_menu ul {
    list-style: none;
    padding: 0px 5px;
}
.dropdown-menu #accordion_menu li {
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
	position: relative;
}
.dropdown-menu #accordion_menu li .fas {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 5%;
}
.dropdown-menu #accordion_menu li.last {
	border-bottom: none;
}
.dropdown-menu #accordion_menu li a {
    color: #000;
	display: block;
}
.dropdown-menu #accordion_menu li a:hover {
	text-decoration: none;
	opacity: 0.8;
}

こんな感じになりました! 😉 

これで完成~~!

とはならないもので… 😥 
ドロップダウンのクリックイベント名と、アコーディオンのクリックイベント名が同じなので、挙動がとってもおかしなことになってしまいました!!!
例えば、メニューを押して、「予約関係」をクリックしてから、メニューで閉じようとしても閉じれなくなっています

なので、ちょっとJSを追加しようと思います!

3.折り畳みメニューによくある、ぬるっと動くアレがしたい

やりたいことはこれです⇒「予約関係をクリックしたときに【click-show】というクラスを【dm-nav】に追加、削除する」

2で記載しているhtmlの中に「<div class=”test-nav dropdown-menu dm-nav”>」というタグがあると思いますが、この「dm-nav」がクリックされた時~ってことですね!
JSも記載しておきます▼

//メニューを押したときアコーディオンを開く
$(function(){
  var flg = "off";
  $('.dropdown-toggle').on('click', function(){
    if(flg == "off"){
      $('.dm-nav').addClass('click-show');
      flg = "on";
    }else{
      $('.dm-nav').removeClass('click-show');
      flg = "off";
    }
  });
});

これで!本当に!!完成しました~~!!!
でも本当に動くかはわからないのでテストページなどで試してみてください。。
コードを全部まるっとコピーしたら動くとは思います!!

おわり

難しいことはわからない!だけど何とかしたい!!その気持ちだけで作ったのでいろいろおかしいところはあると思いますが、まあ…なんとか動いたので。。
備忘録もかねてブログにしました 😳

いきなりこんな難しいところじゃなくて、もっと基本を知りたい!という方には、プロクラスが毎月おこなっている「はじめてのWebサイト制作入門(HTML編)」「はじめてのWebサイト制作入門(CSS編)」がおすすめです!

独学で勉強するのには時間が足りないけど、でも勉強したい!という方にもとってもおススメしています~!
ぜひサイトもご覧ください!

★はじめてのWebサイト制作入門(HTML編)★
https://proclass.jp/class/detail0201/

★はじめてのWebサイト制作入門(CSS編)★
https://proclass.jp/class/detail0202/

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
各地で開催中!

【簡単ホームページ制作!はじめてのWordPress講座】
受講者満足度95%以上の人気講座!

WordPress東京
【簡単ホームページ制作!はじめてのWordPress】講座詳細はこちら