web-dev-qa-db-fra.com

Barre latérale ouverte par défaut sur le bureau, fermée sur le mobile

J'ai de la difficulté à obtenir que mon contenu de navigation/barre latérale (à l'aide de Bootstrap) s'affiche (être étendu) par défaut sur le bureau et fermé par défaut sur mobile et que l'icône ne s'affiche que sur mobile. Je n'arrive pas à faire fonctionner cela.

<nav class="menu menu-open" id="theMenu">
      <div class="menu-wrap">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <i class="fa fa-bars menu-close d-lg-none" id="menu-toggle"></i>
            </button>
          <div id="menu-logo">
            <img src="Final_Logo.png" width="210" height="214" alt="">
          </div>
          <div id="navbarToggleExternalContent">
          <ul id="main-menu">
              <a href="#">Home</a>
              <a href="#">About</a>
              <a href="#">Writing</a>
              <a href="#">Events</a>
              <a href="#">Speaking</a>
              <a href="#">Music</a>
          </ul>
          <ul id="social-icons">
              <li class="facebook"><a href="#"><i class="fab fa-facebook fa-2x"></i></a></li>
              <li class="Twitter"><a href="#"><i class="fab fa-Twitter fa-2x"></i></a></li>
              <li class="instagram"><a href="#"><i class="fab fa-instagram fa-2x"></i></a></li>
          </ul>
        </div>
      </div>
  </nav>

J'ai essayé d'utiliser ce code javascript, mais en vain:

 $('.menu-close').on('click', function(){
    $('#menuToggle').toggleClass('active');
    $('body').toggleClass('body-Push-toright');
    $('#theMenu').toggleClass('menu-open');
    alert("Test");
    });
javascripthtmlcssbootstrap-4responsive-design
9
Frank Doe

Il semble que cela ait été répondu ici: https://stackoverflow.com/a/36289507/378779 Fondamentalement, ajoutez l'un des navbar-expand-* classes à votre <nav>, par exemple.:

<nav class="menu menu-open navbar-expand-md" id="theMenu">
4
kmoser

Vous pouvez utiliser CSS Media Query pour masquer/afficher le contenu dans différentes fenêtres/appareils.

1
Muhamad D. Fahrezi

Tout d'abord quelques points:

  1. Vous avez dit barre latérale, mais votre balisage ne ressemble pas vraiment à une barre latérale pour moi, il ressemble à un topnav réactif. J'essaierai de le comprendre du mieux que je pourrai, et je montrerai également une barre latérale fonctionnelle, au cas où c'est ce que vous voulez vraiment.

  2. Vos éléments de menu sont dans un <ul> (Liste non ordonnée) sans aucun <li> (Éléments de liste). Le bootsrap js/css a probablement besoin des <li> Pour fonctionner correctement. Techniquement, un <ul> Sans <li> Est du html valide, mais le seul contenu autorisé dans un <ul> Sont des <li> S donc des ancres (ou autre chose) à l'intérieur d'un <ul> Doit être contenu dans <li> Pour être valide.

  3. Je ne sais pas exactement ce que vous essayez de faire avec les icônes sociales, je les ai donc légèrement ajustées d'une manière qui semble raisonnable.

  4. J'ai ajouté overflow-y: scroll; Sur l'élément <html> Afin que lorsque vous ouvrez le menu sur un petit écran, il ne provoque pas de décalage si une barre de défilement est ajoutée. Peut ne pas être nécessaire selon la conception de votre site et la disposition du contenu.

Commençons donc avec un menu réactif très basique.

Basic Bootstrap Menu réactif

