Я пытаюсь создать панель навигации с обоими: выпадающее меню, которое всегда отображается, и свернутое меню. Это отлично работает в настольных браузерах, но не на моем мобильном телефоне (Android 2.3.6). Вот код:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Pizzeria & Trattoria </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="js/bootstrap-modal.js"></script>
<script type="text/javascript" src="js/bootstrap-dropdown.js"></script>
<script type="text/javascript" src="js/bootstrap-collapse.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('#autostart').modal('show');
$("a.ref_pics").fancybox({'titlePosition':'inside'});
});
//]]>
</script>
</head>
<body>
<div id="autostart" class="modal hide fade">
<div class="modal-header">
<button class="close" data-dismiss="modal"><i class="icon-remove"></i></button>
<h3> </h3>
</div>
text.... <a data-dismiss="modal" class="btn pull-right" href="#">Cerrar</a>
</div>
<div class="container">
<div class="hero-unit home-bg">
<div class="row">
<div class="span9"><img src="img/logo.png" alt="Pizzeria & Trattoria " /></div>
<div class="span3">
</div>
</div>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse" style="float:left;">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<ul class="nav pull-right">
<li class="dropdown last">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">español <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="index.php?lang=es">español</a></li>
<li><a href="index.php?lang=en">english</a></li>
<li><a href="index.php?lang=de">deutsch</a></li>
</ul>
</li>
</ul>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Bienvenida</a></li>
<li><a href="restaurante.php?lang=es">El Restaurante</a></li>
<li><a href="menu.php?lang=es">El Menú</a></li>
<li><a href="chef.php?lang=es">El Chef</a></li>
<li><a href="pizza.php?lang=es">La Pizza</a></li>
<li class="last"><a href="contacto.php?lang=es">Contacto</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
</div>
<div class="row extrabottom">
<div class="span9">
<h1>...</h1>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<div class="span3 picbar">
<a class="ref_pics" data-rel="group1" href="img/st_titel.jpg"><img src="img/th_titel.jpg" alt="Restaurante " /></a>
<a class="ref_pics" data-rel="group1" href="img/st_kaffee.jpg"><img src="img/th_kaffee.jpg" alt="" /></a>
<a class="ref_pics" data-rel="group1" href="img/gal_387626_R_K_B_by_ermelchen_pixelio.de.jpg"><img src="img/th_pizza.jpg" alt="" /></a>
</div>
</div>
<footer class="well">
<div class="row">
<div class="span6 pull-left"><a href="imprint.php?lang=es#gastro">índice de ilustraciones</a></div>
<div class="span6 pull-right">© </div>
</div>
</footer>
</div> <!-- /container -->
</body>
</html>
Кнопка (три полоски) не активна в моем браузере Android. Есть ли способ привязать onclick к кнопке, которая затем расширяет меню?
Любая помощь приветствуется.
Изменить: я присвоил сворачивающемуся меню идентификатор и попытался переключить его с помощью ссылки: <a href="#" onclick="$('#mencol').collapse('toggle')">toggle menu</a> Он работает в настольных браузерах, но не на моем Android. Я также попытался удалить style="float:left;" из btn-navbar, снова безуспешно.
РЕШЕНИЕ: Предположительно, я удалил три загрузочных javascripts bootstrap-modal.js, bootstrap-dropdown.js и bootstrap-collapse.js и добавил полный bootstrap.min.js. Теперь работает как шарм. Очевидно андроиду нужны дополнительные функции ...
