it-roy-ru.com

Bootstrap Мобильное меню 100%

У меня очень длинное мобильное меню с 4 пунктами меню, каждый из которых имеет выпадающие меню, первое выпадающее меню очень длинное, и когда я прокручиваю навигацию с открытым первым раскрывающимся списком, я не могу добраться до последнего выпадающего меню. в моем меню, если я не закрою первый раскрывающийся список, но я бы хотел иметь возможность перейти к последнему раскрывающемуся списку, даже если первый раскрывающийся список открыт.

Вот 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>

Я пробовал следующее:

.navbar-collapse {
    height: 100vh;
}

Но я все еще не могу добраться до последнего выпадающего списка, когда первый открыт.

6
user979331

Bootstrap устанавливает абсолютное позиционирование в своем классе .dropdown-menu. Просто поместите это относительно, и вы должны быть золотым. Смотрите модификацию во фрагменте. 

.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

Прежде всего, navbar является фиксированным элементом, поэтому вы не можете прокрутить его, даже если он переполнен в элементе body.

Теперь вы задаете высоту от 100vh до .navbar-collapse

скажем vh = 300px 

Теперь высота .navbar-collapse равна 300px, но после ее увеличения высота navbar равна 350px (.navbar-header + .navbar-collapse height), и она переполнит элемент body, текущая высота которого 300px.

Теперь вы можете прокручивать только .navbar-collapse, а не navbar, поэтому четвертый элемент скрывается.

Вам нужно уменьшить высоту .navbar-collapse на 50px (высоту .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

Ваша проблема находится в селекторе .navbar-collapse, который установил max-height в 340px. Чтобы обойти это, вам нужно сначала переопределить это по вашему желанию высоты и добавить !Important, чтобы переопределить существующий стиль.

Кроме того, вы используете столбцы внутри своего меню, поэтому вам нужно помнить, что это нарушит некоторые стили начальной загрузки (например, стиль dropmenu). это потому, что селекторы были настроены в иерархической структуре. Таким образом, все что угодно из структуры начальной загрузки должно быть перенастроено в вашу пользу (это также применяется в большинстве CSS-фреймворков).

Вот CodePen

Я применил 

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

max-height был переопределен с 90% от vh на любом устройстве, что гарантирует, что меню не будет превышать высоту устройства. Как вы знаете, большинство интеллектуальных устройств имеет встроенную навигацию по вкладкам и адресную строку, расположенную сверху и снизу веб-браузера. Таким образом, 10% позаботятся об этом и заставят меню появиться правильно. 

Этот код был опробован на моем iPhone 6, и он прекрасно работает. 

1
iSR5