web-dev-qa-db-ja.com

bootstrapのnav-barのようにnav-pillを折りたたみ可能にします

私たちはアプリケーションを開発していて、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>

bootstrap=経験のある人なら、nav-barで簡単にできるようにサイズを縮小したときにこのnav-pillsを折りたたむことができ、応答できるようにできたら、助けてくれますか？

前もって感謝します

htmltwitter-bootstrapresponsive-designtwitter-bootstrap-3
21
Siavosh

まず、メニューが折りたたまれたら、メニューボタンに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>

次に、Bootstrapのcollapseクラスを含むdivでnav-pillsをラップする必要があります。

<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.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');
});

実際のデモはこちら

46
Tricky12

試すもう1つの方法は、navbar liから100%：

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

完全なソリューション

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

参照してくださいCodePen

3
Hitesh Sahu

@ Tricky12には良い解決策があります。私は自分で使用しましたが、最後の部分を変更しました。

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

Part：hidden.bs.collapseは、メニューが完全に閉じられたときにトリガーされ、hide.bs.collapseは、閉じ始めたときにトリガーされます。

折りたたみメニューが完全に閉じる前に.removeClass('nav-stacked');をトリガーすると、完全に閉じる前にほんの一瞬水平メニューが表示されます。

これが誰かを助けることを願っています。

3
Jinga Laurentiu

.nav-justifiedクラスのbootstrapはすべてを処理します。これにより、768pxよりも幅の広いブラウザーのリンクのサイズが変更されます。それよりも小さい場合、リンクはスタックされます。そして、あなたは行ってもいいです。

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

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

アイテムをどのように折りたたむかという質問には対応していませんが、アイテムを積み重ねる方法について述べています。したがって、私の答えは役に立たないかもしれませんが、うまくいけば、それが貢献すると思います。

0
dars