Bootstrap 3.0.2 responsive menu
https://stackoverflow.com//questions/20020697
-
21-12-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
I have this code, and I can't find out why it doesn't work. The desktop version seems to work fine, but when I use it on responsive units, It doesn't open the menu. Here's my code.
I hope that some of you can help me, because I'm trying to start up this little community, and it won't be such good, if the responsive menu doesn't work. Thank you!
<!DOCTYPE html>
<html>
<head>
<title>e3w Networks</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bignav.css" rel="stylesheet" media="screen">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<body background="mcpic.png">
<script src="js/jquery.js"></script>
<div class="navbar-wrapper">
<div class="container">
<p></p>
<nav class="navbar navbar-default navbar-static">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="e3wlogo.png" width="120" "height="44"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="shop.html"><span class="glyphicon glyphicon-shopping-cart"></span> Shop</a></li>
<li class="dropdown dropdown-large">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-list"></span> Teams<b class="caret"></b></a>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">LoL Teams</li>
<li><a href="http://www.e3w.dk/dwa">dwA.</a></li>
<li><a href="#">Button toolbar</a></li>
<li><a href="#">Sizing</a></li>
<li><a href="#">Nesting</a></li>
<li class="divider"></li>
<li class="dropdown-header">Minecraft</li>
<li><a href="http://www.e3w.dk/dwa">dwA.</a></li>
<li><a href="#">Button toolbar</a></li>
<li><a href="#">Sizing</a></li>
<li><a href="#">Nesting</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">CS:GO Teams</li>
<li><a href="http://www.e3w.dk/dwa">dwA.</a></li>
<li><a href="#">Button toolbar</a></li>
<li><a href="#">Sizing</a></li>
<li><a href="#">Nesting</a></li>
<li class="divider"></li>
<li class="dropdown-header">CS:S Teams</li>
<li><a href="http://www.e3w.dk/dwa">dwA.</a></li>
<li><a href="#">Button toolbar</a></li>
<li><a href="#">Sizing</a></li>
<li><a href="#">Nesting</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">asdad</li>
<li><a href="#">Basic example</a></li>
<li><a href="#">Sizing</a></li>
<li><a href="#">Sizing</a></li>
<li><a href="#">Sizing</a></li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li><a href="#">Tabs</a></li>
<li><a href="#">Pills</a></li>
<li><a href="#">Justified</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Information</li>
<li class="disabled"><p class="navbar-text">If you want your team in this game group<br \> section please click on the "Add your team" button.<br \>When you click and fill the form, you also need to<br \> agree to our policy/rules</p></li>
<li class="disabled"><a href="#"><button type="button" class="btn btn-block btn-group-sm">
<span class="glyphicon glyphicon-plus"></span> Add your team
</button></a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li data-toggle="modal" data-target="#myModal"><a href="#"><span class="glyphicon glyphicon-thumbs-up"></span> Help us</a></li>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-title" id="myModalLabel"><!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Overview</a></li>
<li><a href="#donate" data-toggle="tab">Donation</a></li>
<li><a href="#youtube" data-toggle="tab">YouTube</a></li>
<li><a href="#facebook" data-toggle="tab">Facebook</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">You can help us in many ways.</div>
<div class="tab-pane" id="donate">donate</div>
<div class="tab-pane" id="youtube">subscribe</div>
<div class="tab-pane" id="facebook">asdasd<p>sada</p></div>
</div></div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span><b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="disabled"><a href="#">We're sorry, but the login form isn't coded yet.</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</nav>
<div class="well"><p>So far from done</p><div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 17%">
<span class="sr-only">17% Complete (success)</span></div>
</div><div class="row">
</div><div class="well">
<table border="0">
<tr width="70%">
<td><div style="position:relative;width:280px;">
<a class="pull-left" style="position:relative; margin: 4px 5px 0 0;">
<img class="avatar" src="https://minotar.net/avatar/MarcusHegelund/32.png" player="MarcusHegelund" size="32" width="32" height="32" style="width: 32px; height: 32px; vertical-align: bottom;">
</a>
<a href="#" style="color: red"><b>Marcus</b></a>
<span class="label" style="background-color: green; color: white">Owner</span>
<span class="label" style="background-color: purple; color: white">Developer</span>
<span class="label" style="background-color: #FA0; color: white">Staff</span>
<p><i>Posted Nov. 16'th, 2013</i></p>
</div></td>
<td><p>hey</p><p>hey</p><p>hey</p><p>hey</p></td>
</table>
</div></div>
<nav class="navbar navbar-default navbar-static-bottom" role="navigation">
<p class="navbar-text">© Copyright 2011-2013, e3w Networks.</p>
<p class="navbar-text navbar-right"><a href="http://www.enaxy.dk">Enaxy</a></p>
<p class="navbar-text navbar-right"><a href="http://www.enaxy.dk">Enaxy</a></p>
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Lösung
why use twice the jquery file?, such as
<script src="js/jquery.js"></script>
<script src="https://code.jquery.com/jquery.js"></script>
and there is two body
<body background="mcpic.png">
change the following code data-target=".navbar-collapse"
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
