2016-10-17 1 views
0

내가 만든 이런 내 웹 사이트 메뉴 :탐색 메뉴에서 ul li을 사용하지 않고 토글 메뉴로 div를 사용하면 어떻게 할 수 있습니까?

  <div class="container-fluid"> 
      <div class="row"> 
       <nav id="menu"> 
        <div class="col-sm-12 col-md-2 active-link"> 
         <div class="vertical-align" > 
          <img class="img-responsive" src="img/logo.png" alt="logo"> 
         </div> 

        </div> 
        <div class="col-sm-3 col-md-2 nonactive-link"> 
         <div class="vertical-align" > 
          <a href="#">MENU<br>ONE</a> 
         </div> 
        </div> 
        <div class="col-sm-3 col-md-2 nonactive-link"> 
         <div class="vertical-align" > 
          <a href="#">MENU<br>TWO</a> 
         </div> 
        </div> 
        <div class="col-sm-2 col-md-2 nonactive-link"> 
         <div class="vertical-align" > 
          <a href="#">MENU THREE</a> 
         </div> 
        </div> 
        <div class="col-sm-2 col-md-2 nonactive-link"> 
         <div class="vertical-align" > 
          <a href="#">MENU FOUR</a> 
         </div> 
        </div> 
        <div class="col-sm-2 col-md-2 nonactive-link"> 
         <div class="vertical-align" > 
          <a href="#">MENU FIVE</a> 
         </div> 
        </div> 
       </nav> 
      </div> 
     </div> 

난 그냥 사용 토글 메뉴를 achive 수있는 방법이 목록 (UL 리 ..) 인 부트 스트랩에서 원래의 탐색을 사용하지 않는 임 div와 col-xs-12?

어떻게 divs whit col 's를 사용하여 코드를 작성할 수 있습니까?

고마워요 :) 실제로 당신이 가장 상위 탐색 요소 <nav class="navbar navbar-default"> 일부 부트 스트랩 유틸리티 클래스를 필요로하고 메뉴를 추가 "세 줄"아이콘 HTML을 필요 탐색 메뉴를 만들기 위해

+0

토글 메뉴는 무엇을 의미합니까? 달성하고자하는 부트 스트랩 3 문서에서 정확한 구성 요소를 참조 할 수 있습니까? – Amir5000

+0

토글 메뉴, 작은 장치에만 나타나는 3 줄의 작은 버튼을 의미합니다! :) – Rodrigo

답변

0

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 

는 그런 다음 ID가 탐색 버튼 자체에 data-target 일치하는지 만들기로 실제 탐색의 래퍼로 <div class="collapse navbar-collapse" id="navbar-collapse">을 좀 더 유틸리티 클래스와 ID를 링크에 추가해야합니다. 이에

부트 스트랩 문서는

HERE이 또한 내가 원래 HTML과 함께 JSFIDDLE를 만들어가, 그 말이 있으면 알려 주시기 수정됩니다.

+0

예를 들어 주셔서 감사합니다! 지금 그것을 사용하여 메신저 : – Rodrigo

+0

다행 당신을 도울 수 있습니다. – Amir5000