Comment faites glisser la barre de navigation de gauche, au lieu de haut?

Bootstrap prend en charge le basculement d'une barre de navigation du haut. Comment puis-je le faire glisser à partir de la gauche lorsque la taille de l'écran est petit?

Par exemple:

Comment faites glisser la barre de navigation de gauche, au lieu de haut?

Dans la capture d'écran présentée ci-dessus, lorsque l'écran est redimensionné, la barre de navigation est activée et glisse vers le bas à partir du haut. J'ai plutôt envie que la barre de navigation devrait glisser à partir de la gauche. Comment puis-je réaliser cette fonction dans le Bootstrap?

Actuellement, selon le code, la barre de navigation de diapositives à partir de la partie supérieure. Voici mon code:

<nav class="navbar navbar-site navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a href="{% url 'index' %} " class="navbar-brand logo logo-title">
<span class="logo-icon"><i class="icon icon-search-1 ln-shadow-logo shape-0"></i> </span> <span>Companyname </span> </a> 
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
{% if user.is_authenticated %}
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span>{{user.first_name}}</span> <i class="icon-user fa"></i> <i class=" icon-down-open-big fa"></i></a>
<ul class="dropdown-menu user-menu">
<li class="active"><a href="account-home.html"><i class="icon-home"></i> Personal Home </a></li>
<li><a href="statements.html"><i class=" icon-money "></i> Payment history </a></li>
<li><a href="{% url 'logout' %}"> <i class="glyphicon glyphicon-off"></i> Signout </a></li>
</ul>
</li>
{% else %}
<li><a href="{% url 'login' %}">Login</a></li>
<li><a href="{% url 'signup' %}">Signup</a></li>
{% endif %}
<li class="postadd"><a class="btn btn-block btn-border btn-post btn-danger" href="{% url 'post_ad' %}">Post Free Add</a></li>
</ul>
</div>
</div>
</nav>
InformationsquelleAutor PythonEnthusiast | 2015-07-26
  1. 8

    Facile. Modifier le comportement par défaut de

    <button ... data-toggle="collapse" data-target="#my-navbar-collapse">

    à slide-collapse fonctionnalités que nous allons mettre en place maintenant

    <button ... data-toggle="slide-collapse" data-target="#my-navbar-collapse">

    Où le menu est contenu dans div qui a l'id my-navbar-collapse. Notez que l'utilisation de l'id au lieu de sélecteur de classe permettra d'améliorer l'accessibilité en raison de bootstrap ajouter ARIA unis (élargie et s'est effondré) pour le menu
    automatiquement.

    <div id="my-navbar-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
...
</ul>
</div>

    Classe .collapse dans le bootstrap assure le menu, initialement, être caché.

    Le code:

    Puis coller le code Javascript suivant, quelque part dans le pied de page:

    //mobile menu slide from the left
$('[data-toggle="slide-collapse"]').on('click', function() {
$navMenuCont = $($(this).data('target'));
$navMenuCont.animate({'width':'toggle'}, 350);
});

    Et les propriétés CSS suivantes:

    #my-navbar-collapse {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 280px; /*example + never use min-width with this solution */
