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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Bootstrap

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

HTML

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

Q&A

2回答

6029閲覧

bootstrapのnavbarでハンバーガーメニューが表示されない

jam_diary_

総合スコア7

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Bootstrap

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

HTML

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

0グッド

0クリップ

投稿2016/12/15 18:47

bootstrapにて

navbarで、

html

1<nav class="navbar navbar-inverse navbar-fixed-top"> 2 <div class="container"> 3 <div class="navbar-header"> 4 <button class="navbar-toggle" data-toggle="collapse" data-target=".target"> 5 <span class="icon-bar"></span> 6 <span class="icon-bar"></span> 7 <span class="icon-bar"></span> 8 </button> 9 <a class="navbar-brand" href=""><img src="title.png"></a> 10 </div> 11 12 <div class="collapse navbar-collapse target" style="float:right;"> 13 <ul class="nav navbar-nav"> 14 <li class="active"><a href="">HOME</a></li> 15 <li><a href="URL">このサイトについて</a></li> 16 <li><a href="" style="color:#fff !important;">このサイトから<span style="color:#acc0ff;"><?=_t(@$tweet_count)?></span>しました!</a></li> 17 </ul> 18 </div> 19 </div> 20 </nav>

と、表記しているのですが、スマホ表示の際に右上にハンバーガーメニューが表示されません。
改善点を教授して頂けると幸いです。
よろしくお願いします。

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

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

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

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

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

guest

回答2

0

ハンバーガーメニューは動くので、viewport を指定していないとかではないでしょうか。

動くサンプル:https://jsfiddle.net/xs11joyx/

HTML

1<meta name="viewport" content="width=device-width, initial-scale=1">

投稿2016/12/15 19:39

kei344

総合スコア69364

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

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

jam_diary_

2016/12/16 12:19

確認しますと、指定していました。
guest

0

kei344さんのおっっしゃる通り、張り付いているソースでは稼働しますね。
ちなみに、下記のサンプルコードでwidndowsのノートPC上確認するとviewport指定しなくてもハンバーガーメニューが動きました。
もしかしたら、jqueryが読込めていない、とかその類の理由もあるかもしれません。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<meta http-equiv="X-UA-Compatible" content="IE=edge"> 6<meta name="viewport" content="width=device-width, initial-scale=1"> 7<meta name="description" content=""> 8<meta name="author" content=""> 9<title>タイトル</title> 10<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 11</head> 12<body> 13 <nav class="navbar navbar-inverse navbar-fixed-top"> 14 <div class="container"> 15 <div class="navbar-header"> 16 <button class="navbar-toggle" data-toggle="collapse" data-target=".target"> 17 <span class="icon-bar"></span> 18 <span class="icon-bar"></span> 19 <span class="icon-bar"></span> 20 </button> 21 <a class="navbar-brand" href=""><img src="title.png"></a> 22 </div> 23 <div class="collapse navbar-collapse target" style="float:right;"> 24 <ul class="nav navbar-nav"> 25 <li class="active"><a href="">HOME</a></li> 26 <li><a href="URL">このサイトについて</a></li> 27 <li><a href="" style="color:#fff !important;">このサイトから<span style="color:#acc0ff;"><?=_t(@$tweet_count)?></span>しました!</a></li> 28 </ul> 29 </div> 30 </div> 31 </nav> 32<div class="container"> 33Hello! 34</div> 35<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 36<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 37</body> 38</html>

投稿2016/12/16 00:46

編集2016/12/16 00:51
motuo

総合スコア3027

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

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

jam_diary_

2016/12/16 12:19

確認しますと、jquery埋め込んでいました。。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問