html {
  overflow-y: scroll;
}
.social {
  padding: 4px 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Navbar</a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Writing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Events</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Speaking</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Music</a>
      </li>
    </ul>
      <a class="social" href="#"><i class="fa fa-facebook fa-2x"></i></a>
      <a class="social" href="#"><i class="fa fa-Twitter fa-2x"></i></a>
      <a class="social" href="#"><i class="fa fa-instagram fa-2x"></i></a>
  </div>
</nav>

D'accord, ça a l'air bien, mais vous aviez une image dans le menu. Je vais donc mettre une image dans le menu et lui donner un peu de CSS pour la styliser. Ensuite, avec l'image, nous aurons besoin d'un peu de CSS supplémentaire pour bien positionner les éléments de menu:

  1. Positionnez le bouton hamburger de façon à ce qu'il repose sur le bas de la barre de navigation. Je vais utiliser les 200 pixels de l'image et soustraire quelques rem. Vous pouvez changer la top: calc(100px - 1rem); en top: 1rem; Pour placer le hamburger sur le dessus, ou bottom: 1rem; Si vous voulez que le hamburger colle au bas de la navigation même lorsqu'il est ouvert. Ou supprimez simplement toute cette règle pour utiliser la valeur par défaut bootstrap qui place le hamburger au milieu vertical.

  2. Positionnez les éléments de menu pour qu'ils reposent également au bas de la barre de menus lorsqu'ils ne sont pas réduits.

  3. positionnez également les icônes sociales en bas, mais poussez-les vers la droite.

  4. Les numéros 2 et 3 ci-dessus ne devraient s'appliquer au-dessus du point d'arrêt moyen que lorsque le menu n'est pas réduit, je vais donc les placer dans une requête multimédia pour cibler plus de 768 pixels (point d'arrêt moyen de bootstrap). Cela pourrait également être fait avec des mixins de points d'arrêt sass bootstraps, mais nous allons simplement utiliser css simple ici. Vous pouvez voir le positionnement de ces éléments dans la règle de requête @media dans le CSS, où vous pouvez le changer pour les pousser vers le haut de la barre. Ou supprimez simplement ces règles pour revenir aux valeurs par défaut bootstrap, qui centre verticalement les éléments de menu et place les icônes sociales en dessous. Vous pouvez également placer les icônes sociales dans les éléments <li> Dans le menu <ul> si vous vouliez juste que les icônes tombent directement dans le menu comme les autres éléments du menu.

avec image dans le menu

html {
  overflow-y: scroll;
}
.social {
  padding: 4px 4px;
}
.nav-logo {
  width: 200px;
  height: 100%;
}
.navbar-toggler {
  position: absolute;
  top: calc(100px - 1rem);
  right: 1rem;
}

@media all and (min-width: 768px) {
  .navbar-nav {
    position: absolute;
    bottom: 0;
  }
  .social-list {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#"><img class="nav-logo" src="https://i.postimg.cc/nckTrT6T/21.jpg"></a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Writing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Events</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Speaking</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Music</a>
      </li>
    </ul>
    <div  class="social-list">
      <a class="social" href="#"><i class="fa fa-facebook fa-2x"></i></a>
      <a class="social" href="#"><i class="fa fa-Twitter fa-2x"></i></a>
      <a class="social" href="#"><i class="fa fa-instagram fa-2x"></i></a>
    </div>
  </div>
</nav>

D'accord, mais vous avez dit que c'était une barre latérale. Je ne suis pas très familier avec le bootstrap, mais je suppose que ni la v3 ni la v4 ne fournissent une navigation latérale par défaut. Plusieurs tutoriels bootstrap sidebar peuvent être trouvés ici . J'ai simplement utilisé la version la plus basique des tutoriels liés ci-dessus pour créer un exemple ici.

Barre latérale pliable

$(document).ready(function () {

    $('#sidebarCollapse').on('click', function () {
        $('#sidebar').toggleClass('active');
    });

});
/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #7386D5;
    color: #fff;
    transition: all 0.3s;
}

#sidebar.active {
    margin-left: -250px;
}

#sidebar .sidebar-header {
    padding: 20px;
    background: #6d7fcc;
}

#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}

#sidebar ul li a:hover {
    color: #7386D5;
    background: #fff;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
    color: #fff;
    background: #6d7fcc;
}

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #6d7fcc;
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

a.download {
    background: #fff;
    color: #7386D5;
}

