부트스트랩 4장 - 부트스트랩을 이용하여 드롭다운 메뉴 생성하기

이번 포스팅 주제는 메뉴버튼(다른말로 드롭다운이라고도 불립니다) 생성을 해보도록 하겠습니다 ^^ㅋ

메뉴버튼 역시 지난 포스팅과 동일하게 색상 및 사이즈에 대해서도 클래스 속성을 적용함으로써 출력이 가능합니다.

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가지를 들수 있겠습니다.

1. 버튼과 화살표의 영역 나누기

해당 속성의 설명은 버튼태그를 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>

실행결과

2. 메뉴를 밑으로가 아닌 위로 나오게하기

메뉴버튼의 위치가 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 개발로짜