작성일자
카테고리 부트스트랩/부트스트랩으로 디자인하기

트위터 부트스트랩은 기본적으로 드롭다운 메뉴를 클릭해야만 서브 메뉴를 볼 수 있습니다. 마우스를 올렸을 때 서브 메뉴를 나타나게 하려면 별도의 제이쿼리 플러그인을 추가하고 코드를 수정해 줘야 합니다.


더 간단한 방법 --> http://martian36.tistory.com/1265


https://github.com/CWSpear/twitter-bootstrap-hover-dropdown


위 링크로 이동하면 파일을 받을 수 있습니다. 오른쪽 사이드바 하단에서 Download zip 버튼을 클릭하면 됩니다. 지금 사용하고 있는 티스토리 스킨도 부트스트랩으로 만들어졌는데 제 블로그를 기준으로 변경하는 방법을 알아보겠습니다.



압축을 풀면 데모 파일이 있고 파일을 열면 어떻게 사용하는지 알 수 있습니다. 



우선 내 블로그의 파일 업로드 창에서 twitter-bootstrap-hover-dropdown.min.js 파일을 업로드 합니다.



skin.html 창에서 하단으로 내려와서 </body> 태그 이전에 아래의 코드를 삽입합니다. 코드는 내려받은 파일에서 demo.html 파일의 하단에 보면 나옵니다.


<script src="./images/twitter-bootstrap-hover-dropdown.min.js"></script>

<script>

  // very simple to use!

  $(document).ready(function() {

    $('.js-activated').dropdownHover().dropdown();

  });

</script>



메뉴바 있는 곳에서 모든 dropdown-toggle 다음에 한칸 띄고 위처럼 js-activated를 추가한 다음 저장하면 완료됩니다.



저작자 표시 비영리 변경 금지
신고

티스토리 툴바