a.article,
a.article:hover {
    background: #6d7fcc !important;
    color: #fff !important;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
    #sidebarCollapse span {
        display: none;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

    <div class="wrapper">
        <!-- Sidebar  -->
        <nav id="sidebar">
            <div class="sidebar-header">
                <h3>Bootstrap Sidebar</h3>
            </div>

            <ul class="list-unstyled components">
                <p>Dummy Heading</p>
                <li class="active">
                    <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a>
                    <ul class="collapse list-unstyled" id="homeSubmenu">
                        <li>
                            <a href="#">Home 1</a>
                        </li>
                        <li>
                            <a href="#">Home 2</a>
                        </li>
                        <li>
                            <a href="#">Home 3</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Pages</a>
                    <ul class="collapse list-unstyled" id="pageSubmenu">
                        <li>
                            <a href="#">Page 1</a>
                        </li>
                        <li>
                            <a href="#">Page 2</a>
                        </li>
                        <li>
                            <a href="#">Page 3</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Portfolio</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>

            <ul class="list-unstyled CTAs">
                <li>
                    <a href="https://bootstrapious.com/tutorial/files/sidebar.Zip" class="download">Download source</a>
                </li>
                <li>
                    <a href="https://bootstrapious.com/p/bootstrap-sidebar" class="article">Back to article</a>
                </li>
            </ul>
        </nav>

        <!-- Page Content  -->
        <div id="content">

            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid">

                    <button type="button" id="sidebarCollapse" class="btn btn-info">
                        <i class="fa fa-align-left"></i>
                        <span>Toggle Sidebar</span>
                    </button>
                    <button class="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <i class="fa fa-align-justify"></i>
                    </button>

                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="nav navbar-nav ml-auto">
                            <li class="nav-item active">
                                <a class="nav-link" href="#">Page</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Page</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Page</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Page</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>

            <h2>Collapsible Sidebar Using Bootstrap 4</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <div class="line"></div>

            <h2>Lorem Ipsum Dolor</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <div class="line"></div>

            <h2>Lorem Ipsum Dolor</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <div class="line"></div>

            <h3>Lorem Ipsum Dolor</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
0
Veneseme Tyras

J'ai créé un exemple pour vous, basé sur la documentation bs4 concernant le contenu externe.

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark navbar-expand-lg">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

Dans cet exemple, le code s'effondre du haut - au lieu de la droite. En fait, je suis en congé et je vais essayer de compléter l'exemple pour répondre à vos besoins.

JavaScript supplémentaire:

var externalContent = $('#navbarToggleExternalContent'),
    execOnResize = function(){
// also the next line was only for use in jsfiddle
// in the real world you need to use window.outerWidth
// 992 pixel is the width of breakpoint corresponding to the class "navbar-expand-lg". Feel free to adapt it to fit your needs.
    if(window.innerWidth >= 992){
        externalContent.addClass('show');
    }else{
        externalContent.removeClass('show');
    }
};
// the next line was only addded for jsfiddle       
execOnResize();

window.onresize = function(event) {
    execOnResize();
};

window.addEventListener('load', function() {
    execOnResize();
})

J'ai également créé un violon violon Pour le voir en action, veuillez redimensionner la fenêtre intérieure dans jsfiddle

0
MattOpen

Votre code Javascript actuel fonctionnera toujours, quel que soit l'appareil. Vous avez besoin d'un moyen de vérifier si l'appareil est un ordinateur ou un téléphone mobile.

Une façon serait d'utiliser le navigateur UserAgent:

$('.menu-close').on('click', function(){
    if(navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
        //mobile
        $('#menuToggle').toggleClass('active');
        $('body').toggleClass('body-Push-toright');
        $('#theMenu').toggleClass('menu-open');
        alert("Test");
    }
});

Ou, vous pouvez simplement compter sur la largeur de la fenêtre (mais les petites fenêtres de bureau seront traitées comme la version mobile):

if(window.innerWidth <= 767) { // a certain threshold value, in pixels
    //mobile
    //do something
}
0
Anis R.

Voici le lien dont vous avez besoin axactly. J'ai créé un stylo pour vous. Veuillez regarder le lien ci-dessous.

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="theMenu">
  <a class="navbar-brand" id="menu-logo">
            <img src="Final_Logo.png" width="210" height="214" alt="">
          </a>      
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto" id="main-menu">
            <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="#">About</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Writing</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Events</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Speaking</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Music</a></li>
            <li class="facebook"><a href="#"><i class="fab fa-facebook fa-2x"></i></a></li>
              <li class="Twitter"><a href="#"><i class="fab fa-Twitter fa-2x"></i></a></li>
              <li class="instagram"><a href="#"><i class="fab fa-instagram fa-2x"></i></a></li>
          </ul>
  </div>
  </nav>

https://codepen.io/pgurav/pen/abbQZJL

0
Priyanka