Comment masquer la barre de navigation Bootstrap 4 pliable en un clic

108

J'ai créé cette barre de navigation réductible à l'aide de Bootstrap 4 qui fonctionne bien, mais j'aimerais qu'elle se ferme lorsque l'utilisateur clique sur un lien. Un moyen de faire ça? Merci

barre de navigation html:

<nav class="navbar navbar-toggleable-md fixed-top">

<button id="nav-btn"class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv"  aria-expanded="false" aria-label="Toggle navigation">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
 </button>

            <div class="container">

                <a class="navbar-brand" href="#"><img src="Images/logo.png" width="60px"></a>

                    <div class="collapse navbar-collapse" id="navbarDiv">

                        <ul class="navbar-nav mr-auto">

                            <li class="nav-item active">

                                <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>

                            </li>

                            <li class="nav-item">

                                <a class="nav-link" href="#about-us">About</a>

                            </li>

                            <li class="nav-item">

                                <a class="nav-link" href="#pricing">Pricing</a>

                            </li>

                        </ul>

                    </div>

            </div>

        </nav>

css pour .icon-bar, puisque Bootstrap 4 n'utilise pas la classe icon-bar.

.navbar-toggler .icon-bar {
  margin: 7px;
  display: block;
  width: 22px;
  height: 1px;
  background-color: #cccccc;
  border-radius: 1px;
}
Rudi Thiel
la source

Réponses:

170

Vous pouvez ajouter le collapsecomposant aux liens comme ceci.

<ul class="navbar-nav mr-auto">
     <li class="nav-item active">
         <a class="nav-link" href="#home" data-toggle="collapse" data-target=".navbar-collapse.show">Home <span class="sr-only">(current)</span></a>
     </li>
     <li class="nav-item">
         <a class="nav-link" href="#about-us" data-toggle="collapse" data-target=".navbar-collapse.show">About</a>
     </li>
     <li class="nav-item">
         <a class="nav-link" href="#pricing" data-toggle="collapse" data-target=".navbar-collapse.show">Pricing</a>
     </li>
 </ul>

Démo utilisant la méthode 'data-toggle'

Ou , (peut-être une meilleure façon) utilisez jQuery comme ceci.

$('.navbar-nav>li>a').on('click', function(){
    $('.navbar-collapse').collapse('hide');
});

Démo utilisant la méthode jQuery

Mise à jour 2019 - Bootstrap 4

La barre de navigation a changé, mais la méthode "fermer après clic" est toujours la même:

https://codeply.com/go/nFDHoEqqJQ (méthode jQuery)
https://codeply.com/go/PqIBtz3HPL ( data-toggleméthode, voir composant Bootstrap Collapse )

Zim
la source
1
Salut, merci pour la réponse, mais quand je fais cela, cela ne réduit pas la barre de navigation mais plutôt l'élément div auquel il est lié avec scrollspy. Aucune suggestion? Merci
Rudi Thiel
3
Super ... et n'oubliez pas que vous pouvez utiliser <span class="navbar-toggler-icon"></span>pour les barres d'icônes dans BS 4.
Zim
2
Vous pouvez utiliser navbar-inversedans la barre de navigation pour changer toutes les couleurs du texte en blanc (ou blanc transparent)
Zim
3
@Zim - Vous devez définir le data-toggleet data-targetsur l'élément parent ( li), sinon scrollspy ne fonctionnera pas. Vous devriez peut-être modifier votre réponse. :)
J. Sadi
1
La suggestion de @ J.Sadi a fait ce travail pour moi. Sinon, les clics sur le lien n'ont rien fait.
totalhack
44

J'utilise ANGULAR et comme cela m'a posé des problèmes, le routerLink ajoute simplement la bascule de données et la cible dans la balise li .... ou utilise jquery comme "ZimSystem"

<div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
          <a class="nav-link" routerLink="/inicio" routerLinkActive="active" >Inicio</a>
        </li>
      </ul>
</div>

Jésus38
la source
4
Merci, vous avez sauvé la journée pour moi !. J'utilise Angular 6 avec bootstrap 4.1.3. Appliqué data-toggle="collapse" data-target=".navbar-collapse.show"aux li, y compris la liste déroulante li.
apprentissage ...
2
Cette réponse est juste propre et superbe!
Nation Chirara
17

Vous pouvez appeler $.collapse('hide');avec un gestionnaire d'événements sur les liens.

