質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.09%

サイドバーメニューのカスタマイズについて(Bootstrap)

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,125

score 10

現在、Bootstrap 4でウェブサイトを制作している初心者です。

この度Side Navigation(sidebar) メニューに、Accordionを追加したいのですが、うまく動作しません。

参考サイト:
https://www.w3schools.com/howto/howto_js_sidenav.asp
https://www.w3schools.com/howto/howto_js_accordion.asp

結果:
イメージ説明

コード:
[html]
<body>
<div class="container-fluid">    
<nav class="navbar navbar-default fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img class="img-responsive" src="images/logo/logo.png" width="200" alt=""/></a>
</div>
<ul class="nav navbar-nav navbar-right">
<!-- Use any element to open the sidenav -->
<span style="font-size:25px; color: #FF6600; cursor:pointer" onclick="openNav()">Menu &nbsp; &#9776;</span></ul>

<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<button class="accordion">About</button>
<div class="panel"><a href="#">Organization</a></div>
<div class="panel"><a href="#">Artists</a></div>
<button class="accordion">Events</button>
<div class="panel"><a href="#">Upcoming</a></div>
<div class="panel"><a href="#">Past</a></div>
<button class="accordion">Classes</button>
<div class="panel"><a href="#">Class</a></div>
<a href="#">Contact</a>
</div>
</nav>
</div>
</body>

[css]
/* The side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: #FFF6F0; /* Light orange*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 21px;
color: #707070;
display: block;
transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: #FF6600;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */

main {

transition: margin-left .5s;
padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

.accordion {
color: #55555;
background-color: none;
cursor: pointer;
padding: 0px;
width: 100%;
font-size: 15px;
transition: 0.4s;
}

.active, .accordion:hover {
color: #FF6600;
}

.accordion:after {
content: '\002B';
color: #FF6600;
font-weight: bold;
float: right;
margin-left: 5px;
}

.active:after {
content: "\2212";
}

.panel {
padding: 0px;
background-color: none;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}

[javascript]
個々に分けて、bodyの最後に入れました。

<script src="/js/accordion.js"></script>    
<script src="/js/menu.js"></script>

[menu]
/* Set the width of the side navigation to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "350px";
}

/* Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
// JavaScript Document

[accordion]
// JavaScript Document
var acc = document.getElementsByClassName("accordionmenu");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";

});
}

Bootstrap のCSSかJavascriptが重複しているのでしょうか?

その場合、どのように設計するのがよいか教えていただけると幸いです。

よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • x_x

    2018/12/26 13:34

    HTMLにaccordionmenuがないし、「bodyの最後に」は<script>は入っていないってないですよね?
    再現するコードをお願いします

    キャンセル

  • hahp

    2018/12/26 21:16

    x_x さん、kei344さん
    ご返信ありがとうございます。
    Javascriptのaccordionmenuをaccordionに変更したところ、やっと作動しました。。
    投稿する前にIDを変えるなどして試行錯誤していたまま、戻し忘れていました。
    これまでなぜ作動しなかったのかは不明なのですが…。
    ご指摘ありがとうございました。次回投稿する際はコードの記述や問題点など記述します。

    キャンセル

  • kei344

    2018/12/26 21:30

    まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.09%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る