ブートストラップのハンバーガーメニューでUIを更新する方法を知りたい

ハンバーガーのドロップダウンをスライドから右にスライドさせて変更し、同じ要素を使用する方法が見つかっています。ブレークポイントで1つのメニューを別のメニューに置き換えるサンプルを見たことがありますが、両方を達成するために1つのメニューを使用したいと考えています。ここに基本コードがあります。ブートストラップのハンバーガーメニューでUIを更新する方法を知りたい

<!-- Fixed navbar --> 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 

      </button> <a class="navbar-brand" href="#">Bootstrap theme</a> 

     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Home</a> 

       </li> 
       <li><a href="#about">About</a> 

       </li> 
       <li><a href="#contact">Contact</a> 

       </li> 
       <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 

        <ul class="dropdown-menu" role="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> 
      </ul> 
     </div> 
     <!--/.nav-collapse --> 
    </div> 
</nav>

私はこれを解決するためにあらゆるところを探しています。私がメニューを交換することができない理由は、メニュー項目が定期的に更新されなければならず、2つのスペースでそれをする必要がないからです。

https://fiddle.jshell.net/qw93eLy6/2/

出典

2016-09-01 riotgear

これは、あなたが:)探しているものかもしれないことを含んで - http://www.jqueryscript.net/menu/Off-canvas-Push-Menu- jQuery-Plugin-For-Bootstrap.html – RasmusGlenvig

Hmmm。これをjsfiddleで動作させようとすると、そうではありません。私は何が不足しているのだろうか？ https://fiddle.jshell.net/qw93eLy6/8/ – riotgear

このようにスライドしたいですか？ http://www.codeply.com/go/p6JYGuVQ3y – ZimSystem

私は私の地元のその作業は細かいことを確認してください、とあなたは、このヘッドファイルを含める必要があり、それを確認してください。あなたはjqueryの、CSSファイルを持っている場合は、そのファイル

<head> 
<script src="http://code.jquery.com/jquery.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css"> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css"> 
</head> 


<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">Bootstrap theme <span class="sr-only">Toggle navigation</span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 

     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Home</a> 

       </li> 
       <li><a href="#about">About</a> 

       </li> 
       <li><a href="#contact">Contact</a> 

       </li> 
       <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 

        <ul class="dropdown-menu" role="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> 
      </ul> 
     </div> 
     <!--/.nav-collapse --> 
    </div> 
</nav>

出典

2016-09-01 12:34:39 rubin

私はあなたにルビンを試しましたが、スライドアウトは機能していません。 https://jsfiddle.net/galnova/ha2o1xsj/私はブートストラップ4アルファを使うことができませんので、3.3.7に切り替えました。スライドアウトを動作させる方法に関するアイデアはありますか？ – riotgear

ブートストラップのハンバーガーメニューでUIを更新する方法を知りたい

答えて

関連する問題