상단바 드롭다운 메뉴 넣기 (Bootstrap기반 스킨)

이 포스팅은 FastBoot을 포함한 Bootstrap 기반 스킨 모두에 적용됩니다.

Bootstrap기반 티스토리 스킨 상단바 드롭다운 메뉴 넣기

 예전부터 연재하려던 주제인데.. 이번에 제 스킨을 설치하신 분 중 깔끔하게 사용하시는 분이 계셔서 한번 포스팅을 해보게 되었습니다. ^^

Qyuoo님 블로그(http://qyuoo.tistory.com/)

+ Onasaju님도 드롭다운 메뉴를 쓰고 계십니다. (http://onasaju.tistory.com/) 

두 분 다 저보다 깔끔하게 쓰고 계시더군요.. ㅋㅋ

  FastBoot은 기본적으로는 상단바에 카테고리를 지원하지 않습니다. 왜냐하면 처음 사용하시는 분들이 사용하기에 그리 커스텀하기 쉬운 요소가 아니라고 판단했기 때문이구요.. 그 대신 1.5.1버전부터 모바일에서 볼 때 Offcanvas메뉴가 자동적으로 카테고리를 가져오게 되어 있습니다. 다만 변화를 주고 싶다고 생각하시는 분들을 위해 카테고리 드롭다운 메뉴 소스를 가져와봤습니다. 

  일단 아래 코드가 기본 상단바 코드입니다.

	
<div class="collapse navbar-collapse">
	<ul class="nav navbar-nav">
	  <li id="navbar-page"><a href="/"><i class="fa fa-home fa-fw"></i> Home</a></li>
	  <li id="navbar-tag"><a href="/tag"><i class="fa fa-tags fa-fw"></i> Tag</a></li>
	  <li id="navbar-guestbook"><a href="/guestbook"><i class="fa fa-book fa-fw"></i> Guestbook</a></li>
	  <!--F 필요한 티스토리 추가 메뉴가 있으시면 주석에서 꺼내 쓰세요
	  <li id="navbar-media"><a href="/media"><i class="fa fa-video-camera fa-fw"></i> 미디어</a></li>
	  <li id="navbar-location"><a href="/location">위치로그</a></li>
	  <li id="navbar-rss"><a href="https://readiz.tistory.com/rss" onclick="window.open(this.href); return false" title="Readiz - Read easy 구독하기"><i class="fa fa-rss fa-fw"></i> RSS</a></li>-->
	</ul>
	<!--F 검색 모듈 -->
	<s_search>
	<form id="search_fix" class="navbar-form navbar-left" role="search">
		<div class="input-group form-search">
			<input type="text" name="" value="" onkeypress="if (event.keyCode == 13) {  }" class="form-control search-query" placeholder="Enter to search..."/>
			<span class="input-group-btn">
				<button value="검색" class="btn btn-inverse" onclick="" class="submit"><i class="fa fa-search fa-lg" data-type="last"></i></button>
			</span>
		</div>
	</form>
	</s_search>
  </div> 
	

  각각 어디인지 아시겠나요? Home, Tag, Guestbook부분이 기본적으로 나와있고, 다른 메뉴를 원하시는 분들을 위해 주석처리 해둔 부분도 있습니다. 제가 꺼내서 쓰시라고 해둔 부분을 꺼내셔도 상관 없구요.. 아무튼 추가도 마찬가지입니다. 다만 드롭다운을 가지고 있는 녀석을 추가할 뿐이에요. 아래가 샘플 코드입니다.

	

  <li class="dropdown"><a href="#" id="dropdownCategoryMenu" data-toggle="dropdown"><i class="fa fa-folder-open"></i> Category <i class="caret"></i></a>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownCategoryMenu">
		<li><a href="/category"><i class="fa fa-folder"></i> 전체보기</a></li>
		<li class="divider"></li>
		<li><a href="/category/1"><i class="fa fa-folder"></i> Test 1</a></li>
		<li><a href="/category/2"><i class="fa fa-folder"></i> Test 2</a></li>
		<li><a href="/category/3"><i class="fa fa-folder"></i> Test 3</a></li>
		<li><a href="/category/4"><i class="fa fa-folder"></i> Test 4</a></li>
	</ul>
  </li> 
	

  이 코드는 <li>들 있는 곳에 나란히 넣으시면 됩니다. 다만 넣기 전에.. 수정이 필요한데요, Test 1, 2, 3, 4라고 되어 있는 부분과 실제 링크인 /category/1 이 부분들입니다. 이 부분들은 본인 블로그에서 넣고 싶은 카테고리의 이름과 실제 주소를 넣어주시면 됩니다. 주소를 넣는 방법은 자신 블로그에서 실제로 카테고리를 눌러보신 다음에, 상단 주소바에서 주소를 가져오시면 됩니다. 아무튼 여기서는 했다는 가정 하에, 전체 코드는 아래처럼 될 것입니다.

	
  <div class="collapse navbar-collapse">
	<ul class="nav navbar-nav">
	  <li id="navbar-page"><a href="/"><i class="fa fa-home fa-fw"></i> Home</a></li>
	  <li class="dropdown"><a href="#" class="dropdown-category" id="dropdownCategoryMenu" data-toggle="dropdown"><i class="fa fa-folder-open"></i> Category <i class="caret"></i></a>
		<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownCategoryMenu">
			<li><a href="/category"><i class="fa fa-folder"></i> 전체보기</a></li>
			<li class="divider"></li>
			<li><a href="/category/1"><i class="fa fa-folder"></i> Test 1</a></li>
			<li><a href="/category/2"><i class="fa fa-folder"></i> Test 2</a></li>
			<li><a href="/category/3"><i class="fa fa-folder"></i> Test 3</a></li>
			<li><a href="/category/4"><i class="fa fa-folder"></i> Test 4</a></li>
		</ul>
	  </li>
	  <li id="navbar-tag"><a href="/tag"><i class="fa fa-tags fa-fw"></i> Tag</a></li>
	  <li id="navbar-guestbook"><a href="/guestbook"><i class="fa fa-book fa-fw"></i> Guestbook</a></li>
	  <!--F 필요한 티스토리 추가 메뉴가 있으시면 주석에서 꺼내 쓰세요
	  <li id="navbar-media"><a href="/media"><i class="fa fa-video-camera fa-fw"></i> 미디어</a></li>
	  <li id="navbar-location"><a href="/location">위치로그</a></li>
	  <li id="navbar-rss"><a href="https://readiz.tistory.com/rss" onclick="window.open(this.href); return false" title="Readiz - Read easy 구독하기"><i class="fa fa-rss fa-fw"></i> RSS</a></li>-->
	</ul>
	<!--F 검색 모듈 -->
	<s_search>
	<form id="search_fix" class="navbar-form navbar-left" role="search">
		<div class="input-group form-search">
			<input type="text" name="" value="" onkeypress="if (event.keyCode == 13) {  }" class="form-control search-query" placeholder="Enter to search..."/>
			<span class="input-group-btn">
				<button value="검색" class="btn btn-inverse" onclick="" class="submit"><i class="fa fa-search fa-lg" data-type="last"></i></button>
			</span>
		</div>
	</form>
	</s_search>
  </div>
 
	

  이번 예제를 적용하면 아래 모습처럼 상단바가 될 것입니다. 테스트를 위해 http://fastboot.tistory.com/ 에 임시로 카테고리를 상단바에 추가시켜 보았습니다.

테스트 블로그

http://fastboot.tistory.com/

  서두에서 밝혔지만 이 코드는 부트스트랩 기반의 다른 스킨에서도 사용할 수 있는 코드입니다. 똑같이 navbar에다가 삽입해주시면 되구요.. 추가적으로 앞의 아이콘은 Fontawesome에서 가져온 아이콘이고, 이것의 아이콘 목록은 

Fontawesome 아이콘

http://fontawesome.io/icons/

  위 주소로 가시면 아이콘을 변경하실 수 있습니다. 변경은 <i class="fa fa-변경할 아이콘"></i> 으로 해주시면 변경이 됩니다.

+ 스크린샷에 나온 Responsive Slideshow는 차후 안정되면 포스팅 하겠습니다. 아직 좀 불안정해서.. 저번에 물어보시는 분이 있으셔서 미리 첨언 해둡니다. ^^