모바일 웹에서 햄버거 메뉴 단추를 만드는 방법은 무엇입니까?

Question

모바일 웹 내부의 탐색 표시 줄에 햄버거 메뉴 단추를 만들려고합니다. 모바일 웹을 구축 한 것은 이번이 처음입니다. 그리고이 코드는 멋진 햄버거 메뉴 대신 거대한 정사각형 버튼만을 보여줍니다. 도와주세요.

<nav class="navbar-static-top"> 
<div class="container-fluid"> 
    <div class="navbar-header"> 
    <a class="navbar-brand ui-link" onclick="window.location.href='/'"href</a> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#popup"> 
     <span class="text">Menu</span> 
     <span class="icon-bars"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </span> 
    </button> 
    </div> 
</div> 
</nav> 

Answer 1

나는 당신이 달성하려고하는 것이 확실치 않지만, "햄버거 메뉴"에 빠져있는 것은 "막대"의 색입니다.

예를 들어 요소에 background-color을 추가하면 햄버거 메뉴가 표시됩니다.

.icon-bar { 
    background-color: black; 
} 

JSFiddle