navbar toggle animation funktioniert nicht

Question

Hallo, ich habe diesen Code, der den Toggle animiert, wenn er angeklickt und nicht geklickt wird. Ich habe den Code genau so kopiert wie er sagt aber keine Animation Was mache ich falsch? Ich habe die CSS usw. hinzugefügt

Sein als externe PHP-Datei geladen, aber der Code ist:

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

und die CSS ist: -

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

sicher sein einfaches und im nur fehlt etwas dummes! danke

Answer 1

Sie vermissen Javascript. Das Umschalten der .collapsed Klasse kann nicht mit HTML + CSS allein geschehen.