bootstrapでnavbar作成し、スマホで表示する際、ハンバーガーアイコンになるようにしています。
デスクトップで表示してある項目をハンバーガーメニューの中では非表示にしたり、
追加の項目を表示したりしたいのです。
例えば、以下のようにするにはどうすれば、いいか教えてください。
パソコン表示時
メニュー 編集 表示 設定 ヘルプ 問い合わせ
スマホ表示時
ーーーーー
メニュー
ーーーーー
編集
ーーーーー
設定
ーーーーー
ヘルプ
ーーーーー
✴︎電話する✴︎
ーーーーー
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
ベストアンサー
bootstrapであれば、visible-**
もしくはhidden-**
で実現すると良いと思います。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 7 <style type="text/css"> 8 .navbar .navbar-toggle.collapsed .icon-bar:nth-of-type(1) { 9 transform: rotate(0deg); 10 top: 0; 11 } 12 13 .navbar .navbar-toggle.collapsed .icon-bar:nth-of-type(2) { 14 opacity: 1; 15 width: 100%; 16 margin-left: 0; 17 } 18 19 .navbar .navbar-toggle.collapsed .icon-bar:nth-of-type(3) { 20 transform: rotate(0deg); 21 bottom: 0; 22 } 23 24 .navbar .navbar-toggle .icon-bar { 25 position: relative; 26 transition: all 200ms ease-in-out; 27 } 28 29 .navbar .navbar-toggle .icon-bar:nth-of-type(1) { 30 transform: rotate(45deg); 31 top: 6px; 32 } 33 34 .navbar .navbar-toggle .icon-bar:nth-of-type(2) { 35 opacity: 0; 36 width: 0; 37 margin-left: 50%; 38 } 39 40 .navbar .navbar-toggle .icon-bar:nth-of-type(3) { 41 transform: rotate(-45deg); 42 bottom: 6px; 43 } 44 </style> 45</head> 46<body> 47<div class="navbar navbar-default navbar-fixed-top"> 48 <div class="navbar-header"> 49 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" href="#main-nav"> 50 <span class="icon-bar"></span> 51 <span class="icon-bar"></span> 52 <span class="icon-bar"></span> 53 </button> 54 <a class="navbar-brand" href="#">テキスト</a> 55 </div> 56 <div id="main-nav" class="navbar-collapse collapse"> 57 <ul class="nav navbar-nav"> 58 <li class="active"><a href="#">テキスト</a></li> 59 <li><a href="#">テキスト1</a></li> 60 <li><a href="#">テキスト2</a></li> 61 <li><a href="#">テキスト3</a></li> 62 <li class="visible-sm visible-xs"><a href="#">テキスト4</a></li> 63 <li class="visible-sm visible-xs"><a href="#">テキスト5</a></li> 64 <li class="visible-xs"><a href="#">テキスト6</a></li> 65 </ul> 66 </div> 67</div> 68<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 69<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 70</body> 71</html>
#追記
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 7 <style type="text/css"> 8 .navbar .navbar-toggle.collapsed .icon-bar:nth-of-type(1) { 9 transform: rotate(0deg); 10 top: 0; 11 } 12 13 .navbar .navbar-toggle.collapsed .icon-bar:nth-of-type(2) { 14 opacity: 1; 15 width: 100%; 16 margin-left: 0; 17 } 18 19 .navbar .navbar-toggle.collapsed .icon-bar:nth-of-type(3) { 20 transform: rotate(0deg); 21 bottom: 0; 22 } 23 24 .navbar .navbar-toggle .icon-bar { 25 position: relative; 26 transition: all 200ms ease-in-out; 27 } 28 29 .navbar .navbar-toggle .icon-bar:nth-of-type(1) { 30 transform: rotate(45deg); 31 top: 6px; 32 } 33 34 .navbar .navbar-toggle .icon-bar:nth-of-type(2) { 35 opacity: 0; 36 width: 0; 37 margin-left: 50%; 38 } 39 40 .navbar .navbar-toggle .icon-bar:nth-of-type(3) { 41 transform: rotate(-45deg); 42 bottom: 6px; 43 } 44 45 .navbar-nav li > a { 46 color: #ffffff !important; 47 background-color: #ff8ed0 !important; 48 } 49 50 .navbar-nav li.active > a { 51 color: #000000 !important; 52 background-color: #ffff00 !important; 53 } 54 </style> 55</head> 56<body> 57<div class="navbar navbar-default navbar-fixed-top"> 58 <div class="navbar-header"> 59 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" href="#main-nav"> 60 <span class="icon-bar"></span> 61 <span class="icon-bar"></span> 62 <span class="icon-bar"></span> 63 </button> 64 <a class="navbar-brand" href="#">テキスト</a> 65 </div> 66 <div id="main-nav" class="navbar-collapse collapse"> 67 <ul class="nav navbar-nav"> 68 <li class="active"><a href="#">テキスト</a></li> 69 <li><a href="#">テキスト1</a></li> 70 <li><a href="#">テキスト2</a></li> 71 <li><a href="#">テキスト3</a></li> 72 <li class="visible-sm visible-xs"><a href="#">テキスト4</a></li> 73 <li class="visible-sm visible-xs"><a href="#">テキスト5</a></li> 74 <li class="visible-xs"><a href="#">テキスト6</a></li> 75 </ul> 76 </div> 77</div> 78<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 79<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 80</body> 81</html>
投稿2017/04/09 12:06
編集2017/04/09 12:48総合スコア14731
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/09 12:30
2017/04/09 12:37 編集
2017/04/09 12:44
2017/04/09 12:50
2017/04/09 12:59
2017/04/09 13:14
2017/04/09 13:23
2017/04/09 13:28