Выдвинутое меню, например, Twitter Bootstrap

Question

Я пытаюсь создать меню для смартфонов & планшетов, но когда я его создаю, он всегда переполняет содержимое моего сайта.

Эффект, который я хочу достичь, такой же, как у Twitter Bootstrap website. Когда вы открываете его с помощью смартфонов, вы можете нажать кнопку, а меню катится вниз и тянет содержимое веб-сайта.

Вот мой код:

<div class="dropdown"> 
    <button class="navbar-toggle hidden-lg collapsed" data-toggle="dropdown" data-target="navbar-header" type="button"> 
     <span class="glyphicon glyphicon-collapse-down"> 
     </span>      
    </button> 
    <div class="col-xs-12 dropdown-menu navbar-inverse" role="menu"> 
     <a class ="divider" href="#">Accueil</a><br /> 
     <a class ="divider" href="#">Centres d'Interets</a><br /> 
     <a class ="divider" href="#">CV</a><br /> 
     <a class ="divider" href="#">Contact</a><br /> 
    </div> 
</div> 

Answer 1

Вы можете использовать пример из документации, в качестве начала:

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container"> 
    ... 
    </div> 
</nav> 

Вы можете найти его here.

Answer 2

Пробуйте приведенный ниже код. Предоставлено: http://bootswatch.com Настройка меню в соответствии с вашими требованиями

<div class="navbar navbar-default navbar-fixed-top"> 
      <div class="container"> 
      <div class="navbar-header"> 
       <a href="../" class="navbar-brand">Bootswatch</a> 
       <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
      </div> 
      <div class="navbar-collapse collapse" id="navbar-main"> 
       <ul class="nav navbar-nav"> 
       <li class="dropdown"> 
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a> 
        <ul class="dropdown-menu" aria-labelledby="themes"> 
        <li><a href="../default/">Default</a></li> 
        <li class="divider"></li> 

        </ul> 
       </li> 
       <li> 
        <a href="../help/">Help</a> 
       </li> 
       <li> 
        <a href="http://news.bootswatch.com">Blog</a> 
       </li> 
       <li class="dropdown"> 
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Download <span class="caret"></span></a> 
        <ul class="dropdown-menu" aria-labelledby="download"> 
        <li><a href="./bootstrap.min.css">bootstrap.min.css</a></li> 
        <li><a href="./bootstrap.css">bootstrap.css</a></li> 
        <li class="divider"></li> 
        <li><a href="./variables.less">variables.less</a></li> 
        <li><a href="./bootswatch.less">bootswatch.less</a></li> 
        <li class="divider"></li> 
        <li><a href="./_variables.scss">_variables.scss</a></li> 
        <li><a href="./_bootswatch.scss">_bootswatch.scss</a></li> 
        </ul> 
       </li> 
       </ul> 

       <ul class="nav navbar-nav navbar-right"> 
       <li><a href="http://builtwithbootstrap.com/" target="_blank">Built With Bootstrap</a></li> 
       <li><a href="https://wrapbootstrap.com/?ref=bsw" target="_blank">WrapBootstrap</a></li> 
       </ul> 

      </div> 
      </div> 
     </div> 

В приведенном выше коде,

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 

дает желаемый эффект при изменении размера окна в браузере или на маленьких экранах (мобильные телефоны и вкладки).