Bootstrap 3

[basic] BS3 - Dropdown (BS드롭다운메뉴) ★ + Dropup (BS드롭업메뉴)

홈짱 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2,855

Dropdown 클래스 

 

.dropdown (드롭다운 메뉴 표시)

.dropdown-menu (드롭다운메뉴 위치 왼쪽)

.dropdown-menu-right (드롭다운메뉴 위치 오른쪽)

.dropdown-header (드롭다운 메뉴에 헤더 추가)

.dropup (드롭업메뉴)

.active (현재위치)

.disabled (활성화)

.divider (구분선)

 

 

 

Dropdown Basic (기본) 

 

<div class="dropdown">

    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">

     코딩언어 <span class="caret"></span></button>

    <ul class="dropdown-menu">

        <li><a href="#">HTML</a></li>

        <li><a href="#">CSS</a></li>

        <li><a href="#">JavaScript</a></li>

    </ul>

</div>

 

결과보기

 

Dropdown Divider (구분선)

 

<div class="dropdown">

    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">

    코딩언어 <span class="caret"></span></button>

    <ul class="dropdown-menu">

      <li><a href="#">HTML</a></li>

      <li><a href="#">CSS</a></li>

      <li><a href="#">JavaScript</a></li>

      <li class="divider"></li>

      <li><a href="#">홈짱닷컴</a></li>

    </ul>

</div>


 

Dropdown Header (구분제목)

 

<div class="dropdown">

    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">

    코딩언어  <span class="caret"></span></button>

    <ul class="dropdown-menu">

      <li class="dropdown-header">코딩언어</li>

      <li><a href="#">HTML</a></li>

      <li><a href="#">CSS</a></li>

      <li><a href="#">JavaScript</a></li>

      <li class="divider"></li>

      <li class="dropdown-header">사이트소개</li>

      <li><a href="#">홈짱닷컴</a></li>

    </ul>

</div>

 

 

Dropdown Active/Disabled (현재위치/비활성화)

 

<div class="dropdown">

    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">코딩언어 <span class="caret"></span></button>

    <ul class="dropdown-menu">

      <li><a href="#">HTML</a></li>

      <li class="disabled"><a href="#">CSS</a></li>

      <li class="active"><a href="#">JS</a></li>

      <li><a href="#">홈짱닷컴</a></li>

    </ul>

</div>

 

 

Dropdown Position (드롭위치 오른쪽)

 

<div class="dropdown">

    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">코딩언어 <span class="caret"></span></button>

    <ul class="dropdown-menu dropdown-menu-right">

        <li><a href="#">HTML</a></li>

        <li><a href="#">CSS</a></li>

        <li><a href="#">JavaScript</a></li>

        <li class="divider"></li>

        <li><a href="#">홈짱닷컴</a></li>

    </ul>

</div>

 

예제보기

 

Dropdown 위로 - DropUP (드롭업)

 

<div class="dropup">

    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">코딩언어 <span class="caret"></span></button>

    <ul class="dropdown-menu">

        <li><a href="#">HTML</a></li>

        <li><a href="#">CSS</a></li>

        <li><a href="#">JavaScript</a></li>

        <li class="divider"></li>

        <li><a href="#">홈짱닷컴</a></li>

    </ul>

</div>

 

예제보기

 

Dropdown Accessibility (접근성)

role과 aria-* 속성 추가 : 스크린리더 사용자의 접근성 향상.

 

<div class="dropdown">

    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">코딩언어 <span class="caret"></span></button>

    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">

        <li role="presentation"><a role="menuitem" href="#">HTML</a></li>

        <li role="presentation"><a role="menuitem" href="#">CSS</a></li>

        <li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>

        <li role="presentation" class="divider"></li>

        <li role="presentation"><a role="menuitem" href="#">홈짱닷컴</a></li>

    </ul>

</div>

 

예제보기


Dropbox 방법1 - data-* 속성 이용

 

<a href="#" class="dropdown-toggle" data-toggle="dropdown">클릭</a>

...

 


Dropbox 방법2 - JS 이용

 

<div class="dropdown">

    <button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown">코딩언어 <span class="caret"></span></button>

    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">

      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>

      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>

      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>

      <li role="presentation" class="divider"></li>

      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>    

    </ul>

</div>


<script>

