Q&A
「公式」とはなにでしょうか。
齟齬をなくすためにURLを呈示してください。
あと、bootstrapは確実に読み込まれていて使える状態なのでしょうか。
Laravelで制作しているWebにBootstrapのハンバーガーメニューを実装したいのですが、公式の通り書いても表示されず全く変化しません。
どうかご享受お願いします。
OS: Windows10
nav.blade.php
PHP
1<nav class="navbar navbar-expand-lg navbar-light amber lighten-5"> 2 3<!-- Hunberger --> 4 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu" 5 aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> 6 7 <div class="collapse navbar-collapse" id="menu"> 8 <ul class="navbar-nav ml-auto"> 9 10 @guest 11 <li class="nav-item"> 12 <a class="nav-link" href="{{ route('register') }}">新規登録</a> 13 </li> 14 15 @endguest 16 17 @guest 18 <li class="nav-item"> 19 <a class="nav-link" href="{{ route('login') }}">ログイン</a> 20 </li> 21 @endguest 22 23 @auth 24 <li class="nav-item"> 25 <a class="nav-link" href="{{ route('articles.create') }}"><i class="fas fa-pen mr-1"></i>投稿する</a> 26 </li> 27 28 @endauth 29 30 31 32 @auth 33 <!-- Dropdown --> 34 <li class="nav-item dropdown"> 35 <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" 36 aria-haspopup="true" aria-expanded="false"> 37 <i class="fas fa-user-circle"></i> 38 </a> 39 <div class="dropdown-menu dropdown-menu-right dropdown-success" aria-labelledby="navbarDropdownMenuLink"> 40 <button class="dropdown-item" type="button" 41 onclick="location.href='{{ route("users.show", ["name" => Auth::user()->name]) }}'"> 42 マイページ 43 </button> 44 <div class="dropdown-divider"></div> 45 <button form="logout-button" class="dropdown-item" type="submit"> 46 ログアウト 47 </button> 48 </div> 49 </li> 50 <form id="logout-button" method="POST" action="{{ route('logout') }}"> 51 @csrf 52 </form> 53 <!-- Dropdown --> 54 @endauth 55 56 </ul> 57 </div> 58 <!-- Hunberger --> 59</nav> 60
app.blade.php
php
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 6 <meta http-equiv="x-ua-compatible" content="ie=edge"> 7 <title> 8 @yield('title') 9 </title> 10 <!-- Font Awesome --> 11 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"> 12 <!-- Bootstrap core CSS --> 13 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> 14 <!-- Material Design Bootstrap --> 15 <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/css/mdb.min.css" rel="stylesheet"> 16</head> 17 18<body> 19 <div id="app"> 20 @yield('content') 21 </div> 22 23 24 <script src="{{ mix('js/app.js') }}"></script> 25<!-- JQuery --> 26<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 27<!-- Bootstrap tooltips --> 28<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script> 29<!-- Bootstrap core JavaScript --> 30<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> 31<!-- MDB core JavaScript --> 32<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/js/mdb.min.js"></script> 33 34 35</body>
早速の返信ありがとうございます。公式はMDBootstrap（https://mdbootstrap.com/docs/jquery/navigation/hamburger-menu/）でございます。
app.blade.php内でJQuery、Bootstrap tooltips等を読み込んでいます。
回答2件
0
上記コードを私の環境で確認したところ、
@auth~@endauth内を表示するとレイアウトがくずれました。
ウィンドウのサイズを半分にすると、ハンバーガーメニューは表示されませんが、ハンバーガーメニュー内のリンクは表示されます。
@auth~@endauth内で割り当てているclassを見直してはいかがでしょうか？
投稿2020/08/23 18:39
総合スコア211
0
ベストアンサー
上記のコードlaravelで動かしたところ、ボタンがうまく動かない動作が見られました。
PHP
1<!-- JQuery --> 2<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
上記のjqueryのコードを/bodyの一番下に移動させて下さい。
それで正常に動くと思います。
bootstarpが動いていて、うまく動作しない場合、scriptの順番を疑って見て下さい。ライブラリの読み込み優先順が間違えていることがあります。
今回、jqueryを消してもメニューは動いたので、どのscriptで動いてるか、scriptを消したり、つけたりして確認してみるといいと思います。
投稿2020/08/19 13:49
総合スコア10
回答ありがとうございます。上記のJQueryのコードをbodyの下に移動したらボタンが動かなくなってしまいました。scriptの読み込み順について吟味したいと思います。
あなたの回答
tips
プレビュー
