0
ブートストラップのnavbar-toggleからハンバーガーを削除するにはどうすればいいですか？Xボタンに変更したいので、左にスライドしながらsidenavをクリックすると、赤い矩形の中をクリックすると sidenavを崩壊させる？サイドナビゲーションのブートストラップ
<button class = "navbar-toggle" id="opt_menu">
<span class="sr-only">Toggle navigation</span>
<span class= "icon-bar"> </span>
<span class= "icon-bar"> </span>
</button>
で：
<button class = "navbar-toggle" id="opt_menu"> × </button>
ときsidenavを折りたたむにありがとうここ
は、X記号については
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
.indexcity {
z-index: 99999;
}
body {
background-color: lightblue;
}
@media screen and (max-width: 767px) {
#logo{
text-align: right;
float: right;
margin-right: 40%;
}
#opt_menu{
float:left;
}
.navbar-collapse{
background-color:#847e6e;
position: fixed;
top: 0;
transition: all .25s ease-out;
height: 100%;
width: 70%;
right: 800px;
opacity: 50%;
box-shadow:0 0 25px #08090a;
}
.navbar-fixed-top .navbar-nav>li>a {
color: #000;
}
.right {
right: 0 !important;
left: 0 !important;}
}
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse{
max-height: 100%;
}
</style>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class= "container">
<a href = "#" class= "navbar-brand" id="logo">Test</a>
<button class = "navbar-toggle" id="opt_menu">
<span class="sr-only">Toggle navigation</span>
<span class= "icon-bar"> </span>
<span class= "icon-bar"> </span>
<span class= "icon-bar"> </span>
</button>
<div class = "navbar-collapse" >
<ul class ="nav navbar-nav navbar-right">
<li> <a href="#">Link0</a></li>
<li class ="dropdown">
<a href="#" class ="dropdown-toggle" data-toggle ="dropdown">Link1<b class ="caret"></b></a>
<ul class = dropdown-menu>
<li><a href="#">Link1</a> </li>
<li><a href="#">Link2</a> </li>
<li><a href="#">Link3</a> </li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<script>
/*
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}*/
jQuery(function($){
$('.navbar-toggle').click(function(){
$('.navbar-collapse').toggleClass('right');
$('.navbar-toggle').toggleClass('indexcity');
$('body').toggleClass('changecolor');
});
});
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
の可能性のある重複した[ブートストラップ3にナビゲーションバーエレメントの外側をクリックしたときに開いて折りたたまれたナビゲーションバーを閉じるには？]（http://stackoverflow.com/questions/23764863/how-to-close-開いた折りたたみ式のナビゲーションバー - クリックしたときのナビゲーションバーの外側） –