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

Posted by Readiz
2014.04.08 06:26 반응형 티스토리/Tistory


이 포스팅은 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="[##_rss_url_##]" onclick="window.open(this.href); return false" title="[##_title_##] 구독하기"><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="[##_search_name_##]" value="[##_search_text_##]" onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }" class="form-control search-query" placeholder="Enter to search..."/>
			<span class="input-group-btn">
				<button value="검색" class="btn btn-inverse" onclick="[##_search_onclick_submit_##]" 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="[##_rss_url_##]" onclick="window.open(this.href); return false" title="[##_title_##] 구독하기"><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="[##_search_name_##]" value="[##_search_text_##]" onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }" class="form-control search-query" placeholder="Enter to search..."/>
			<span class="input-group-btn">
				<button value="검색" class="btn btn-inverse" onclick="[##_search_onclick_submit_##]" 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는 차후 안정되면 포스팅 하겠습니다. 아직 좀 불안정해서.. 저번에 물어보시는 분이 있으셔서 미리 첨언 해둡니다. ^^


이 댓글을 비밀 댓글로
  1. 감사합니다.
    혹시 상단에 로그인/로그아웃도 넣어주실수 있나요?
    • 안될 건 없을 것 같은데요.. ^^ 한번 해볼까요?
    • ㅋ~고맙습니다.
    • 일단 넣었는데 뭔가 정리가 필요할 듯.. 기능정리 좀 해야겠습니다 -0-
      맘에 드시나요?
    • 아~감사합니다.
      저거 적용하려면....다시 다운받아 업로드 해야 하나요?

      그럼 이전에 개인적으로 설정해둔건 어떻게 되는거죠?
  2. 제 블로그가 보이니 괜히 부끄럽네요...^^;;;;
    로그인/로그아웃은 저도 만들어보고 싶은데... 티스토리 상에서 로그인 여부에 대한 플래그 값 같은게 존재하는건가요?? 카테고리에 로그인 페이지는 넣어놨는데 로그인을 해도 계속 로그인이라고만 나와서 좀 신경쓰였거든요 ㅎㅎ
    • 플래그는 없지만 대충 따올수는 있을듯 하네요.. ㅎㅎ
  3. 오...대단하네요...적용하고 싶은데..시간이 없네요 ㅠㅠ 주말에 한번 시도 해봐야것어요 ㅎㅎ
    • ㅋㅋ 또 다른게 올라올겁니다 그 사이에 ㅎㅎㅎ
  4. 블로그 링크 걸어 주셔서 감사합니다 ^^;
    슬라이드쇼 부분은,,, 시중에 떠돌아다니는... 제이쿼리 슬라이드 쇼 부분을 적용해 볼까? 라고 생각을 했었는데...

    지금 당장은 슬라이드쇼의 필요성을 크게 느끼지 못하고 있어서 미뤄놓고 있는 상황이었는데, 제가 적용하는 시점보다 Readiz님이 공개해주는 시기가 더 빠를거 같네요 ㅎㅎ 일단은 기다렸다가 Readiz님이 공개 해 주시면 그때 슬라이드쇼 적용을 해 봐야 겠습니다.
    • 제가 그 작업을 쉽게봤다가.. 티스토리 티에디션하고 계속 충돌하는 통에 이제서야 그나마 볼 수 있게 했네요;; 티스토리 커스터마이징의 끝을 보고자 지금까지 왔는데 그래도 힘든건 부정못해요.. ㅎㅎ
    • 저도 티스토리 스킨을 직접 만들어 보고 싶어서 여러번 시도를 했지만, 구상만 하고 시작은 못한채로 끝나게 됐네요 ㅜㅜ; 넘 힘들죠..
    • 지금 댓글다셔서 여쭤보는데, 제 블로그에 방금 추가한 오른쪽 상단에 로그인/로그아웃 버튼 잘 토글 되면서 작동 하나요?
    • 앗 이제야 댓글 달린거를 확인 했네요 ㅎㅎ 애니메이션 효과를 넣으신건 아니죠? 로그인, 로그아웃, 방명록, 관리자 페이지 모두 정상 동작 합니다...

      그리고 계속 무언가가 바뀌고 있군요 ㅎㅎ
    • 아 .. 그리고 CSS 에서 .article h1,h2,h3,h4,h5,h6 부분이 모두 동일한 스타일속성으로 지정되어 잇더라고요.

      글자 크기랑 왼쪽 경계선 두께 부분만 다른 태그들과 다르게 지정 해 주면 될 거 같은데요...조만간에 블로그 세세한 부분에 대해서 수정작업에 들어가야겠네요 ㅎㅎ
    • 아.. 본문쪽 마크업은 도와주시면 저야 감사하죠.. ㅎㅎ
      근데 지금도 글 크기는 태그마다 다르게 되어있을텐데 이상하네요..
  5. Hn 태그별로 크기가 별도로 지정되어 있지만, 그 이전에 적용된 속성들이 있는데 그게 먼저 적용되는거 같더라고요 ㅜㅜ;; 스타일시트 특성상 뒤에 오는 스타일속성이 우선되는데 이상하더라고요 ㅎㅎ

    .article h1, .article h2 , .article h3, .article h4, .article h5, .article h6 {
    font-size: 24px;
    border-bottom: 2px solid #ccc;
    border-left: 10px solid #55555B;
    text-height:200%;
    padding: 3px 5px;
    margin: 5px 0;
    letter-spacing: 1px;
    word-spacing: 3px;
    }
    .article h2 { font-size: 22px; }
    .article h3 { font-size: 20px; }
    .article h4 { font-size: 18px; }
    .article h5 { font-size: 16px; }
    .article h6 { font-size: 14px; }

    저는 위에서 처음에 있는 폰트사이즈 24픽셀과 보더 레프트 10픽셀 솔리드 부분을 제거하고, 보더 레프트 경우에는 h2 태그에만 본문에서 사용을 하고 있어서 h2 태그에만 적용을 해 주었네요. 그리고 이전에 작성한 게시물들중에서 h1,h2,h3 태그가 골고루 들어간 게시물을 봤는데, 크기가 24픽셀로 모두 동일하게 적용되어 있더라고요. 그래서 폰트사이즈 24픽셀 속성 부분을 제거해서 아래에 오는 크기 관련 속성들이 적용되도록 했습니다.

    그리고 지금당장 변경하진 않을거지만, 추후에 변경할거로는,,, 폰트 사이즈가 픽셀로 되어있는 거를 백분율로 변경하려고 합니다.

    h1 {font-size:200%;}
    h2 {font-size:170%;} 이런식으로요 ㅎㅎ 추후에 모든 자잘한 사항들 수정하거나 하면 그때 좀 더 정돈되게 정리해서 공개하겠습니다.
    • 신미성
    • 2016.09.26 15:25 신고
    동작은 되는데요.. 링크가 안되는 이유는 무얼까요?

티스토리 툴바