web-dev-qa-db-fra.com

Comment faire glisser la barre de navigation de gauche au lieu de haut?

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

Par exemple:

enter image description here

Dans la capture d'écran ci-dessus, lorsque l'écran est redimensionné, la barre de navigation est basculée et glisse du haut vers le bas. Je veux plutôt que le navba glisse de la gauche. comment puis-je atteindre cette fonction dans Bootstrap.

Actuellement, selon le code, la barre de navigation glisse du haut. 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>
javascripthtmltwitter-bootstraptwitter-bootstrap-3navbar
17
PythonEnthusiast

Facile. Modifiez le comportement par défaut de

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

à slide-collapse fonctionnalité que nous allons implémenter 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 d'id au lieu du sélecteur de classe améliorera l'accessibilité car bootstrap ajoutera automatiquement les états ARIA (développés/réduits) au menu.

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

Classe .collapse in bootstrap assure que le menu sera initialement caché.

Le code:

Et puis collez le 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:

  • Une bonne idée est également de faire une requête réactive où la largeur du menu serait de 100% pour les smartphones au lieu de toujours 280px. Il fonctionne comme un charme.
  • Si vous avez un menu horizontal pour les ordinateurs de bureau et un curseur uniquement pour les petits appareils, vous pouvez facilement profiter de @grid-float-breakpoint et @grid-float-breakpoint-max Bootstrap MOINS variables
8
Hrvoje Golcic

Voici l'exemple complet

$(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');
    }
  });
});
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
  }
}
<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>
5
lgabster

Essayez ce qui suit et jetez un œil au lien suivant pour plus d'explications-

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

Jetez un œil au lien Github suivant pour fixer la barre de navigation à gauche ou à droite

Fonctionnalité: navbar-côté fixe gauche ou droite # 13919

Un autre lien utile - Barre latérale de navigation avec bouton bascule

4
royki

Sans plugin, nous pouvons le faire

Voir le LIEN

menu réactif à plusieurs niveaux Bootstrap avec bascule de glissière gauche pour les appareils mobiles

$('[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');
@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;
  }
}
<!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>
2
Syam S

Utilisez ceci pour un glissement de droite à gauche:

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

1
Sharavnan Kv

Il y a une bonne publication qui essaie d'imiter le basculement du côté gauche comme dans l'application Facebook en utilisant jQuery et Bootstrap. Vérifiez-le:

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

0
Paras Dahal

Bootstrap 4 (mise à jour 2019)

IMO la manière la plus simple est de remplacer l'animation Bootstrap repli afin qu'elle passe de gauche à droite (largeur au lieu de hauteur). Au lieu de basculer display:block quand .collapse.show est utilisé, la barre de navigation est toujours display:block qui vous permet de positionner selon vos besoins et d'utiliser des transitions dans les deux sens de l'effondrement ...

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

0
Zim

Veuillez vous référer à ceci CODEPEN . Les points importants suivants à noter:

  • Animate.css bibliothèque requise. Plus précisément, les animations slideInLeft et slideOutLeft.

  • Travaillez avec liste déroulante au lieu du composant collapse de Bootstrap.

  • Met le dropdown-menu élément static en appliquant la classe position-static dessus.

  • Levier la classe show qui est appliquée sur l'élément dropdown lorsque le dropdown-menu est montré.

  • Levierleft Propriété CSS pour effectuer la transition. Fondamentalement, nous allons définir left:-100% sur .dropdown.show .dropdown-menu et nous allons définir left:0px sur .dropdown .dropdown-menu

Capture d'écran:

enter image description here

[~ # ~] note [~ # ~] : vous pouvez essayer d'autres animations pour le dropdown-menu de animate.css .

Bonne chance...

0
Akash

Il y a une question similaire ici: Diapositive Bootstrap 3 dans le menu/Navbar sur mobile où la réponse acceptée est d'utiliser le bootstrap jasny. Il y a cependant d'autres réponses si Jasny n'était pas votre tasse de thé.

0
Mark Walker