이번 포스팅 주제는 메뉴버튼(다른말로 드롭다운이라고도 불립니다) 생성을 해보도록 하겠습니다 ^^ㅋ
메뉴버튼 역시 지난 포스팅과 동일하게 색상 및 사이즈에 대해서도 클래스 속성을 적용함으로써 출력이 가능합니다.
2014/10/08 - [웹개발강좌/부트스트랩] - 부트스트랩 2장 - 다양한 버튼 컴포넌트를 만들어보자 (색상 및 크기 편)
그러므로 색상 및 사이즈에 대해서는 배제하고 포스팅을 진행하겠습니다.
기본적인 메뉴버튼에 대한 구조는 다음과 같습니다.
<div class="btn-group"> <!-- 버튼태그 --> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> 메뉴버튼 <!-- 버튼태그 우측 메뉴출력을 위한 화살표표시 (없어도 무관하나 메뉴버튼이라는것을 알려주기 위함) --> <span class="caret"></span> </button> <!--메뉴버튼 클릭시 하단 표출된 리스트 영역 --> <ul class="dropdown-menu" > <!-- 메뉴1 --> <li><a href="#">메뉴1</a></li> <!-- 메뉴2 --> <li><a href="#">메뉴2</a></li> </ul> </div>
위와 같은 코드가 메뉴버튼의 기본 구조입니다.
메뉴버튼의 크기 및 사이즈의 경우는 button태그의 class 속성을 추가 및 변경만 해주시면 되겠습니다 ^^
위 기본구조에 대한 코드형태는 다음과 같습니다.
그 외의 메뉴버튼 별도의 속성이 존재한다면 다음과 같이 2가지를 들수 있겠습니다.
해당 속성의 설명은 버튼태그를 2개로 나누는 방법입니다.
기존에 dropdown-toggle 클래스가 존재하는 버튼태그에는 클래스가 "caret"인 span 클래스만 존재하고
해당 태그 이전에 추가로 button태그를 생성하여 일반 버튼을 생성해주시면 됩니다.
그렇게 된다면 현재 제 블로그상단에 메뉴버튼들 처럼 구분이되어 텍스트버튼 클릭시는 링크를 타고 이동이 되고
화살표 클릭시 그 하위의 서브카테고리 목록들이 표출되는 방식과 동일합니다.
기존 코드를 변형해서 샘플코드와 실행결과를 작성해보겠습니다.
<div class="btn-group"> <!-- 추가 버튼태그 --> <button class="btn btn-default" type="button"> 메뉴버튼 </button> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> <!-- 버튼태그 우측 메뉴출력을 위한 화살표표시 (없어도 무관하나 메뉴버튼이라는것을 알려주기 위함) --> <span class="caret"></span> </button> <!--메뉴버튼 클릭시 하단 표출된 리스트 영역 --> <ul class="dropdown-menu" > <!-- 메뉴1 --> <li><a href="#">메뉴1</a></li> <!-- 메뉴2 --> <li><a href="#">메뉴2</a></li> </ul> </div>
메뉴버튼의 위치가 footer에 있다고 가정해봅니다.
만약 메뉴를 클릭했을 경우 메뉴버튼 상단으로 출력이 되는것이 더 깔끔하겠죠?
최상단에 위치할경우 메뉴가 상단으로 출력하면 브라우저로부터 감추어 지니
"DROPUP" 은 상단과 간격이 있는 상태에서 사용해야 합니다.
이런 경우외에도 필요에 따라 사용하면 되므로 알아두도록 하겠습니다.
※ 상단출력을 원하실경우 "btn-group"클래스를 가지고 있는 div태그에 추가로 "dropup"이라는 클래스 추가를 해주시면 되겠습니다.
<!-- 간격을 내리고자 임의로 줄바꿈 --> <br/><br/><br/><br/><br/><br/><br/><br/> <div class="btn-group dropup"> <!-- 추가 버튼태그 --> <button class="btn btn-default" type="button"> 메뉴버튼 </button> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> <!-- 버튼태그 우측 메뉴출력을 위한 화살표표시 (없어도 무관하나 메뉴버튼이라는것을 알려주기 위함) --> <span class="caret"></span> </button> <!--메뉴버튼 클릭시 하단 표출된 리스트 영역 --> <ul class="dropdown-menu" > <!-- 메뉴1 --> <li><a href="#">메뉴1</a></li> <!-- 메뉴2 --> <li><a href="#">메뉴2</a></li> </ul> </div>
임의의 br태그를 이용하여 하단에 위치한다는 가정을 한 후 "dropup" 적용을 해보았습니다 ^^
by 개발로짜
부트스트랩 6장 - 스크롤스파이 기능을 이용하여 메뉴포커스 변경해보기 (0) | 2014.10.22 |
---|---|
부트스트랩 5장 - 부트스트랩의 모달창(기본 + ajax) 알아보기 (7) | 2014.10.16 |
부트스트랩 3장 - 다양한 버튼 컴포넌트를 만들어보자 (그룹버튼 편) (0) | 2014.10.09 |
부트스트랩 2장 - 다양한 버튼 컴포넌트를 만들어보자 (색상 및 크기 편) (0) | 2014.10.08 |
부트스트랩 1장 - 부트스트랩 연동하기 (3) | 2014.10.08 |