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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

665閲覧

Bootstrapのハンバーガーメニューを開いた際、リストの表示ができない

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2018/01/15 02:13

よろしくお願いします!
Bootstrapでハンバーガーメニューを設定しました。

HTML側にはこうしたコードを記述しています。

<header> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><h1>Bootstrap</h1></a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">Top</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Contacts</a></li> </ul> </div> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </header>

そうしたところ、ハンバーガーメニューはうまく表示されているのですが、
ボタンを押してもli要素が表示されず、メニューが開けないような状況です。

イメージ説明

この画像をみる限り、::afterの後に<li>要素が入っておらず空っぽになっているためではないかと思うのですが、
この状態はどのように解決すれば良いでしょうか?
よろしくお願いします。

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

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

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

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

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

m.ts10806

2018/01/15 02:37

Bootstrapのバージョンも環境情報として追記してください。ハンバーガーメニューを作るにあたり参考にした記事などもあればあわせてお願いします。
m.ts10806

2018/01/15 03:56

環境情報などは質問本文を編集して追記してください。ここのコメントだと埋もれやすいです。
m.ts10806

2018/01/15 04:00

ブラウザの開発ツールのコンソールに「Uncaught Error: Bootstrap's JavaScript requires jQuery」というエラーが出てたりしませんか?他にもエラーがでているようでしたら教えてください。
退会済みユーザー

退会済みユーザー

2018/01/15 04:43

失礼いたしました…consoleには、エラーなどは一切出ていない状況です。
guest

回答2

0

CDNにて提示のbootstrapを導入し(http://getbootstrap.com/docs/3.3/getting-started/#download-cdn
ご提示のHTMLソースそのまま利用しましたが、動作確認できました。
ハンバーガーメニューのデザイン・見た目自体はCSSで制御されていますが、ドロップダウンの動作はjavascriptで制御されています。
bootstrapではjQueryが必須となっているので、bootstrapの本体jsの読み込み前に、jqueryの読み込みをさせるようにしてください。(参考:https://webkaru.net/jquery/file-load/

::afterの後に<li>要素が入っておらず空っぽになっているためではないかと思うのですが、

bootstrapのドロップダウンメニューでは初期状態「navbar-collapse」部分を非表示にしておき、クリック時に表示に切り替えつつアニメーションさせているだけのはずなので、after云々は関係ありません。
開発ツールで出ているbefore,afterはcssの擬似要素のことであり(参考:https://qiita.com/aquamikan/items/cfa53c3b5d6ae1502180)、ul liの擬似要素afterのあとにli要素が入ることはありえません。

投稿2018/01/15 04:12

編集2018/01/15 04:13
m.ts10806

総合スコア80765

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

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

0

ベストアンサー

自分で書いたCSSと干渉していたようで、全て見直すことで改善できました!
ありがとうございました!

投稿2018/01/22 07:43

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問