height: 100%;
}

    Quelques conseils:

    • Bonne idée est aussi de rendre sensible requête dans laquelle la largeur du menu serait de 100% pour les smartphones au lieu de toujours 280px. Il fonctionne comme un charme.
    • Si vous avez de menu horizontale pour les ordinateurs de bureau, et le curseur uniquement pour des appareils plus petits, vous pouvez facilement profiter de @grille-float-point d'arrêt et @grille-float-point d'arrêt-max Bootstrap MOINS variables
    • cela semble assez simple, cependant, je ne peux pas obtenir que cela fonctionne et il n'y a pas d'erreurs dans la console, donc je ne sais pas quel est le problème avec elle. Avez-vous des exemple, vous pouvez poster un lien? Merci!
    • J'ai mis en œuvre cette ici karriere.milchundzucker.de . Découvrez peut-être vous voir quel est le problème avec votre code. Aussi le dépannage serait de voir si votre Javascript fonctionne correctement. Assurez-vous de placer votre code Javascript dans le très bas de la page, ou à veiller à exécuter sur le document de prêt de l'événement
    • merci pour l'exemple, Hrvoje. Je vais vérifier cela certainement. Quand je ne pouvais pas obtenir votre solution fonctionne, j'ai essayé pendant des heures à faire des choses différentes à l'aide de css3 transformer et de positionnement, c'est à dire: le réglage de la marge de gauche, etc (width:300px, left:-300px, transform: translateX(300px) or left: 0;, transform: translateX(0) -- ce n'est pas dans cet ordre, mais seulement les différentes valeurs de ces propriétés), mais je n'étais pas encore arriver la div à la diapositive à partir de la gauche. Oui, mon javascript est au bas de la page, j'ai aussi quelques intégré, de sorte était de vérifier que l'ordre en tant que bien.
    InformationsquelleAutor Hrvoje Golcic
  2. 5

    Ici est l'exemple complet

    JS:

    $(document).ready(function() {
$('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>'));
$('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></div>'));
var slidewidth = '20%';
var navbarneg = '-' + slidewidth;
if ($(window).width() < 767) {
$('#navbar-height-col').css("width", slidewidth);
$('#navbar-height-col').css("left", navbarneg);
$('#slide-nav #slidemenu').css("width", slidewidth);
$('#slide-nav #slidemenu').css("left", navbarneg);
}
$("#slide-nav").on("click", '.navbar-toggle', function(e) {
//slider is active
var selected = $(this).hasClass('slide-active');
//set slidemenu width
$('#slidemenu').stop().animate({
left: selected ? navbarneg : '0px'
});
//set navbar width
$('#navbar-height-col').stop().animate({
left: selected ? navbarneg : '0px'
});
//set content let
$('#page-content').stop().animate({
left: selected ? '0px' : slidewidth
});
//set navbar left
$('.navbar-header').stop().animate({
left: selected ? '0px' : slidewidth
});
$(this).toggleClass('slide-active', !selected);
$('#slidemenu').toggleClass('slide-active');
$('#page-content, .navbar, body, .navbar-header').toggleClass('slide-active');
});
var selected = '#slidemenu, #page-content, body, .navbar, .navbar-header';
$(window).on("resize", function() {
if ($(window).width() > 767 && $('.navbar-toggle').is(':hidden')) {
$(selected).removeClass('slide-active');
}
});
});

    CSS:

    body.slide-active {
overflow-x: hidden
}
#page-content {
position: relative;
padding-top: 70px;
left: 0;
}
#page-content.slide-active {
padding-top: 0
}
#slide-nav .navbar-toggle {
cursor: pointer;
position: relative;
line-height: 0;
float: left;
margin: 0;
width: 30px;
height: 40px;
padding: 17px 0 0 0;
border: 0;
background: transparent;
}
#slide-nav .navbar-toggle.slide-active .icon-bar {
background: #CC0F0F;
color: #CC0F0F;
}
.navbar-header {
position: relative
}
.navbar.navbar-fixed-top.slide-active {
position: relative
}
@media (max-width: 767px) {
#slide-nav .container {
margin: 0!important;
padding: 0!important;
height: 100%;
}
#slide-nav .navbar-header {
margin: 0 auto;
padding: 0 15px;
}
#slide-nav .navbar.slide-active {
position: absolute;
width: 80%;
top: -1px;
z-index: 1000;
}
#slide-nav #slidemenu {
background: #f7f7f7;
left: -100%;
min-width: 0;
position: absolute;
padding-left: 0;
z-index: 2;
top: -8px;
margin: 0;
}
#slide-nav #slidemenu .navbar-nav {
min-width: 0;
width: 100%;
margin: 0;
}
#slide-nav #slidemenu .navbar-nav .dropdown-menu li a {
min-width: 0;
width: 80%;
white-space: normal;
}
#slide-nav {
border-top: 0
}
#slide-nav.navbar-inverse #slidemenu {
background: #333
}
#navbar-height-col {
position: fixed;
top: 0;
height: 100%;
bottom: 0;
background: #f7f7f7;
}
#navbar-height-col.inverse {
background: #333;
z-index: 1;
border: 0;
}
#slide-nav .navbar-form {
width: 100%;
margin: 8px 0;
text-align: center;
overflow: hidden;
/*fast clearfixer*/
}
#slide-nav .navbar-form .form-control {
text-align: center
}
#slide-nav .navbar-form .btn {
width: 100%
}
}
@media (min-width: 768px) {
#page-content {
left: 0!important
}
.navbar.navbar-fixed-top.slide-active {
position: fixed
}
.navbar-header {
left: 0!important
}
}

    HTML:

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="slide-nav">
<div class="container">
<div class="navbar-header">
<a class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="slidemenu">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Menu</a>
</li>
<li><a href="#">Menu</a>
</li>
<li><a href="#">Menu</a>
</li>
</ul>
</div>
</div>
</div>
<div id="page-content">
<div class="container">
<h1 class="no-margin-top">Left Sidebar menu</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!</p>
</div>
</div>

    InformationsquelleAutor lgabster
  3. 4

    Essayez ce qui suit et de prendre un coup d'oeil sur le lien suivant pour plus d'explication- 

    <div class="navbar navbar-default navbar-fixed-side navbar-fixed-side-left" role="navigation">

    Prendre un coup d'oeil à la suite de Github lien pour fixer la barre de navigation de gauche ou de droite

    Fonctionnalité: navbar-fixed-côté gauche ou droit #13919

    Un autre lien utile - Nav Barre Latérale Avec Bouton À Bascule

    InformationsquelleAutor royki
  4. 2

    Sans Plugin, Nous pouvons le faire

    Voir Le LIEN

    Bootstrap multi-niveau responsive menu à gauche de la diapositive à bascule pour les appareils mobiles

    JS:

    $('[data-toggle="slide-collapse"]').on('click', function() {
$navMenuCont = $($(this).data('target'));
$navMenuCont.animate({
'width': 'toggle'
}, 350);
$(".menu-overlay").fadeIn(500);
});
$(".menu-overlay").click(function(event) {
$(".navbar-toggle").trigger("click");
$(".menu-overlay").fadeOut(500);
});
//if ($(window).width() >= 767) {
//    $('ul.nav li.dropdown').hover(function() {
//        $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
//    }, function() {
//        $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
//    });
//    $('ul.nav li.dropdown-submenu').hover(function() {
//        $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
//    }, function() {
//        $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
//    });
//    $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
//        event.preventDefault();
//        event.stopPropagation();
//        $(this).parent().siblings().removeClass('open');
//        $(this).parent().toggleClass('open');
//        $('b', this).toggleClass("caret caret-up");
//    });
//}
//$(window).resize(function() {
//    if( $(this).width() >= 767) {
//        $('ul.nav li.dropdown').hover(function() {
//            $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
//        }, function() {
//            $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
//        });
//    }
//});
var windowWidth = $(window).width();
if (windowWidth > 767) {
//$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
//    event.preventDefault();
//    event.stopPropagation();
//    $(this).parent().siblings().removeClass('open');
//    $(this).parent().toggleClass('open');
//    $('b', this).toggleClass("caret caret-up");
//});
$('ul.nav li.dropdown').hover(function() {
$(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
$('ul.nav li.dropdown-submenu').hover(function() {
$(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
//$('b', this).toggleClass("caret caret-up");
});
}
if (windowWidth < 767) {
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
//$('b', this).toggleClass("caret caret-up");
});
}
//$('.dropdown a').append('Some text');

    CSS:

    @media only screen and (max-width: 767px) {
#slide-navbar-collapse {
position: fixed;
top: 0;
left: 15px;
z-index: 999999;
width: 280px;
height: 100%;
background-color: #f9f9f9;
overflow: auto;
bottom: 0;
max-height: inherit;
}
.menu-overlay {
display: none;
background-color: #000;
bottom: 0;
left: 0;
opacity: 0.5;
filter: alpha(opacity=50);
/* IE7 & 8 */
position: fixed;
right: 0;
top: 0;
z-index: 49;
}
.navbar-fixed-top {
position: initial !important;
}
.navbar-nav .open .dropdown-menu {
background-color: #ffffff;
}
ul.nav.navbar-nav li {
border-bottom: 1px solid #eee;
}
.navbar-nav .open .dropdown-menu .dropdown-header,
.navbar-nav .open .dropdown-menu>li>a {
padding: 10px 20px 10px 15px;
}
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
li.dropdown a {
display: block;
position: relative;
}
li.dropdown>a:before {
content: "\f107";
font-family: FontAwesome;
position: absolute;
right: 6px;
top: 5px;
font-size: 15px;
}
li.dropdown-submenu>a:before {
content: "\f107";
font-family: FontAwesome;
position: absolute;
right: 6px;
top: 10px;
font-size: 15px;
}
ul.dropdown-menu li {
border-bottom: 1px solid #eee;
}
.dropdown-menu {
padding: 0px;
margin: 0px;
border: none !important;
}
li.dropdown.open {
border-bottom: 0px !important;
}
li.dropdown-submenu.open {
border-bottom: 0px !important;
}
li.dropdown-submenu>a {
font-weight: bold !important;
}
li.dropdown>a {
font-weight: bold !important;
}
.navbar-default .navbar-nav>li>a {
font-weight: bold !important;
padding: 10px 20px 10px 15px;
}
li.dropdown>a:before {
content: "\f107";
font-family: FontAwesome;
position: absolute;
right: 6px;
top: 9px;
font-size: 15px;
}
@media (min-width: 767px) {
li.dropdown-submenu>a {
padding: 10px 20px 10px 15px;
}
li.dropdown>a:before {
content: "\f107";
font-family: FontAwesome;
position: absolute;
right: 3px;
top: 12px;
font-size: 15px;
}
}

    HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="slide-collapse" data-target="#slide-navbar-collapse" aria-expanded="false">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="slide-navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</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><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
<li class="dropdown-submenu">
<a href="#" data-toggle="dropdown">SubMenu 1</span></a>
<ul class="dropdown-menu">
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
<li class="dropdown-submenu">
<a href="#" data-toggle="dropdown">SubMenu 2</span></a>
<ul class="dropdown-menu">
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Link</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</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><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="menu-overlay"></div>
<div class="col-md-12">
<h1>Resize the window to see the result</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique
ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo
dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet,
condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique
ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo
dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet,
condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique
ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo
dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet,
condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique
ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo
dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet,
condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique
ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo
dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet,
condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel.
</p>
</div>
</body>
</html>

    InformationsquelleAutor Syam S
  5. 1

    L'utiliser pour des de droite à gauche coulissante:

    HTML :

    <div class="nav ">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>

    CSS:

    .nav{
position: fixed;
right:0;
top: 70px;
width: 250px;
height: calc(100vh - 70px);
background-color: #333;
transform: translateX(100%);
transition: transform 0.3s ease-in-out;
}
.nav-view{
transform: translateX(0);
}

    JS:

    $(document).ready(function(){
$('a#click-a').click(function(){
$('.nav').toggleClass('nav-view');
});
});

    Télécharger les fichiers source: http://www.themeswild.com/read/slide-navigation-left-to-right

    • EST-CE QUE VOTRE RÉPONSE DANS TOUS LES BOUCHONS?
    • 🙂 , bon son, juste pour mettre en évidence but .
    InformationsquelleAutor Sharavnan Kv
  6. 0

    Il y a une question similaire ici: Bootstrap 3 de la Diapositive dans le Menu /barre de navigation sur Mobile où l'on a accepté la réponse est d'utiliser jasny bootstrap. Il y a d'autres réponses, mais si Jasny n'était pas votre tasse de thé.

    InformationsquelleAutor Mark Walker
  7. 0

    Il y a un bon post qui tente d'imiter le côté gauche de la bascule comme dans Facebook app à l'aide de jQuery et Bootstrap. Check it out:

    http://wsnippets.com/responsive-facebook-style-slide-navigation-menu-for-small-devices-using-jquery-and-twitter-bootstrap/

    InformationsquelleAutor Paras Dahal
  8. 0

    Veuillez consulter cette CODEPEN. Les points suivants sont à noter:

    • Animer.css bibliothèque a besoin. Plus précisément le slideInLeft et la slideOutLeft animations.

    • Travailler avec liste déroulante au lieu de la l'effondrement composant de Bootstrap.

    • Définir la dropdown-menu élément static en appliquant la classe position-static sur elle.

    • Effet de levier la show classe qui est appliquée sur le dropdown élément lors de la dropdown-menu est indiqué.

    • Effet de levier left propriété CSS pour mener à bien la transition. Fondamentalement, nous allons mettre en left:-100% sur .dropdown.show .dropdown-menu et nous allons left:0px sur .dropdown .dropdown-menu

    Capture d'écran:

    Comment faites glisser la barre de navigation de gauche, au lieu de haut?

    NOTE : Vous pouvez la version d'evaluation d'autres animations pour les dropdown-menu de animer.css.

    Bonne Chance...

    InformationsquelleAutor Akash
  9. 0

    Bootstrap 4 (mise à jour en 2019)

    De l'OMI, de la façon la plus simple est de remplacer le fichier d'amorce de l'effondrement de l'animation, de sorte que la transition de la gauche vers la droite (largeur plutôt qu'en hauteur). Au lieu de basculement display:block quand .collapse.show est utilisé, la barre de navigation est toujours display:block qui vous permet de vous positionner en tant que de besoin et utiliser les transitions à partir à la fois l'effondrement des directions...

    Ouvrir le menu: .collapse - .collapsing - .collapse.show

    Fermer le menu: .collapse.show - .collapsing.show - .collapse

        .navbar-collapse {
position: absolute;
top: 54px;
left: -100%;
width: 100%;
transition: all 0.4s ease;
display: block;
opacity: 0.8;
}
.navbar-collapse.collapsing {
height: auto !important;
left: -100%;
margin-left: 1px;
transition: all 0.2s ease;
opacity: 0.9;
}
.navbar-collapse.show {
margin-left: 100%;
transition: all 0.2s ease;
opacity: 1;
}

    https://www.codeply.com/go/KSS4pjqtJy

    InformationsquelleAutor Zim