티스토리는 부트스트랩의 Navbar를 사용할 수 없을까???
메뉴 부분도 편리하고 반응형으로 쉽게 구축이 가능하고 또한 메뉴를 변경하면 자동으로 Navigation이 바뀌면 정말 좋을 것 같기 때문이다.
내가 사용한 방법은 기존의 티스토리에서 제공하는 UL 구조의 메뉴에 Jquery를 이용하여 class 및 기타 필요한 부분을 삽입 하게 하였다.
어느정도 매끄럽게 돌아 가는 것 같아서 공개 하려 한다.
언제나 그렇듯이 친절한 말한마디 보다는 친절한 소스가 더 효험이 있는 법이다.
$(function(){
$("#top_menu ul:first-child>li>ul").addClass("nav navbar-nav");
$("#top_menu ul:first-child>li:first-child>a:first-child").remove();
$("#top_menu ul:first-child").css("margin",0);
$("#top_menu ul:first-child>li>ul>li").each(function(index){
if($(this).children("ul").length){
$(this).addClass("dropdown");
$(this).children("a")
.addClass("dropdown-toggle")
.attr("data-toggle","dropdown")
/* .attr("role","button")
.attr("aria-haspopup","true")
.attr("aria-expanded","false") */
.append('');
$(this).children("ul").addClass("dropdown-menu");
}
});
$(".navbar").show();
});
그리고 아래는 적용하도록 HTML 편집방식을 표현하였다.
특히 중요한 것이 id와 클래스를 잘 적용하는 것인데, 일단은 그대로 소스를 보고 참조하고, 나중에 된다면 슬라이드를 좀더 이쁘게 만들기 위해서 만든 onhu-nav도 써볼 예정이다
참고로 이 블로그는 onhu-slidebar를 이용하였기 때문에 약간 모양세가 다를 수 있다.
'Web > Bootstrap' 카테고리의 다른 글
| 부트스트랩을 써야하나 말아야하나?? (0) | 2015.12.07 |
|---|
