부트 스트랩 탐색 용 모바일 메뉴

Question

약간 다른 탐색 형식이 있습니다. 구조는 다음과 같습니다.

<nav class="navbar navbar-fixed-left vertical-center" role="navigation"> 
    <ul class="nav navbar-nav"> 
     <li><a class="page-scroll" href="#hero"><span>H</span><span>O</span><span>M</span><span>E</span></a></li> 
     <li><a class="page-scroll" href="#portfolio"><span>W</span><span>O</span><span>R</span><span>K</span></a></li> 
     <li><a class="page-scroll" href="#about"><span>A</span><span>B</span><span>O</span><span>U</span><span>T</span></a></li> 
     <li><a class="page-scroll" href="#contact"><span>C</span><span>O</span><span>N</span><span>T</span><span>A</span><span>C</span><span>T</span></a></li> 
    </ul> 
</nav> 

그리고 CSS를 사용하여 페이지 측면에 수직으로 메뉴를 표시합니다. 설명하기 위해 JSFiddle을 설정했습니다.

제 질문은 모바일 장치의 표준 부트 스트랩 모바일 메뉴로 전환하는 방법과 관련이 있습니까?

감사합니다.

Answer 1

이와 비슷한 기능이 있습니까? Pnkr

 <nav id="mainNav" class="navbar navbar-fixed-left vertical-center"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navCollapsed"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
       </div> 
       <div class="collapse navbar-collapse" id="navCollapsed"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li><a class="page-scroll" href="#hero"><span>H</span><span>O</span><span>M</span><span>E</span></a></li> 
         <li><a class="page-scroll" href="#portfolio"><span>W</span><span>O</span><span>R</span><span>K</span></a></li> 
         <li><a class="page-scroll" href="#about"><span>A</span><span>B</span><span>O</span><span>U</span><span>T</span></a></li> 
         <li><a class="page-scroll" href="#contact"><span>C</span><span>O</span><span>N</span><span>T</span><span>A</span><span>C</span><span>T</span></a></li> 
        </ul> 
       </div> 
      </div> 
     </nav> 

추가에게 네비게이션 바에 중단 점에 도달했을 때 표시됩니다 메뉴가 붕괴 될 때의 버튼, . 그런 다음이 버튼 아래에 목록 항목이 추가됩니다.

미디어 쿼리를 사용하여 스타일을 전환하고 탐색 모음의 수직 정렬을 제거합니다.