Как сделать выпадающее меню Bootstrap всегда функционировать как мобильная версия?

Question

Я пытаюсь сделать вертикальную панель навигации похожа на наброски, используя Bootstrap, как:

• о
• проектов (выпадающее меню)
  • проект 1
  • проекта 2
  • проект 3
• другие

У меня есть вертикальная навигационная панель, работающая благодаря (http://www.jonathanbriehl.com/2014/01/17/vertical-menu-for-bootstrap-3/).

Однако, это выпадающее меню, которое я пытаюсь изменить. Вместо того чтобы иметь выпадающее меню «pop out», я хочу щелкнуть по «проектам» для расширения и показать следующий уровень контура с номерами проектов.

Он уже делает это для небольших мобильных экранов; выпадающее меню расширяется в меню с отступом. Я хочу, чтобы он делал то же самое для больших экранов.

Обратите внимание: я не пытаюсь, чтобы все меню навигации всегда рушилось, но выпадающее меню расширялось и не выходило.

Мне комфортно с базовым бутстрапом и в конечном итоге будет настраивать CSS. I думаю что я хочу сделать, нужно настроить Javascript. Я только хочу изменить выпадающее меню, а не весь навигатор.

Это соответствующий HTML-код:

<div class="row"> 
     <div class="col-sm-3"> 
     <div class="sidebar-nav"> 

      <div class="navbar navbar-default" role="navigation"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
       <span class="visible-xs navbar-brand">small screen nav</span> 
      </div> 
      <div class="navbar-collapse collapse sidebar-navbar-collapse"> 
       <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">About</a></li> 
       <li><a href="#">Projects</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
        <li><a href="#">Internships</a></li> 
        <li><a href="#">Coursework</a></li> 
        <li><a href="#">Resume</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Resume</a></li> 
       <li><a href="#">Contact</a></li> 
       </ul> 
      </div><!--/.nav-collapse --> 
      </div> 
     </div> 
     </div> 
     <div class="col-sm-9"> 
     Main content goes here 
     </div> 
    </div> 

Спасибо. (Я бы опубликовал фотографии, но я новый пользователь и очень новичок, поэтому трудно найти ответы на вопросы, которые я могу ответить).

Answer 1

Я думаю, что это то, чего вы пытаетесь достичь.

.navbar-default .navbar-nav li { 
 
    display: inline; 
 
    float: none; 
 
} 
 
@media (min-width: 768px) { 
 
    .navbar.navbar-default { 
 
    background: transparent; 
 
    border: none; 
 
    border-right: 1px solid #f5f5f5; 
 
    } 
 
    .navbar-default .navbar-nav .open .dropdown-menu { 
 
    position: static; 
 
    float: none; 
 
    width: auto; 
 
    margin-top: 0; 
 
    background-color: transparent; 
 
    border: 0; 
 
    -webkit-box-shadow: none; 
 
    box-shadow: none; 
 
    } 
 
    .navbar-default .navbar-nav .open .dropdown-menu .dropdown-header, 
 
    .navbar-default .navbar-nav .open .dropdown-menu>li>a { 
 
    padding: 5px 15px 5px 25px; 
 
    } 
 
    .navbar-default .navbar-nav .open .dropdown-menu>li>a { 
 
    line-height: 20px; 
 
    } 
 
    .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus, 
 
    .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover { 
 
    background-image: none; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12"> 
 
     <h1>Header</h1> 
 

 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-sm-4"> 
 
     <div class="sidebar-nav"> 
 
     <div class="navbar navbar-default" role="navigation"> 
 
      <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse"> <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 

 
      </button> <span class="visible-xs navbar-brand">Sidebar menu</span> 
 

 
      </div> 
 
      <div class="navbar-collapse collapse sidebar-navbar-collapse"> 
 
      <ul class="nav navbar-nav"> 
 
       <li class="active"><a href="#">Menu Item 1 with a really long name that may or may not wrap</a> 
 

 
       </li> 
 
       <li><a href="#">Menu Item 2</a> 
 

 
       </li> 
 
       <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
 

 
       <ul class="dropdown-menu"> 
 
        <li><a href="#">Action</a> 
 

 
        </li> 
 
        <li><a href="#">Another action</a> 
 

 
        </li> 
 
        <li><a href="#">Something else here</a> 
 

 
        </li> 
 
        <li class="divider"></li> 
 
        <li class="dropdown-header">Nav header</li> 
 
        <li><a href="#">Separated link</a> 
 

 
        </li> 
 
        <li><a href="#">One more separated link</a> 
 

 
        </li> 
 
       </ul> 
 
       </li> 
 
       <li><a href="#">Menu Item 4</a> 
 

 
       </li> 
 
       <li><a href="#">Reviews <span class="badge">1,118</span></a> 
 

 
       </li> 
 
      </ul> 
 
      </div> 
 
      <!--/.nav-collapse --> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-8"> 
 
     <p>This is a demo for the article orignally posted on my <a href="http://www.jonathanbriehl.com/2014/01/17/vertical-menu-for-bootstrap-3/" target="_blank">blog</a>. Enjoy.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui ante, dictum vitae eros ut, consectetur placerat mi. Nam malesuada ante et malesuada scelerisque. Donec id lorem eu mi laoreet dictum. Vivamus luctus vel diam sed mollis. Integer vitae 
 
     justo egestas, viverra nunc id, malesuada turpis. Pellentesque mattis est id interdum rutrum. Praesent luctus mi eget sapien ultrices pellentesque. Aliquam est urna, accumsan vel tempor sit amet, malesuada ut sapien.</p> 
 
     <p>Maecenas ac consequat orci. Aliquam dignissim, erat accumsan tempus venenatis, est lacus adipiscing sapien, non sagittis ligula est nec neque. Fusce malesuada velit vitae velit dapibus tincidunt. Pellentesque habitant morbi tristique senectus et 
 
     netus et malesuada fames ac turpis egestas. Sed dui massa, semper non vulputate ut, ornare et ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris arcu, posuere at porttitor et, consequat in 
 
     orci. Pellentesque et sem semper, adipiscing libero sit amet, suscipit purus. Nulla tincidunt, ante sed eleifend viverra, arcu dui commodo diam, sit amet commodo purus ante et nibh. Fusce interdum tortor eu lectus suscipit posuere ac ac enim. 
 
     Curabitur vel nisl sed metus tristique malesuada a nec tellus. Fusce nisl lectus, pharetra a lacus adipiscing, accumsan viverra dui. Sed bibendum arcu a accumsan malesuada.</p> 
 
     <p>Proin faucibus sed mauris vel pretium. Morbi ultrices sem quam, nec elementum nisl placerat vel. In ut sapien ut orci malesuada dapibus ac in sem. Quisque consectetur nisl nec pulvinar consequat. Ut mi dui, pellentesque quis aliquam et, posuere 
 
     id dolor. In pharetra risus ut felis sodales condimentum. Cras eleifend elit sit amet nisi sagittis, vitae sollicitudin sapien viverra. Fusce ac mattis diam, ornare molestie nibh. Ut non auctor justo, vel consequat justo. Etiam volutpat orci nec 
 
     ligula suscipit, non sollicitudin ipsum ullamcorper.</p> 
 
     <p>Donec tempor elit in ultrices faucibus. Praesent ut tincidunt arcu. Praesent ac venenatis nunc. Duis non tempor sem, in bibendum neque. Integer nec ante sed nisi commodo pulvinar. Nam vulputate lectus id eleifend facilisis. Interdum et malesuada 
 
     fames ac ante ipsum primis in faucibus. Ut arcu leo, rhoncus ac felis et, suscipit tincidunt urna. Sed auctor justo mauris, ut eleifend mauris volutpat a. Suspendisse non egestas ipsum. Phasellus est libero, semper a dui congue, accumsan ultrices 
 
     nibh. Sed convallis purus at neque scelerisque, nec vulputate sem interdum. Vivamus tempor faucibus ante, sit amet eleifend quam feugiat non. Ut id velit in diam volutpat vehicula ac vitae ante. Suspendisse aliquet accumsan ipsum.</p> 
 
     <p>Phasellus laoreet rhoncus fermentum. Aenean scelerisque urna in lorem pellentesque, in consequat velit placerat. Praesent id suscipit magna, quis dignissim elit. Vestibulum at sem pharetra, tempus enim a, adipiscing lacus. Aliquam erat volutpat. 
 
     Nullam lorem risus, ultricies a purus a, pretium condimentum est. Vestibulum pulvinar euismod est nec pharetra. Praesent vitae viverra ipsum. Nullam auctor nibh nec fermentum tincidunt. Mauris ullamcorper risus felis, nec fringilla justo lacinia 
 
     vel. Nam sollicitudin venenatis lectus hendrerit luctus. Vestibulum in lectus sit amet risus placerat fermentum eu vitae nisl. Cras massa nulla, accumsan at diam in, varius auctor massa. Vivamus bibendum, nulla id viverra convallis, sem sapien 
 
     eleifend erat, quis consequat neque ipsum vel est.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui ante, dictum vitae eros ut, consectetur placerat mi. Nam malesuada ante et malesuada scelerisque. Donec id lorem eu mi laoreet dictum. Vivamus luctus vel diam sed mollis. Integer vitae 
 
     justo egestas, viverra nunc id, malesuada turpis. Pellentesque mattis est id interdum rutrum. Praesent luctus mi eget sapien ultrices pellentesque. Aliquam est urna, accumsan vel tempor sit amet, malesuada ut sapien.</p> 
 
     <p>Maecenas ac consequat orci. Aliquam dignissim, erat accumsan tempus venenatis, est lacus adipiscing sapien, non sagittis ligula est nec neque. Fusce malesuada velit vitae velit dapibus tincidunt. Pellentesque habitant morbi tristique senectus et 
 
     netus et malesuada fames ac turpis egestas. Sed dui massa, semper non vulputate ut, ornare et ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris arcu, posuere at porttitor et, consequat in 
 
     orci. Pellentesque et sem semper, adipiscing libero sit amet, suscipit purus. Nulla tincidunt, ante sed eleifend viverra, arcu dui commodo diam, sit amet commodo purus ante et nibh. Fusce interdum tortor eu lectus suscipit posuere ac ac enim. 
 
     Curabitur vel nisl sed metus tristique malesuada a nec tellus. Fusce nisl lectus, pharetra a lacus adipiscing, accumsan viverra dui. Sed bibendum arcu a accumsan malesuada.</p> 
 
     <p>Proin faucibus sed mauris vel pretium. Morbi ultrices sem quam, nec elementum nisl placerat vel. In ut sapien ut orci malesuada dapibus ac in sem. Quisque consectetur nisl nec pulvinar consequat. Ut mi dui, pellentesque quis aliquam et, posuere 
 
     id dolor. In pharetra risus ut felis sodales condimentum. Cras eleifend elit sit amet nisi sagittis, vitae sollicitudin sapien viverra. Fusce ac mattis diam, ornare molestie nibh. Ut non auctor justo, vel consequat justo. Etiam volutpat orci nec 
 
     ligula suscipit, non sollicitudin ipsum ullamcorper.</p> 
 
     <p>Donec tempor elit in ultrices faucibus. Praesent ut tincidunt arcu. Praesent ac venenatis nunc. Duis non tempor sem, in bibendum neque. Integer nec ante sed nisi commodo pulvinar. Nam vulputate lectus id eleifend facilisis. Interdum et malesuada 
 
     fames ac ante ipsum primis in faucibus. Ut arcu leo, rhoncus ac felis et, suscipit tincidunt urna. Sed auctor justo mauris, ut eleifend mauris volutpat a. Suspendisse non egestas ipsum. Phasellus est libero, semper a dui congue, accumsan ultrices 
 
     nibh. Sed convallis purus at neque scelerisque, nec vulputate sem interdum. Vivamus tempor faucibus ante, sit amet eleifend quam feugiat non. Ut id velit in diam volutpat vehicula ac vitae ante. Suspendisse aliquet accumsan ipsum.</p> 
 
     <p>Phasellus laoreet rhoncus fermentum. Aenean scelerisque urna in lorem pellentesque, in consequat velit placerat. Praesent id suscipit magna, quis dignissim elit. Vestibulum at sem pharetra, tempus enim a, adipiscing lacus. Aliquam erat volutpat. 
 
     Nullam lorem risus, ultricies a purus a, pretium condimentum est. Vestibulum pulvinar euismod est nec pharetra. Praesent vitae viverra ipsum. Nullam auctor nibh nec fermentum tincidunt. Mauris ullamcorper risus felis, nec fringilla justo lacinia 
 
     vel. Nam sollicitudin venenatis lectus hendrerit luctus. Vestibulum in lectus sit amet risus placerat fermentum eu vitae nisl. Cras massa nulla, accumsan at diam in, varius auctor massa. Vivamus bibendum, nulla id viverra convallis, sem sapien 
 
     eleifend erat, quis consequat neque ipsum vel est.</p> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!-- /.container -->