Подтвердить что ты не робот

Делает Nav-таблетки разворачиваемыми так же, как nav-bar в бутстрапе

мы разрабатываем приложение, и мы используем twiiter bootstrap 3 мы создали навигационную панель с навигационными таблетками

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

Может ли кто-нибудь с опытом начальной загрузки помочь нам, если мы сможем сделать этот нав-таблеток разборчивым и отзывчивым, когда размер будет уменьшен, как легко справиться с навигационными барами?

заблаговременно

4b9b3361

ОТВЕТЫ

Ответ 1

Во-первых, вам нужно включить HTML для кнопки меню, как только ваше меню рухнет.

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

Затем вам нужно обернуть ваш nav-pills в div, содержащий класс свертывания 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>

Затем вы можете обернуть все это в контейнер с жидкостью и Bootstrap navbar navbar-default с помощью role=navigation.

Кроме того, вы можете добавить немного jQuery для обработки "укладки" вашего меню, когда оно свернуто вместо горизонтального. Чтобы сделать это, события Bootstrap для краха show/hide сделают трюк: show.bs.collapse и 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');
});

Рабочий демонстрационный пример здесь

Ответ 2

Другой способ попробовать - установить navbar li в 100%:

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

Ответ 3

Полное решение

<!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

Посмотрите на CodePan

Ответ 4

@Tricky12 имеет хорошее решение, я использовал для себя, просто изменил последнюю часть.

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

Часть: hidden.bs.collapse триггер, когда меню полностью закрыто, а hide.bs.collapse запускается, когда он начинает закрываться.

если вы запустили .removeClass('nav-stacked'); перед закрытым меню, полностью закрытым, покажет горизонтальное меню в течение секунды, прежде чем будет полностью закрыто.

Надеюсь, это поможет кому-то.

Ответ 5

Обоснованный класс bootstrap будет заботиться обо всем. Это изменит размеры ссылок в браузерах шириной более 768 пикселей. Меньше этого, ссылки будут сложены. Просто добавьте его в элемент, и вы хорошо пойдете.

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

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

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

Ответ 6

Я попытался обернуть navbar-pills в navbar-collapse, но он выглядел ужасно, потому что у него разные отступы. Поэтому я сделал два разных навигатора, используя классы visible-xs (для navbar-collapse) и hidden-xs (для навигационных таблеток).