Q&A
CakePHPにTwitterBootstrapプラグインを導入し、
リファレンスサイトやフリーテンプレートを参考に以下のレイアウトを作成してみましたが、
サイドバーのcollapse（MENU5～8）が閉じず、困っています。
私のコードの書き方が問題なのか、bootstrap.jsが問題なのかが分からなかったので
こちらに投稿させて頂きました。
bootstrap.jsは最新のものを使用しています。
もしコードにおかしな部分がありましたら、どう直せば良いのかをお教え頂けますでしょうか。
以下、コードです。
lang
1<?php echo $this->BootstrapHtml->doctype('html5'); ?> 2<html lang='ja'> 3<head> 4 <title>Sample</title> 5 <?php 6 echo $this->BootstrapHtml->charset('utf-8'); 7 echo $this->BootstrapHtml->meta(array('http-equiv' => 'X-UA-Compatible', 'content' => 'IE=edge')); 8 echo $this->BootstrapHtml->meta(array('name' => 'viewport', 'content' => 'width=device-width, initial-scale=1')); 9 echo $this->BootstrapHtml->meta(array('name' => 'author', 'content' => '')); 10 echo $this->BootstrapHtml->meta(array('name' => 'copyright', 'content' => '')); 11 ?> 12 <?php echo $this->BootstrapHtml->css(array('bootstrap', 'default')); ?> 13 <style></style> 14 <?php echo $this->BootstrapHtml->css('font-awesome'); ?> 15 <!--[if lt IE 9]> 16 <?php echo $this->BootstrapHtml->script(array('https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js', 'https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js' )); ?> 17 <![endif]--> 18 <?php echo $this->BootstrapHtml->script(array('jquery-1.11.1.min', 'bootstrap')); ?> 19 <script> 20 //<![CDATA[ 21 //]]> 22 </script> 23</head> 24<body> 25 <div id="wrapper"> 26 <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 27 <div class="navbar-header"> 28 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 29 <span class="sr-only">Toggle navigation</span> 30 <span class="icon-bar"></span> 31 <span class="icon-bar"></span> 32 <span class="icon-bar"></span> 33 </button> 34 <a class="navbar-brand" href="#"><?php echo $this->BootstrapHtml->image('logo.png', array('alt' => 'logo')); ?></a> 35 </div> 36 <div class="collapse navbar-collapse navbar-ex1-collapse"> 37 <ul class="nav navbar-nav side-nav"> 38 <li><a href="#"><i class="fa fa-fw fa-tasks"></i> MENU1</a></li> 39 <li><a href="#"><i class="fa fa-fw fa-tasks"></i> MENU2</a></li> 40 <li><a href="#"><i class="fa fa-fw fa-tasks"></i> MENU3</a></li> 41 <li><a href="#"><i class="fa fa-fw fa-tasks"></i> MENU4</a></li> 42 <li> 43 <a href="javascript:;" data-toggle="collapse" data-target="#menu5"><i class="fa fa-fw fa-tasks"></i> MENU5 <i class="fa fa-fw fa-caret-down"></i></a> 44 <ul id="menu5" class="collapse"> 45 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 5-1</a></li> 46 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 5-2</a></li> 47 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 5-3</a></li> 48 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 5-4</a></li> 49 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 5-5</a></li> 50 </ul> 51 </li> 52 <li> 53 <a href="javascript:;" data-toggle="collapse" data-target="#menu6"><i class="fa fa-fw fa-tasks"></i> MENU6 <i class="fa fa-fw fa-caret-down"></i></a> 54 <ul id="menu6" class="collapse"> 55 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 6-1</a></li> 56 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 6-2</a></li> 57 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 6-3</a></li> 58 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 6-4</a></li> 59 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 6-5</a></li> 60 </ul> 61 </li> 62 <li> 63 <a href="javascript:;" data-toggle="collapse" data-target="#menu7"><i class="fa fa-fw fa-tasks"></i> MENU7 <i class="fa fa-fw fa-caret-down"></i></a> 64 <ul id="menu7" class="collapse"> 65 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 7-1</a></li> 66 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 7-2</a></li> 67 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 7-3</a></li> 68 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 7-4</a></li> 69 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 7-5</a></li> 70 </ul> 71 </li> 72 <li> 73 <a href="javascript:;" data-toggle="collapse" data-target="#menu8"><i class="fa fa-fw fa-tasks"></i> MENU8 <i class="fa fa-fw fa-caret-down"></i></a> 74 <ul id="menu8" class="collapse"> 75 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 8-1</a></li> 76 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 8-2</a></li> 77 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 8-3</a></li> 78 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 8-4</a></li> 79 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 8-5</a></li> 80 </ul> 81 </li> 82 </ul> 83 </div> 84 </nav> 85 <div id="page-wrapper"> 86 <?php echo $content_for_layout; ?> 87 </div> 88 </div> 89</body> 90</html>
よろしくお願い致します。
回答1件
0
ベストアンサー
こちらの環境で「php echo」を削除して、 bootstrap3.2で試したところ動きます。
またnavbar の場合は メニュー部分はdropdownにするのが一般的かと思いメニューを１つ追加しています
追記です
ソースコードには「navbarで使っているcollapse」と「メニューで使っているcollapse」が出てきますが、用途が違うので注意が必要です。
navbarのcollapseはレスポンシブデザイン対応のためのもので、ブラウザの幅を狭くすると、メニューがハンバーガーアイコンになるものです。
一方、メニューで使っているcollapseは折り畳み機能を提供する通常のJavascriptコンポーネントです。
lang
1<html lang='ja'> 2<head> 3 <title>Sample</title> 4<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> 5<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 6<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 7<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 8 <style></style> 9 <script> 10 //<![CDATA[ 11 //]]> 12 </script> 13</head> 14<body> 15 <div id="wrapper"> 16 <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 17 <div class="navbar-header"> 18 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 19 <span class="sr-only">Toggle navigation</span> 20 <span class="icon-bar"></span> 21 <span class="icon-bar"></span> 22 <span class="icon-bar"></span> 23 </button> 24 <a class="navbar-brand" href="#"></a> 25 </div> 26 <div class="collapse navbar-collapse navbar-ex1-collapse"> 27 <ul class="nav navbar-nav side-nav"> 28 <li><a href="#"><i class="fa fa-fw fa-tasks"></i> MENU1</a></li> 29 <li><a href="#"><i class="fa fa-fw fa-tasks"></i> MENU2</a></li> 30 <li><a href="#"><i class="fa fa-fw fa-tasks"></i> MENU3</a></li> 31 <li><a href="#"><i class="fa fa-fw fa-tasks"></i> MENU4</a></li> 32 <li> 33 <a href="javascript:;" data-toggle="collapse" data-target="#menu5"><i class="fa fa-fw fa-tasks"></i> MENU5 <i class="fa fa-fw fa-caret-down"></i></a> 34 <ul id="menu5" class="collapse"> 35 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 5-1</a></li> 36 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 5-2</a></li> 37 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 5-3</a></li> 38 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 5-4</a></li> 39 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 5-5</a></li> 40 </ul> 41 </li> 42 <li> 43 <a href="javascript:;" data-toggle="collapse" data-target="#menu6"><i class="fa fa-fw fa-tasks"></i> MENU6 <i class="fa fa-fw fa-caret-down"></i></a> 44 <ul id="menu6" class="collapse"> 45 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 6-1</a></li> 46 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 6-2</a></li> 47 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 6-3</a></li> 48 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 6-4</a></li> 49 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 6-5</a></li> 50 </ul> 51 </li> 52 <li> 53 <a href="javascript:;" data-toggle="collapse" data-target="#menu7"><i class="fa fa-fw fa-tasks"></i> MENU7 <i class="fa fa-fw fa-caret-down"></i></a> 54 <ul id="menu7" class="collapse"> 55 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 7-1</a></li> 56 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 7-2</a></li> 57 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 7-3</a></li> 58 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 7-4</a></li> 59 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 7-5</a></li> 60 </ul> 61 </li> 62 <li> 63 <a href="javascript:;" data-toggle="collapse" data-target="#menu8"><i class="fa fa-fw fa-tasks"></i> MENU8 <i class="fa fa-fw fa-caret-down"></i></a> 64 <ul id="menu8" class="collapse"> 65 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 8-1</a></li> 66 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 8-2</a></li> 67 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 8-3</a></li> 68 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 8-4</a></li> 69 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 8-5</a></li> 70 </ul> 71 </li> 72 73 <!-- 追加 --> 74 <li class="dropdown"> 75 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> 76 <ul class="dropdown-menu" role="menu"> 77 <li><a href="#">Action</a></li> 78 <li><a href="#">Another action</a></li> 79 <li><a href="#">Something else here</a></li> 80 <li class="divider"></li> 81 <li><a href="#">Separated link</a></li> 82 </ul> 83 </li> 84 <!-- 追加終わり --> 85 86 </ul> 87 88 </div> 89 </nav> 90 <div id="page-wrapper"> 91 92 </div> 93 </div> 94</body> 95</html>
投稿2014/09/25 17:07
総合スコア277
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2014/10/17 05:44