Je suis en train d'essayer de mettre en place une barre de navigation avec bootstrap.
Je me base là-dessus : http://twitter.github.com/bootstrap/com ... tml#navbar (il faut descendre un peu pour tomber sur l'exemple « Responsive navbar », désolé pas d'ancre dispo à cet endroit)
Le problème que je n'arrive pas à résoudre c'est que la « dropdown » ne fonctionne pas en mode responsive, le clic sur l'entrée ne déroule pas le contenu. Alors que cela fonctionen très bien en mode « desktop ».
J'ai essayé de comparer
Voici le code de ma navbar :
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target="#main-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/">Titre</a>
<div class="nav-collapse" id="main-menu">
<ul class="nav">
<li class="active"><a href="/">Entrée 1</a></li>
<li><a href="">Entrée 2</a></li>
<li><a href="">Entrée 3</a></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#"><i class="icon-user icon-white"></i> Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="">Entrée 4.1</a>
</li>
<li>
<a href="">Entrée 4.2</a>
</li>
<li class="divider"></li>
<li>
<a href="">Entrée 4.3</a>
</li>
<li>
<a href="">Entrée 4.4</a>
</li>
<li class="divider"></li>
<li><a href="">Entrée 4.5</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div><div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Title</a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></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 class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>
<ul class="nav pull-right">
<li><a href="#">Link</a></li>
<li class="divider-vertical"></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>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar-inner -->
</div><!-- /navbar -->Pour finir voici un « jsfiddle » pour vous permettre de voir en live le problème : http://jsfiddle.net/PWkEr/
Et un autre fiddle pour voir l'exemple de twitter qui fonctionne : http://jsfiddle.net/4ACkj/3/ (j'ai juste ajouté la classe navbar-fixed + navbar-inverse)
Le deuxième étant un fork du premier, les ressources externes sont identiques, seul le code html change.
Je dois être fatigué, mais je n'arrive pas à corriger ce ù$ù$m*ù de html...
Merci d'avance à ceux qui auront le courage de me lire jusqu'au bout !
Bon dimanche !