navbar toggle анимация не работает

Question

Привет У меня есть этот код, который оживляет переключатель при нажатии и отключении. Я скопировал код точно так, как он говорит, но без анимации. Что я делаю неправильно? Я добавил CSS и т.д.

нагруженном как внешний файл PHP, но код:

<nav class = 'navbar navbar-default'> 
<div class = 'navbar-header'> 
<button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#example-navbar-collapse' aria-expanded='false' aria-controls='navbar'> 
    <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><a class = 'navbar-brand' href = '#'>SITENAME</a></div> 
<div class = 'collapse navbar-collapse' id = 'example-navbar-collapse'> 
    <ul class='nav navbar-nav navbar-nav'> 
     <li class='non-active'><a href='#'>About</a></li> 
    </ul> 
    <ul class='nav navbar-nav navbar-nav'> 
     <li class='non-active'><a href='#'>Get bids</a></li> 
    </ul> 
    <ul class='nav navbar-nav navbar-nav'> 
     <li class='non-active'><a href='#'>Register company</a></li> 
    </ul> 
    <ul class='nav navbar-nav navbar-nav'> 
     <li class='non-active'><a href='#'>Help</a></li> 
    </ul> 
    <ul class='nav navbar-nav navbar-nav'> 
     <li class='non-active'><a href='#'>Contact</a></li> 
    </ul> 
    <ul class='nav navbar-nav navbar-right'> 
     <li><a href='#'><span class='glyphicon glyphicon-user'></span> Login</a></li> 
    </ul> 
</div> 
</nav>` 

и КСС: -

.navbar-toggle { 
    border: none; 
    background: transparent !important; 

    &:hover { 
    background: transparent !important; 
    } 

    .icon-bar { 
    width: 22px; 
    transition: all 0.2s; 
    } 
    .top-bar { 
    transform: rotate(45deg); 
    transform-origin: 10% 10%; 
    } 
    .middle-bar { 
    opacity: 0; 
    } 
    .bottom-bar { 
    transform: rotate(-45deg); 
    transform-origin: 10% 90%; 
    } 
} 

.navbar-toggle.collapsed { 
    .top-bar { 
    transform: rotate(0); 
    } 
    .middle-bar { 
    opacity: 1; 
    } 
    .bottom-bar { 
    transform: rotate(0); 
    } 
} 

Конечно его простой и им просто не хватает что-то глупое! thankx

Answer 1

Вам не хватает Javascript. Переключение класса .collapsed не может происходить только с HTML + CSS.