携帯電話のメニューで「サンドイッチ」を「X」に変更する方法

Question

私はブートストラップやCSSやフロントエンドの人ではありません。私は二日運のオンラインヘルプを探すためにしようとして、私は次のナビゲーションバーがあります。

<nav class="navbar navbar-default navbar-captum navbar-static-top"> 
    <div class="container"> 
     <div class="navbar-header"> 

      <!-- Collapsed Hamburger --> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
        data-target="#app-navbar-collapse"> 
       <span class="sr-only">Toggle Navigation</span> 
       <span class="icon-bar top-bar"</span> 
       <span class="icon-bar middle-bar"></span> 
       <span class="icon-bar bottom-bar"></span> 
      </button> 

      <!-- Branding Image --> 
      <a class="navbar-brand" href="{{ url('/') }}"> 
       {{--<span class="company-name">{{ config('app.name', 'Laravel') }}</span>/--}} 
       <img src="{{asset('/public/images/logo-captum.png')}}" class="logo"> 
      </a> 
     </div> 

     <div class="collapse navbar-collapse" id="app-navbar-collapse"> 

      <!-- User Profile Navbar --> 
      <ul class="nav navbar-nav navbar-right navbar-user-profile"> 

       <!-- Authentication Links --> 
       @if (!session()->has('status')) 
        <li><a href="{{ route('login') }}" class="btn btn-default btn-login">Logga in</a></li> 

       @else 
        <li> 
         <a href="//captum.provideit.se/kundservice/" target="_blank"> 
          <i class="icon-custom icon-custom-message pull-left"></i> 
          Kontakta kundservice 
         </a> 
        </li> 

        <li> 
         <a href="{{ route('profile') }}"> 
          <i class="icon-custom icon-custom-lock pull-left"></i> 
          {{ $customer['firstName'].str_repeat('&nbsp;',1).$customer['lastName'] }} 
         </a> 
        </li> 
        <li> 
         <a href="{{ route('logout') }}" 
          class="btn btn-default btn-login" style="margin-left: 5px;" 
          onclick="event.preventDefault();document.getElementById('logout-form').submit();"> 
          Logga ut 
         </a> 

         <form id="logout-form" action="{{ route('logout') }}" method="POST" 
           style="display: none;"> 
          {{ csrf_field() }} 
         </form> 
        </li> 
       @endif 
      </ul> 


     </div> 

    </div> 
</nav> 

を私は携帯電話の画面に縮小するときだから私はこの

のようなサンドイッチメニューを取得することは任意のはあります基本的にはサンドイッチを 'X'に変換して、メニューにフルスクリーンのアイテムを表示させます。ここで

<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 

が働いている：私はあなただけglyphiconで

<span class="icon-bar top-bar"></span> 
<span class="icon-bar middle-bar"></span> 
<span class="icon-bar bottom-bar"></span> 

を交換することができます

Answer 1

任意の助けを得ることができれば

は非常に高く評価されるだろうブートストラップ3.3.7 navbarの例を使用している例： https://jsfiddle.net/ozjrhjtj/

Answer 2

プロジェクトにjqueryを使用している場合（このアニメーションなしでもこのアニメーションを実行できます）、ボタンにクラスを追加してcssでアニメーションを管理することで、この方法を試すことができます。

var button = document.getElementById('theButton'); 
 
button.addEventListener('click', function() { 
 
    button.classList.toggle('active'); // or whatever your active class is 
 
});

.navbar-toggle { 
 
    padding: 6px; 
 
} 
 

 
.navbar-toggle .icon-bar{ 
 
    width: 28px; 
 
    height: 2px; 
 
    background: gray; 
 
    margin-bottom: 6px; 
 
    display: block; 
 
    transition-duration: 0.5s; 
 
    opacity: 1; 
 
} 
 

 
.navbar-toggle .icon-bar:last-of-type{ 
 
    margin-bottom: 0; 
 
} 
 

 
.navbar-toggle.active .icon-bar.top-bar{ 
 
    transform: rotate(45deg) translate(6px, 6px) 
 
} 
 
.navbar-toggle.active .icon-bar.middle-bar{ 
 
    opacity: 0; 
 
} 
 
.navbar-toggle.active .icon-bar.bottom-bar{ 
 
    transform: rotate(-45deg) translate(5px, -5px) 
 
}

<button id="theButton" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse"> 
 
       <span class="icon-bar top-bar"></span> 
 
       <span class="icon-bar middle-bar"></span> 
 
       <span class="icon-bar bottom-bar"></span> 
 
      </button>

UPDATE
私は、スクリプトからのjQueryを取り除き、純粋なJavaScriptでクラスを切り替えます。

Answer 3

少なくとも、問題のボタンについては、CSSを提供していないと、誰もあなたの特定の問題を手伝うことができないと思います。

ただし、Jonathan Suh's ready-made "hamburger" solutionを使用することをおすすめします。 1つのCSSファイルを含めるだけで、アニメーションを選択し、is-activeクラスを切り替えるための簡単なJavaScriptを書くだけです。

$('.hamburger').click(function(){ 
 
\t $(this).toggleClass("is-active"); 
 
    // Toggle your menu here 
 
    // $('#menu').toggleClass('active'); 
 
});

button { 
 
    outline: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/hamburgers/0.9.1/hamburgers.min.css" rel="stylesheet"/> 
 

 
<button class="hamburger hamburger--collapse" type="button"> 
 
    <span class="hamburger-box"> 
 
    <span class="hamburger-inner"></span> 
 
    </span> 
 
</button>