makes nav-pills collapsable just like nav-bar in b

2020-02-02 10:37发布

站内问答 / 后端开发
639 6 5

we are developing an application and we are using twiiter bootstrap 3 we have created a navigation bar with nav-pills

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

can anyone with bootstrap experience help us, if we can make this nav-pills collapsible and responsive when size is reduced just as we can do easily with nav-bars?

thanks in advance

6条回答
【Aperson】
2楼-- · 2020-02-02 10:44

Complete Solution 

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

See it in CodePan

查看更多
0人赞 添加讨论(0) 举报
Melony?
3楼-- · 2020-02-02 10:44

@Tricky12 has a good solution, i used for myself, just changed the last part.

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

The part: hidden.bs.collapse trigger when the menu is fully closed, while hide.bs.collapse trigger when it starting to close.

if you trigger the .removeClass('nav-stacked'); before collapsed menu it fully closed, will show the horizontal menu for a fraction of a second before is fully closed.

Hope this will help someone.

查看更多
0人赞 添加讨论(0) 举报
甜甜的少女心
4楼-- · 2020-02-02 10:49

I've tried to wrap navbar-pills into navbar-collapse but it was looking awful, because it has different indents. So I made two different navbars using classes visible-xs (for navbar-collapse) and hidden-xs (for nav-pills).

查看更多
0人赞 添加讨论(0) 举报
我命由我不由天
5楼-- · 2020-02-02 10:57

The .nav-justified class of bootstrap will take care of everything. This will resize the links in browsers wider than 768px. Smaller than that, the links will be stacked. Simply add it to the element and you are good to go. 

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

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

Doesn't address the question how to collapse the items, I am stating how to stack them. So my answer might not help, but I think it contributes, hopefully.

查看更多
0人赞 添加讨论(0) 举报
虎瘦雄心在
6楼-- · 2020-02-02 11:01

First, you need to include HTML for the menu button once your menu collapses.

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

Then, you need to wrap your nav-pills in a div containing Bootstrap's collapse class.

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

You can then wrap all of this in a fluid-container and Bootstrap's navbar navbar-default with role=navigation.

Additionally, you could add a bit of jQuery to handle "stacking" your menu when it is collapsed instead of remaining horizontal. To do this, Bootstrap's events for show/hide collapse will do the trick: show.bs.collapse and 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');
});

Working Demo Here

查看更多
0人赞 添加讨论(0) 举报
贪生不怕死
7楼-- · 2020-02-02 11:04

Another method to try is to set navbar li to 100%:

@media (max-width: 768px) {
  #navbar li { width:100%; }
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)