Make bootstrap menu, faites glisser de la droite vers la gauche
personne ne sait comment faire le bootstrap de navigation sur mobile glisser de la droite vers la gauche, la valeur par défaut est glisser vers le bas, je veux faire quelque chose comme ça, mais vraiment pas sûr de commencer que je devrais arrêter d'abord le trigger par défaut, mais vous ne savez pas où le fichier situé
référence : http://tympanus.net/Development/MultiLevelPushMenu/index2.html
Mon violon : https://jsfiddle.net/os848rv1/1/
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li><a href="../navbar-fixed-top/">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
</p>
</div>
</div> <!-- /container -->
<script>
$('#navbar').click(function(){
if ($('#navbar').is(':hidden')) {
$('#navbar').show('slide',{direction:'right'},1000);
} else {
$('#navbar').hide('slide',{direction:'right'},1000);
}
});
</script>
Vous devez vous connecter pour publier un commentaire.
Il ya un populaire Bootstrap fourche - Jasny Bootstrap. Il fait bootstrap menu, faites glisser de la droite vers la gauche, Le lien est: http://jasny.github.io/bootstrap/javascript/#offcanvas
Ont un look à la tripoter un lien qui pourrait vous aider. Laissez-moi savoir si sa fonctionne bien avec vous.
http://jsfiddle.net/zzh0ym2m/6/