11/16 44-2 [BS] Navs

Nav이거 탭같은거 !! 처음에 nav만 적용하면 그냥 링크태그랑 크게 다른게 없어 보이지만

점점 탭스러워지게 진화시킬거얌 !!

 

1.Nav Menus  진짜 기본 딱 nav만 적용한거

        <h2>Nav Menus</h2>
        <ul class="nav">
            <li class="nav-item">
              <a class="nav-link text-dark" href="#">Link</a> <!--글자색변경도가능--->
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#">Disabled</a>  <!--비활성화-->
            </li>
        </ul>

링크랑 크게 다른게 없어보임

 

2. Aligned Nav   :  justify-content-center를 이용해서 정렬이 가능!! 

그리드이용해서 가운데/오른쪽 정렬 비교 !!

         <h2>Aligned Nav</h2>
         <div class="row">
            <div class="col bg-danger">
                <ul class="nav justify-content-center">
                    <li class="nav-item">
                      <a class="nav-link text-dark" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link disabled" href="#">Disabled</a>
                    </li>
                  </ul>
            </div>
            <div class="col bg-warning">
                <ul class="nav justify-content-end">
                    <li class="nav-item">
                      <a class="nav-link text-dark" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link disabled" href="#">Disabled</a>
                    </li>
                  </ul>
            </div>
         </div>

 

3.Vertical Nav  : 수직으로 정렬 시키기  ul태그에 flex-column 적용

          <h2>Vertical Nav</h2>
          <ul class="nav flex-column">
            <li class="nav-item">
              <a class="nav-link text-dark" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#">Disabled</a>
            </li>
          </ul>

 

4.Tabs, Pills, Justified Tabs/pills

순서대로 :  탭모양 추가 -  동글동글모양탭+활성화메뉴표시 - 동일한 크기로 부모영역 다 차지하는 탭

         <h2>Tabs, Pills, Justified Tabs/pills</h2>
          <!-- 그리드로 비교 !! md이상은 3분할, sm은2분할, sm 미만은 세로배치  -->
          <div class="row">
             <div class="col-sm-6 col-md-4">
                <ul class="nav nav-tabs"><!--nav-tabs추가-->
                    <li class="nav-item">
                      <a class="nav-link active" href="#">Active</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link disabled" href="#">Disabled</a>
                    </li>
                </ul>
             </div>
             <div class="col-sm-6 col-md-4">
                <ul class="nav nav-pills"><!--nav-pills추가-->
                    <li class="nav-item">
                      <a class="nav-link active" href="#">Active</a>
                    </li>                
                    <li class="nav-item">
                      <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link disabled" href="#">Disabled</a>
                    </li>
                </ul>
             </div>
             <div class="col-sm col-md-4">  
                <!-- nav-justified추가, 동일한 크기로 부모영역을 다 채움 !-->
                <ul class="nav nav-pills nav-justified ">
                    <li class="nav-item">
                      <a class="nav-link active" href="#">Active</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link disabled" href="#">Disabled</a>
                    </li>
                </ul>
             </div>
          </div>

 

5.Pills/tabs with Dropdown,Toggleable/Dynamic Tabs/Pills

Pills/tabs with Dropdown : 텝에다 dropdown(더보기)기능 추가, 해당하는 li에 dropdown추가하고 li태그안에 div와a 태그로 메뉴들 넣어준다 ! 

Toggleable/Dynamic Tabs/Pills : 텝 클릭 시 내용보기,  

     li태그안에 a태그 속성으로 data-toggle="tab"추가 ! 

     ul 태그 밑에 각각 tab 안에 들어갈 내용들을 div로 감싸서 넣는다.

     tab의 href="#home" 과 내용의  id="home"으로 바인딩 !!

          <h2>Pills/tabs with Dropdown,Toggleable/Dynamic Tabs/Pills</h2>
          <div class="row">
              <div class="col-sm">
                <ul class="nav nav-pills">
                    <li class="nav-item">
                      <a class="nav-link active" href="#">Active</a>
                    </li>
                    <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
                      <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Link 1</a>
                        <a class="dropdown-item" href="#">Link 2</a>
                        <a class="dropdown-item" href="#">Link 3</a>
                      </div>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link disabled" href="#">Disabled</a>
                    </li>
                  </ul>
              </div>
              
               <!--- Toggleable/Dynamic Tabs/Pills---------->
              <div class="col-sm">
                  <ul class="nav nav-tabs">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
                    </li>
                  </ul>
                  <!-------- tab안에 넣는 내용들 -------->
                  <div class="tab-content">
                      <div id="home" class="container tab-pane active"><br>
                         <h3>HOME</h3>
                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                      </div>
                      <div id="menu1" class="container tab-pane fade"><br>
                         <h3>Menu 1</h3>
                         <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                       </div>
                       <div id="menu2" class="container tab-pane fade"><br>
                         <h3>Menu 2</h3>
                         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                       </div>
                  </div>
              </div>
          </div>

 

6. 자바스크립트로 구현하기

위의 코드에서  data-toggle="tab" 를 제거하고 그 기능을 자바스크립트로 제어하기 !!!

          <ul class="nav nav-tabs" id="nav-tabs">  <!-- id="nav-tabs" 요거 추가한거 CSS선택자 쉽게 지정하려고 !!!-->
            <li class="nav-item">
              <a class="nav-link active" href="#home_">Home</a>  <!--위에거와의 차이는 data-toggle="tab" 의 유무 이거임 !!-->
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#menu_1">Menu 1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#menu_2">Menu 2</a>
            </li>
          </ul>
          <div class="tab-content">
            <div id="home_" class="container tab-pane active"><br>
              <h3>HOME</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            <div id="menu_1" class="container tab-pane fade"><br>
              <h3>Menu 1</h3>
              <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div id="menu_2" class="container tab-pane fade"><br>
              <h3>Menu 2</h3>
              <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
            </div>
          </div>
          
          <!-----  JQuery 이용 !!------->
          <script>
              $("#nav-tabs a").click(function(){
                    $(this).tab('show');
              });
          </script>

해보기!

Navs.html

0.01MB