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

9

J'ai de la difficulté à obtenir que mon contenu de navigation / barre latérale (à l'aide de Bootstrap) s'affiche (soit é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");
    });
javascript html css bootstrap-4 responsive-design Frank Doe
la source
Hé, j'ai ajouté un commentaire sur votre question avec une solution exacte. Créé codepen pour vous afin que vous puissiez vérifier le code et la sortie. Veuillez regarder
Priyanka
Avez-vous d'autres CSS?
Codeply-er
Ajoutez-le classet modifiez-le sous la requête des médiaswidth:600
Awais

Réponses:

1

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

Muhamad D. Fahrezi
la source
0

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

Priyanka
la source
0

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 par le 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

MattOpen
la source
0

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
}
Anis R.
la source
Renifler la chaîne de l'agent utilisateur conduit à un code difficile à maintenir. Les requêtes médiatiques sont bien meilleures.
kmoser
Qu'est-ce qui est "difficile à maintenir" à propos d'une chaîne? Quoi qu'il en soit, vous pouvez encapsuler cette vérification dans une fonction, de sorte que chaque fois que vous devez mettre à jour la chaîne, vous n'avez qu'une seule ligne de code à modifier.
Anis R.
En outre, vous ne pouvez pas utiliser les requêtes de médias CSS pour basculer les noms de classe comme le souhaite OP
Anis R.
Les chaînes d'agent utilisateur des appareils changent au fil du temps à mesure que de nouveaux appareils sont produits. Cela se traduit par un code qui se casse chaque fois qu'un nouveau périphérique est introduit. Bien sûr, vous pouvez envelopper cela dans une fonction, mais cela vous oblige toujours à le changer chaque fois qu'un nouveau périphérique est introduit. Il est préférable de cibler les appareils en fonction de leur taille (à l'aide de requêtes multimédia CSS), et non de la chaîne de l'agent utilisateur. Aucune mise à jour n'est requise lorsqu'un nouveau périphérique est introduit. OP ne voulait pas nécessairement basculer les noms de classe; c'était leur meilleure tentative de solution, et je pense qu'elle est inférieure aux requêtes des médias.
kmoser
0

Tout d'abord quelques points:

  1. Vous avez dit la 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 peux, 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 une <ul>(liste non ordonnée) sans aucun <li>(éléments de liste). Le bootsrap js / css a probablement besoin du <li>s pour fonctionner correctement. Techniquement, un <ul>sans aucun <li>est un html valide, mais le seul contenu autorisé dans a <ul>est <li>s, donc les ancres (ou toute autre chose) à l'intérieur de a <ul>doivent être contenues dans <li>s pour être valides.

  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;l' <html>élément 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.

Menu réactif Bootstrap de base

Afficher l'extrait de code

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 le top: calc(100px - 1rem);pour top: 1rem;mettre 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 le bootstrap par défaut 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 les mixins de point d'arrêt sass de bootstraps, mais nous utiliserons simplement le 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 modifier pour les pousser vers le haut de la barre. Ou supprimez simplement ces règles pour revenir aux valeurs par défaut de 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 des <li>éléments du menu <ul>si vous souhaitez simplement que les icônes tombent directement dans le menu comme les autres éléments du menu.

avec image dans le menu

Afficher l'extrait de code

D'accord, mais vous avez dit que c'était une barre latérale. Je ne connais pas très bien le bootstrap, mais je suppose que ni la v3 ni la v4 ne fournissent une navigation dans la barre latérale par défaut. Vous trouverez ici plusieurs didacticiels de la barre latérale d'amorçage . 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

Afficher l'extrait de code

Veneseme Tyras
la source