$(document).ready(function(){

  $(".dropdown-toggle").dropdown();

});

</script>

 

※ 주의: dropdown() 메서드 호출 여부와 무관하게 data-toggle="dropdown" 속성은 필요.

 

Dropdown Option (옵션)

 

none

 

 

Dropdown Method (메서드)

 

.dropdown("toggle")

드롭다운 토글.

 


Dropdown Event (이벤트)

 

show.bs.dropdown

드롭 다운이 표시 되려고 할 때 발생.

 

shown.bs.dropdown

드롭 다운이 완전히 표시되면 (CSS 전환 완료 후) 발생.

 

hide.bs.dropdown

드롭 다운을 숨기려고 할 때 발생.

 

hidden.bs.dropdown

드롭 다운이 완전히 숨겨져있을 때 발생. (CSS 전환 완료 후).

 

[예제]

 

...

<div class="dropdown">

    <button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown">코딩언어 <span class="caret"></span></button>

    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">

      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>

      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>

      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>

      <li role="presentation" class="divider"></li>

      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>    

    </ul>

</div>

...

<script>

$(document).ready(function(){

    $(".dropdown").on("show.bs.dropdown", function(event){

        var x = $(event.relatedTarget).text(); 

        alert(x + "클릭");

    });

});

</script>

...

 

결과보기

※ event.relatedTarget : Dropdown 촉발시킨 요소. (위 예제 경우, Button 태그.)

 

Dropdown Caret 아이콘변경

 

/* CSS */

<style>

.caret.caret-up {

    border-top-width: 0;

    border-bottom: 4px solid #fff;

}

</style>

...

/* JS */

<script>

$(document).ready(function(){

    $(".dropdown").on("hide.bs.dropdown", function(){

        $(".btn").html('Dropdown <span class="caret"></span>');

    });

    $(".dropdown").on("show.bs.dropdown", function(){

        $(".btn").html('Dropdown <span class="caret caret-up"></span>');

    });

});

</script>

 

결과보기

 

Navbar + Dropdown (= 2단메뉴)

 

<nav class="navbar navbar-inverse">

    <div class="container-fluid">

        <div class="navbar-header">

            <a class="navbar-brand" href="#">WebSiteName</a>

        </div>

        <div>

            <ul class="nav navbar-nav">

                <li class="active"><a href="#">Home</a></li>

                <li class="dropdown">

                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1

                    <span class="caret"></span></a>

                    <ul class="dropdown-menu">

                        <li><a href="#">Page 1-1</a></li>

                        <li><a href="#">Page 1-2</a></li>

                        <li><a href="#">Page 1-3</a></li>

                    </ul>

                </li>

                <li><a href="#">Page 2</a></li>

                <li><a href="#">Page 3</a></li>

            </ul>

        </div>

    </div>

</nav>

 

 

Navbar + Dropdown Login (로그인)

 

<nav class="navbar navbar-inverse">

  <div class="container-fluid">

    <div class="navbar-header">

      <a class="navbar-brand" href="#">홈짱닷컴</a>

    </div>

    <div>

      <ul class="nav navbar-nav">

        <li class="active"><a href="#">Home</a></li>

        <li><a href="#">Page 1</a></li>

        <li><a href="#">Page 2</a></li>

      </ul>

      <ul class="nav navbar-nav navbar-right">

        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Login <span class="glyphicon glyphicon-log-in"></span></a>

          <div class="dropdown-menu">

            <form id="formLogin" class="form container-fluid">

              <div class="form-group">

                <label for="usr">Name:</label>

                <input type="text" class="form-control" id="usr">

              </div>

              <div class="form-group">

                <label for="pwd">Password:</label>

                <input type="password" class="form-control" id="pwd">

              </div>

              <button type="button" id="btnLogin" class="btn btn-block">Login</button>

            </form>

            <div class="container-fluid">

              <br>

              <a class="small" href="#">Forgot password?</a>

            </div> 

          </div>

        </li>

      </ul>

    </div>

  </div>

</nav>

 

결과보기

 

Multi-Level Dropdown (다단 드롭다운)

[Dropdown 하단 배치]

 

