web-dev-qa-db-fra.com

Menu Bootstrap Mobile 100%

J'ai un très long menu mobile avec 4 éléments de menu, chacun de ces éléments ayant des menus déroulants, le premier menu déroulant est très long et lorsque je fais défiler ma navigation avec le premier menu déroulant ouvert, je ne peux pas accéder au dernier menu déroulant. dans mon menu, sauf si je ferme le premier menu déroulant, mais j'aimerais pouvoir accéder au dernier menu déroulant même si le premier menu déroulant est ouvert.

Voici le HTML

.navbar-collapse {
  height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/"><img src="~/Images/logo.png" class="img-responsive" /></a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a>
          <div class="dropdown-menu dropdown-communities" role="menu">
            <div class="row current-communities">
              <div class="col-md-4">
                <h4>Option</h4>
                <ul>
                  <li><a href="/Link/">Link</a></li>
                </ul>
              </div>
              <div class="col-md-4">
                <h4>Option</h4>
                <ul>
                  <li><a href="/Link/">Link</a></li>
                  <li><a href="/Link/">Link</a></li>
                  <li><a href="/Link/">Link</a></li>
                </ul>
              </div>
              <div class="col-md-4">
                <h4>Option</h4>
                <ul>
                  <li><a href="/Link/">Link</a></li>
                  <li><a href="/Link/">Link</a></li>
                  <li><a href="/Link/">Link</a></li>
                  <li><a href="/Link/">Link</a></li>
                  <li><a href="/Link/">Link</a></li>
                  <li><a href="/Link/">Link</a></li>
                </ul>
              </div>
            </div>
            <hr class="current-communities-hr" />
            <div class="row upcoming-communities">
              <div class="col-md-4">
                <h4>Option</h4>
                <ul>
                  <li><a href="/Link/">Link</a></li>
                </ul>
              </div>
              <div class="col-md-4">
                <h4>Option</h4>
                <ul>
                  <li><a href="/Link/">Link</a></li>
                </ul>
              </div>
              <div class="col-md-4">
                <h4>Option</h4>
                <ul>
                  <li><a href="/Link/">Link</a></li>
                </ul>
              </div>
            </div>
          </div>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

J'ai essayé ce qui suit:

.navbar-collapse {
    height: 100vh;
}

Mais je n'arrive toujours pas à accéder au dernier menu déroulant lorsque le premier est ouvert.

htmlcsstwitter-bootstrapcss3
6
user979331

Bootstrap place le positionnement absolu sur leur classe .dropdown-menu. Il suffit de le positionner relativement et vous devriez être en or. Voir la modification dans l'extrait de code. 

.dropdown-menu{
  position:relative;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<style>
  .navbar-collapse {
    height: calc(100vh - 50px);
  }
</style>


<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/"><img src="~/Images/logo.png" class="img-responsive" /></a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 1</a>
          <div class="dropdown-menu dropdown-communities" role="menu">
            <div class="row current-communities">
              <div class="col-md-4">
                <h4>Option</h4>
                <ul>
                  <li><a href="/Link/">Link</a></li>
                </ul>
              </div>
              <div class="col-md-4">
                <h4>Option</h4>
                <ul>
                  <li><a href="/Link/">Link</a></li>
                  <li><a href="/Link/">Link</a></li>
                  <li><a href="/Link/">Link</a></li>
                </ul>
              </div>
              <div class="col-md-4">
                <h4>Option</h4>
                <ul>
                  <li><a href="/Link/">Link</a></li>
                  <li><a href="/Link/">Link</a></li>
                  <li><a href="/Link/">Link</a></li>
                  <li><a href="/Link/">Link</a></li>
                  <li><a href="/Link/">Link</a></li>
                  <li><a href="/Link/">Link</a></li>
                </ul>
              </div>
            </div>
            <hr class="current-communities-hr" />
            <div class="row upcoming-communities">
              <div class="col-md-4">
                <h4>Option</h4>
                <ul>
                  <li><a href="/Link/">Link</a></li>
                </ul>
              </div>
              <div class="col-md-4">
                <h4>Option</h4>
                <ul>
                  <li><a href="/Link/">Link</a></li>
                </ul>
              </div>
              <div class="col-md-4">
                <h4>Option</h4>
                <ul>
                  <li><a href="/Link/">Link</a></li>
                </ul>
              </div>
            </div>
          </div>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 2</a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 3</a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 4</a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

2
ciammarino

Tout d'abord, navbar est un élément fixe, vous ne pouvez donc pas le faire défiler même s'il déborde dans l'élément body.

Maintenant, vous donnez height 100vh à .navbar-collapse

disons vh = 300px 

Maintenant, la hauteur de .navbar-collapse est 300px mais après l'avoir dépensée, navbar height est 350px (.navbar-header + .navbar-collapse height) et elle débordera de l'élément body dont la hauteur actuelle est 300px.

Maintenant, vous ne pouvez faire défiler que .navbar-collapse et non pas navbar, c’est pourquoi l’élément précédent se cache.

Vous devez réduire la hauteur de .navbar-collapse par 50px (hauteur de .navbar-header).

.navbar-collapse {
  height: calc(100vh - 50px);
}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<style>
  .navbar-collapse {
    height: calc(100vh - 50px);
  }
</style>


<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/"><img src="~/Images/logo.png" class="img-responsive" /></a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 1</a>
          <div class="dropdown-menu dropdown-communities" role="menu">
            <div class="row current-communities">
              <div class="col-md-4">
                <h4>Option</h4>
                <ul>
                  <li><a href="/Link/">Link</a></li>
                </ul>
              </div>
              <div class="col-md-4">
                <h4>Option</h4>
                <ul>
                  <li><a href="/Link/">Link</a></li>
                  <li><a href="/Link/">Link</a></li>
                  <li><a href="/Link/">Link</a></li>
                </ul>
              </div>
              <div class="col-md-4">
                <h4>Option</h4>
                <ul>
                  <li><a href="/Link/">Link</a></li>
                  <li><a href="/Link/">Link</a></li>
                  <li><a href="/Link/">Link</a></li>
                  <li><a href="/Link/">Link</a></li>
                  <li><a href="/Link/">Link</a></li>
                  <li><a href="/Link/">Link</a></li>
                </ul>
              </div>
            </div>
            <hr class="current-communities-hr" />
            <div class="row upcoming-communities">
              <div class="col-md-4">
                <h4>Option</h4>
                <ul>
                  <li><a href="/Link/">Link</a></li>
                </ul>
              </div>
              <div class="col-md-4">
                <h4>Option</h4>
                <ul>
                  <li><a href="/Link/">Link</a></li>
                </ul>
              </div>
              <div class="col-md-4">
                <h4>Option</h4>
                <ul>
                  <li><a href="/Link/">Link</a></li>
                </ul>
              </div>
            </div>
          </div>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 2</a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 3</a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 4</a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
            <li><a href="/Link/">Link</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

9
Abhishek Pandey

Votre problème se situe dans le sélecteur .navbar-collapse qui a défini le max-height sur 340px. Pour contourner ce problème, vous devez d’abord remplacer cette valeur à la hauteur souhaitée et ajouter !Important pour remplacer le style existant.

De plus, vous utilisez des colonnes dans votre menu, vous devez donc garder à l’esprit que cela brisera certains styles de bootstrap (comme le style du menu déroulant, par exemple). c'est parce que les sélecteurs ont été configurés dans une structure hiérarchique. Donc, tout ce qui sort de la structure de bootstrap doit être reconfiguré en votre faveur (ceci est également appliqué dans la plupart des frameworks CSS).

Voici le CodePen

J'ai appliqué 

.navbar-collapse {
  max-height: 90vh !Important;
  height: 90vh;
}

le max-height a été remplacé par 90% du vh sur n’importe quel appareil, ce qui garantit que le menu ne dépassera pas la hauteur de l’appareil. Comme vous le savez, la plupart des appareils intelligents ont une navigation par onglets intégrée et la barre d'adresse située en haut et en bas du navigateur Web. Donc, les 10% vont s'en occuper et faire apparaître le menu correctement. 

Ce code a été goûté sur mon iPhone 6 et cela fonctionne très bien. 

1
iSR5