$('.nav-link').on('click',function() {
  $('.navbar-collapse').collapse('hide');
});
.navbar-toggler .icon-bar {
  margin: 7px;
  display: block;
  width: 22px;
  height: 1px;
  background-color: #cccccc;
  border-radius: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-toggleable-md fixed-top">
  <button id="nav-btn" class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv" aria-expanded="false" aria-label="Toggle navigation">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
 </button>
  <div class="container">
    <a class="navbar-brand" href="#"><img src="Images/logo.png" width="60px"></a>
    <div class="collapse navbar-collapse" id="navbarDiv">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#about-us">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#pricing">Pricing</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Michael Coker
la source
9

En essayant les solutions ci-dessus, il me manquait une solution pour les bascules de Dropdown, alors c'est parti! Ouvre également les éléments du sous-menu.

Vous devrez peut-être le modifier un peu si votre classe de bascule est différente.

$('.navbar-nav li a').on('click', function(){
    if(!$( this ).hasClass('dropdown-toggle')){
        $('.navbar-collapse').collapse('hide');
    }
});
Hendrik Vlaanderen
la source
1
C'est plus court, et peut-être plus rapide:$(".navbar-nav li a:not('.dropdown-toggle')") .on('click', function () { $('.navbar-collapse').collapse('hide'); }
James Wilkins
5

c'est la solution pour fermer le menu en cliquant sur l'ancre puis appliquer cette ligne dans l'élément de liste

     data-target="#sidenav-collapse-main" data-toggle="collapse"

le vrai exemple qui fonctionne pour moi est ci-dessous

      <li class="nav-item" data-target="#sidenav-collapse-main" data- 
      toggle="collapse" >
      <a class="nav-link" routerLinkActive="active" routerLink="/admin/users">
        <i class="ni ni-single-02  text-orange"></i> Users
      </a>
      </li>
abubakkar tahir
la source
2

J'utilise Angular 5 avec Boostrap 4. Cela fonctionne pour moi de cette façon.

 $(document).on('click', '.navbar-nav>li>a, .navbar-brand, .dropdown-menu>a', function (e) {
      if ( $(e.target).is('a') && $(e.target).attr('class') != 'nav-link dropdown-toggle' ) {
        $('.navbar-collapse').collapse('hide');
      }
    });
   }
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" [routerLink]="['/home']">FbShareTool</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation" style="">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarColor01">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active" *ngIf="_myAuthService.isAuthenticated()">
        <a class="nav-link" [routerLink]="['/dashboard']">Dashboard <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item dropdown" *ngIf="_myAuthService.isAuthenticated()">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Manage
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" [routerLink]="['/fbgroup']">Facebook Group</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Fetch Data</a>
          </div>
      </li>
    </ul>

    <ul class="navbar-nav navbar-right navbar-right-link">
        <li class="nav-item" *ngIf="!_myAuthService.isAuthenticated()" >
            <a class="nav-link" (click)="logIn()">Login</a>
        </li>
        <li class="nav-item" *ngIf="_myAuthService.isAuthenticated()">
           <a class="nav-link">{{ _myAuthService.userDetails.displayName }}</a>
        </li>
        <li class="nav-item" *ngIf="_myAuthService.isAuthenticated() && _myAuthService.userDetails.photoURL">
            <a>
              <img [src]="_myAuthService.userDetails.photoURL" alt="profile-photo" class="img-fluid rounded" width="40px;">
            </a>
        </li>
        <li class="nav-item" *ngIf="_myAuthService.isAuthenticated()">
            <a class="nav-link" (click)="logOut()">Logout</a>
        </li>
    </ul>

  </div>
</nav>

Pedro
la source
2

La façon la plus simple de le faire en utilisant uniquement le modèle Angular 2/4 sans codage:

<nav class="navbar navbar-default" aria-expanded="false">
  <div class="container-wrapper">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" (click)="isCollapsed = !isCollapsed">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="navbar-collapse collapse no-transition" [attr.aria-expanded]="!isCollapsed" [ngClass]="{collapse: isCollapsed}">
      <ul class="nav navbar-nav" (click)="isCollapsed = !isCollapsed">
        <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}"><a routerLink="/">Home</a></li>
        <li [routerLinkActive]="['active']"><a routerLink="/about">About</a></li>
        <li [routerLinkActive]="['active']"><a routerLink="/portfolio">Portfolio</a></li>
        <li [routerLinkActive]="['active']"><a routerLink="/contacts">Contacts</a></li>
      </ul>
    </div>

  </div>
</nav>
Donmutti
la source
2

Ce code simule un clic sur le bouton burguer pour fermer la barre de navigation en cliquant sur un lien dans le menu, en conservant l'effet de fondu. Solution avec dactylographié pour angulaire 7. Évitez les problèmes de routerLink.

ToggleNavBar () {
    let element: HTMLElement = document.getElementsByClassName( 'navbar-toggler' )[ 0 ] as HTMLElement;
    if ( element.getAttribute( 'aria-expanded' ) == 'true' ) {
        element.click();
    }
}

<li class="nav-item" [routerLinkActive]="['active']">
    <a class="nav-link" [routerLink]="['link1']" title="link1" (click)="ToggleNavBar()">link1</a>
</li>
edu
la source
Les solutions proposées avec jQuery ne fonctionnent pas correctement dans Angular 7 avec chargement paresseux.
edu
0

Vous pouvez utiliser une simple liaison en cliquant et en fermant, comme ceci: (click)="drawer.close()

<a class="nav-link" [routerLink]="navItem.link" routerLinkActive="selected" (click)="drawer.close()">
Mihai Cristian
la source