<div class="dropdown">

    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials

    <span class="caret"></span></button>

    <ul class="dropdown-menu">

      <li><a tabindex="-1" href="#">HTML</a></li>

      <li><a tabindex="-1" href="#">CSS</a></li>

      <li>

        <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>

        <ul class="dropdown-menu">

          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>

          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>

          <li>

            <a class="test" href="#">Another dropdown <span class="caret"></span></a>

            <ul class="dropdown-menu">

              <li><a href="#">3rd level dropdown</a></li>

              <li><a href="#">3rd level dropdown</a></li>

            </ul>

          </li>

        </ul>

      </li>

    </ul>

</div>

 

<script>

$(document).ready(function(){

    $('.dropdown a.test').on("click", function(e){

        $(this).next('ul').toggle();

        e.stopPropagation();

        e.preventDefault();

    });

});

</script>

 

[Dropdown 우측 배치]

 

<style>

.dropdown-submenu {position: relative;}

.dropdown-submenu .dropdown-menu {top: 0; left: 100%; margin-top: -1px;}

</style>

 

<div class="dropdown">

    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">

    코딩언어 <span class="caret"></span></button>

    <ul class="dropdown-menu">

      <li><a tabindex="-1" href="#">HTML</a></li>

      <li><a tabindex="-1" href="#">CSS</a></li>

      <li class="dropdown-submenu">

        <a class="test" tabindex="-1" href="#">2nd dropdown <span class="caret"></span></a>

        <ul class="dropdown-menu">

          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>

          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>

          <li class="dropdown-submenu">

            <a class="test" href="#">3nd dropdown <span class="caret"></span></a>

            <ul class="dropdown-menu">

              <li><a href="#">3rd level dropdown</a></li>

              <li><a href="#">3rd level dropdown</a></li>

            </ul>

          </li>

        </ul>

      </li>

    </ul>

</div>

 

<script>

$(document).ready(function(){

    $('.dropdown-submenu a.test').on("click", function(e){

        $(this).next('ul').toggle();

        e.stopPropagation();

        e.preventDefault();

    });

});

</script>

 

※ Dropdown 우측 배치 커스컴 수정 위해, .dropdown-submenu 클래스 생성.

 
방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

Bootstrap 3 관련글

Bootstrap 4 관련글

Bootstrap 5 관련글

코딩동강 관련글

HTML 관련글

CSS 관련글

JavaScript 관련글

JQuery 관련글

PHP 관련글

SQL 관련글
분류 제목
basic BS3 - HOME (소개) - BS3 vs BS4 차이 (= BS차이)
basic BS3 - Start (시작) ★ - BS다운 / BSCDN / BS구문
basic BS3 - Grid (그리드) ★★★ - (BS3그리드 vs BS4그리드)
basic BS3 - Text/Typography(BS글자 = BS텍스트) (= BS4글자 vs BS3글자) BS글자색
basic BS3 - Table (BS테이블) - 테이블테두리 + 테이블배경색 + 반응형테이블
basic BS3 - Image (BS이미지) - 반응형이미지 + 반응형동영상 + 이미지정렬
basic BS3 - Jumbotron/page-header (BS점보트론 / BS페이지헤더) - 큰글씨, 글자키우기
basic BS3 - Well (BS웰 = BS회색상자) ★ - BS회색배경상자 (= BS회색박스 = BS웰클래스)
basic BS3 - Alert (BS경고 = BS얼럿 = BS경보) - 배경색 + 글자색 + 링크색 + 닫기 + 애니…
basic BS3 - Button (BS버튼) ★ - 버튼색깔 + 버튼크기 + 버튼활성화 + 버튼비활성화
basic BS3 - Button Group (BS버튼그룹) ★
basic BS3 - Icon (아이콘) - Glyphicon/Font Awesome/Google Material De…
basic BS3 - Progress Bar (BS진행바 = BS진행상태표시 = BS진도바 = BS프로그레스바) - I…
basic BS3 - Pagination (BS페이징 = BS페이지번호 = BS페이징 = BS패지네이션) + Bread…
basic BS3 - Pager (BS페이저) - 이전페이지/다음페이지 (= 앞으로가기/뒤로가기)
1/4
목록
　홈　 PC버전 로그인 일본어
웹디자인언어 1
서버관리언어
고급코딩언어
그누보드
제작의뢰
Q&A
커뮤니티 2
웹유틸
회원센터
홈짱 PC버전 로그인