Q&A
s8_chuさんの回答を見て気づきましたが、私は質問の意図を取り違ってました。私の回答は間違っているので、無視してください。
bootstrapで、ハンバーガーボタンと内容について
開閉時に
= → ✖️マークにしたいのですが、どうすれば可能でしょうか。
回答2件
0
クリックしたらハンバーガーボタンのアイコンを=マークから✖️マークへ変更するという動作は以下のように行えると思いますが、いかがでしょう。
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-header { 9 float: none; 10 } 11 12 .navbar-toggle { 13 display: block; 14 } 15 16 .navbar-collapse.collapse { 17 display: none !important; 18 } 19 20 .navbar-nav { 21 float: none !important; 22 } 23 24 .navbar-nav > li { 25 float: none; 26 } 27 28 .navbar-collapse.collapse.in { 29 display: block !important; 30 } 31 32 .navbar .navbar-toggle.collapsed .icon-bar:nth-of-type(1) { 33 transform: rotate(0deg); 34 top: 0; 35 } 36 37 .navbar .navbar-toggle.collapsed .icon-bar:nth-of-type(2) { 38 visibility: hidden; 39 } 40 41 .navbar .navbar-toggle.collapsed .icon-bar:nth-of-type(3) { 42 transform: rotate(0deg); 43 bottom: 0; 44 } 45 46 .navbar .navbar-toggle .icon-bar { 47 position: relative; 48 transition: all 200ms ease-in-out; 49 } 50 51 .navbar .navbar-toggle .icon-bar:nth-of-type(1) { 52 transform: rotate(45deg); 53 top: 6px; 54 } 55 56 .navbar .navbar-toggle .icon-bar:nth-of-type(2) { 57 visibility: hidden; 58 } 59 60 .navbar .navbar-toggle .icon-bar:nth-of-type(3) { 61 transform: rotate(-45deg); 62 bottom: 6px; 63 } 64 </style> 65</head> 66<body> 67<div class="navbar navbar-default navbar-fixed-top"> 68 <div class="navbar-header"> 69 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" href="#main-nav"> 70 <span class="icon-bar"></span> 71 <span class="icon-bar"></span> 72 <span class="icon-bar"></span> 73 </button> 74 <a class="navbar-brand" href="#">テキスト</a> 75 </div> 76 <div id="main-nav" class="navbar-collapse collapse"> 77 <ul class="nav navbar-nav"> 78 <li class="active"><a href="#">テキスト</a></li> 79 <li><a href="#">テキスト</a></li> 80 <li><a href="#">テキスト</a></li> 81 </ul> 82 </div> 83</div> 84<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 85<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 86</body> 87</html>
#追記
0. CSSを修正。
0. visibilityプロパティを削除して修正。
0. 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>
投稿2017/04/09 10:58
編集2017/04/09 12:02
総合スコア14731
0
HTML
1<span class="icon-bar"></span> 2<span class="icon-bar"></span> 3<span class="icon-bar"></span>
を、
HTML
1<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
に変更。
投稿2017/04/09 10:14
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/09 11:49
2017/04/09 12:02
2017/08/27 06:21