web-dev-qa-db-fra.com

rend les nav-pills pliables comme nav-bar dans bootstrap

nous développons une application et nous utilisons twiiter bootstrap 3 nous avons créé une barre de navigation avec nav-pills

   <ul class="nav nav-pills head-menu">                                                                                                
    <input type="hidden" id="selected_menu_item" value="=$selectedMenuId; ?>" />                               
        <li>
          <a href="#" id="welcome">
          Welcome text ...              
           </a>
        </li>
            <li><a href="#" id="kitchen">Kitchen</a></li>
            <li><a href="#" id="programma" > Programma</a></li>
            <li><a href="#" id="foodart" >foodart text</a></li>
   </ul>

quelqu'un avec bootstrap experience peut-il nous aider, si nous pouvons rendre ce nav-pills pliable et réactif lorsque la taille est réduite comme nous pouvons le faire facilement avec les nav-bars?

merci d'avance

htmltwitter-bootstrapresponsive-designtwitter-bootstrap-3
21
Siavosh

Tout d'abord, vous devez inclure HTML pour le bouton de menu une fois que votre menu s'est effondré.

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
</div>

Ensuite, vous devez envelopper votre nav-pills dans un div contenant la classe d'effondrement de Bootstrap.

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav nav-pills head-menu">
        <input type="hidden" id="selected_menu_item" value="=$selectedMenuId; ?>" />                               
        <li><a href="#" id="welcome">Welcome text ...</a></li>
        <li><a href="#" id="kitchen">Kitchen</a></li>
        <li><a href="#" id="programma" > Programma</a></li>
        <li><a href="#" id="foodart" >foodart text</a></li>
    </ul>
</div>

Vous pouvez ensuite envelopper tout cela dans un conteneur de fluide et le Bootstrap navbar navbar-default avec role=navigation.

De plus, vous pouvez ajouter un peu de jQuery pour gérer "l'empilement" de votre menu lorsqu'il est réduit au lieu de rester horizontal. Pour ce faire, les événements Bootstrap pour l'effondrement de l'affichage/masquage feront l'affaire: show.bs.collapse et hide.bs.collapse.

//Stack menu when collapsed
$('#bs-example-navbar-collapse-1').on('show.bs.collapse', function() {
    $('.nav-pills').addClass('nav-stacked');
});

//Unstack menu when not collapsed
$('#bs-example-navbar-collapse-1').on('hide.bs.collapse', function() {
    $('.nav-pills').removeClass('nav-stacked');
});

Démonstration de travail ici

46
Tricky12

Une autre méthode à essayer consiste à définir navbar li à 100%:

@media (max-width: 768px) {
  #navbar li { width:100%; }
}
8
blah

Solution complète 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<style>
body {
    background-color: linen;
}

.nav {
  background-color :#722872;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar {
  background-color :#722872;
 }
</style>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav nav-pills navbar-right">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>

</body>
</html>


                          OR

Voir dans CodePen

3
Hitesh Sahu

@ Tricky12 a une bonne solution, je l'ai utilisé pour moi-même, je viens de changer la dernière partie.

//Unstack menu when not collapsed
$('#bs-example-navbar-collapse-1').on('hidden.bs.collapse', function() {
    $('.nav-pills').removeClass('nav-stacked');
});

La partie: hidden.bs.collapse se déclenche lorsque le menu est complètement fermé, tandis que hide.bs.collapse se déclenche lorsqu'il commence à se fermer.

si vous déclenchez la .removeClass('nav-stacked'); avant que le menu replié ne soit complètement fermé, le menu horizontal s'affichera pendant une fraction de seconde avant d'être complètement fermé.

J'espère que cela aidera quelqu'un.

3
Jinga Laurentiu

La classe justifiée par .nav de bootstrap se chargera de tout. Cela redimensionnera les liens dans les navigateurs plus larges que 768px. Plus petits que cela, les liens seront empilés. Il suffit de l'ajouter à l'élément et vous êtes prêt à partir.

<ul class="nav nav-pills head-menu nav-justified">

...[rest of your code stays the same]...

Ne répond pas à la question de savoir comment réduire les articles, je précise comment les empiler. Donc, ma réponse pourrait ne pas aider, mais je pense qu'elle y contribue, espérons-le.

0
dars