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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

解決済

1回答

4505閲覧

ハンバーガーメニューがうまく開かない。

mokojun

総合スコア16

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

0クリップ

投稿2019/01/09 05:49

編集2019/01/09 06:10

ハンバーガーメニューがうまく開きません。
トップページはきちんと開き閉じするのですが、他サイトはハンバーガーメニューをクリックしても開きません。
トップページ、他サイトは読み込みコードを記述しているレイアウトファイルを継承しています。

読み込みコードは以下の通りです。

<head>   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery-3.3.1.slim.min.js"></script> </head> ※ダウンロードしたcssファイル、jsファイルはpublicフォルダに入れています。

また、

<script src="js/bootstrap.bundle.min.js"></script>

この読み込みコードを追記すると、他サイトではきちんと開き閉じできたのですが、トップページがクリック後開きっぱなしで戻らなくなりました。

追記:ビュー部分のコードです。

<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top"> <div class="container"> <div class="navbar-brand"> <!--検索フォーム--> <form action="{{ route('posts.search') }}" method="get"> <div class="input-group mb-1"> <input type="text" class="form-control input-lg" placeholder="検索キーワード" name="search" value=""> <div class="input-group-append"> <button class="btn btn-secondary" type="submit">検索</button> </div> </div> </form> </div> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-start" id="navbarNav" > @if (Auth::check()) <!--ユーザーアイコン--> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="/"><img class="icon" src="{{ asset('/img/main4.jpg') }}" alt="アイコン" style="margin:0 10px 0 0;" >{{ Auth::user()->name }}</a> </li> <!--区切り線--> <div class="sen"></div> </ul> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="/login">ホーム<span class="sr-only">(current)</span></a> </li> </ul> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="{{ route('posts.create') }}">作品投稿</a> </li> </ul> <ul class="navbar-nav"> <li class="nav-item" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();"> <a class="nav-link" href="/register">ログアウト</a> </li> </ul> <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"> @csrf </form> @else <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="/login">ログイン<span class="sr-only">(current)</span></a> </li> </ul> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="/register">会員登録</a> </li> </ul> @endif </div> </nav>

原因がわかりません...
回答よろしくお願いします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/01/09 05:55

app.cssとbootstrap.min.cssって競合してませんかね。 いずれにしてもhead記述だけでハンバーガーメニューができるわけではないのでビュー部分の記述も追加してください。
guest

回答1

0

自己解決

読み込みをCDSに変えたら問題なく動作しました。

投稿2019/01/09 09:34

mokojun

総合スコア16

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問