블로그(티스토리) 화면 상단에 부드럽게 고정되는 카테고리 메뉴 IT 인터넷/HTML2015. 3. 7. 20:36
인터넷서핑을 하다보면 화면 상단에 메인 메뉴가 고정되어 있는 홈페이지를 자주 볼 수 있을 것입니다.
특히 블로그에서 화면 상단 고정 메뉴를 많이 사용하고 있습니다.
그래서, 메인메뉴 말고 서브메뉴를 붙혀보고 싶어졌습니다.
그래서 여기저기 돌아다니다 부드럽게 나타나서 상단에 붙는 숨겨진 서브메뉴 스크립트를 찾았습니다.
이 스크립트는 처음에는 사라져있다가 스크롤이 시작된후 어느정도 페이지를 내려가면
짠~ 하고 나타나서 상단에 붙었다가 다시 어느정도 페이지가 올라가면 사라지는 스크립트입니다.
아래는 블로그 메인 탑메뉴가 상단에 부드럽게 붙는 원본 제이쿼리입니다.
이건 블로그 메인 탑메뉴를 최상단에서 고정하는것이기 때문에 서브메뉴 고정시키는거보다
아래의 소스만 제대로 입력하면 어렵지 않게 성공할수 있는 관계로 그냥 넘어가는걸로 하겠습니다.
지금부터 포스팅할 서브메뉴 고정하는거만 잘보셔도 어떻게 메인 탑메뉴를 상단에 붙혀야 하는지
금방 이해하실수 있을정도로 메인 탑메뉴를 상단에 붙히기는 쉽습니다.
뭐 굳이 카테고리도 없는 탑메뉴를 고정해봐야 서브메뉴 고정하는거에 비하면 의미가 없다고 봅니다.
블로그 메인 탑메뉴를 화면상단에 고정시키는 제이쿼리와 예제 원본 보러가기
[ HTML] <div class="menubar" data-scroll="true">This div contain menu</div> [Java Scipt] <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript"> jQuery(window).scroll(function () { if (jQuery(this).scrollTop() > 100) { jQuery('.menubar').stop().animate({ marginTop:'0px' }, 300); } else { jQuery('.menubar').stop().animate({ marginTop:'-80px' }, 300); } }); </script> [CSS] <style type="text/css"> body{height:1500px;} .menubar { position: fixed; top: 0px; height: 80px; width: 100%; z-index: 9999; background-color: #FFF; margin-top: -80px; -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.2); box-shadow: 0 2px 2px rgba(0,0,0,0.2); } </style> |
다음은 위의 스크립트를 이용하여 카테고리 메뉴를 상단에 붙혀보기로 하겠습니다.
소스는 위와 같으며 예제는 현재 제 블로그에서 아래로 더 내려가시면 우측에 카테고리 메뉴가 나타날겁니다.
지금부터 설명드릴 소스는 제 티스토리 블로그에도 적용중인 카테고리 메뉴 소스입니다.
(Admin (관리자) → HTML/CSS 편집 → skin.html)로 이동합니다.
1) 아래는 제이쿼리 스크립트입니다.
skin.html 페이지 맨위쪽에 보시면 <head>가 있을겁니다.
<head>
사이에 아래 스크립트를 삽입합니다.
</head>
아래에 첨부한 스크립트를 삽입하시면 됩니다.
상단 고정용 서브메뉴 제이쿼리 스크립트.txt<!-- 스크롤 시작후 어느정도 내려가면 서브메뉴가 나타나는 스크립트 --> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript"> jQuery(window).scroll(function () { if (jQuery(this).scrollTop() > 50) { // 얼마나 화면이 내려가면 서브메뉴가 나타날지 길이 설정 jQuery('.menubar').stop().animate({ marginTop:'0px' }, 500); // 나타날때 미끄러져 내려오는 속도설정 } else { jQuery('.menubar').stop().animate({ marginTop:'-100px' // 서브메뉴의 길이에 따라 사이즈설정(이해 안가면 0으로 바꿔서 테스트 해보세요!)[값은 반드시 -값이어야함] }, 500); // 사라질때 미끄러져 들어가는 속도설정 } }); </script> |
★ 소스를 전부 삽입한뒤 맨 마지막에 한번에 같이 수정을 해야 하므로 찾기 쉬운곳에 붙혀 넣으세요! ★
수정해야 할곳은 //표시뒤에 한글로 적혀있는 곳입니다. (본인의 홈페이지에 맞게 수정하시면 됩니다.)
위의 내용중에( marginTop:'-100px' // 서브메뉴의 길이에 따라 사이즈설정(이해 안가면 0으로 바꿔서 테스트 해보세요!)
[값은 반드시 -값이어야함] )
바로 위 라인의 내용이 잘 이해가 안가시는 분들을 위해 설명 덧붙힙니다.
marginTop:'-100px' ← 이부분의 [-100px]는 카테고리 메뉴를 숨겨야 하기 때문에 카테고리 메뉴의 길이만큼
마이너스값을 넣어줘야 그 길이만큼 상단으로 들어가 사라지는 원리입니다.
예를들어 카테고리 메뉴의 길이가 200px인데 marginTop의 값을 위처럼 -100만 주면 -100만큼만 들어가고
나머지 반은 들어가다 말고 화면 밖으로 삐져나와 있게 됩니다.
그래서, marginTop의 값을 -200을 줘야 완전히 안으로 들어가서 숨을수가 있는겁니다.
2) 다음은 (컨트롤(Ctrl)+F)를 눌러 검색창에 sidebar close 를 검색합니다.
</div><!-- sidebar close --> 이게 검색됐을겁니다.
제가 아래처럼 </s_sidebar> 윗줄에다 [카테고리 들어갈 자리]라고 써놓았습니다.
</s_sidebar_element> [카테고리 들어갈 자리] </s_sidebar> </div><!-- sidebar close --> 검색해서 나온단어 </div><!-- middle close --> |
[카테고리 들어갈 자리]에 아래의 스크립트를 넣을건데 펼쳐진 카테고리 입니다.
(접으려면 아래 ［##_category_list_##］를 ［##_category_##］로 바꿔주면 접힙니다)
아래의 스크립트를 [카테고리 들어갈 자리]에 붙혀넣으면 됩니다.
아래에 첨부한 HTML소스를 삽입하시면 됩니다.
<s_sidebar_element> <!-- 카테고리 모듈 --> <div class="menubar" data-scroll="true"> <div id="category"> <h3>카테고리</h3> <div class="categoryBg"> <div class="bgTop">［##_category_list_##］</div> <div class="bgBtm"> </div> </div> </div> </div> </s_sidebar_element> |
이렇게 붙혀넣기 한뒤에 저장하세요!(［##_category_list_##］← 이건 티스토리에서 화면에 안나오는 관계로 화면상에
보이게 하기 위하여 [ ]←요걸 ［ ］←이걸로 문자를 바꿔서 입력했습니다. 그래서 사이가 벌어져 있는 거에요)
</s_sidebar_element> <s_sidebar_element> <!-- 카테고리 모듈 --> <div class="menubar" data-scroll="true"> <div id="category"> <h3>카테고리</h3> <div class="categoryBg"> <div class="bgTop">［##_category_list_##］</div> <div class="bgBtm"> </div> </div> </div> </div> </s_sidebar_element> </s_sidebar> </div><!-- sidebar close --> </div><!-- middle close --> |
자 그럼 카테고리 메뉴가 한개더 생겼기 때문에
좌측 메뉴중에 [꾸미기]하위에 있는 [사이드바] 로 이동합니다.
거기에 보시면 왼쪽 기본모듈에 카테고리 모듈이 생겼습니다.
카테고리 모듈우측에 [+]를 클릭하면 오른쪽 사이드바 맨위로 들어가 있을겁니다.
잘보시면 카테고리 모듈이 2개이기 때문에 헷갈리지 않도록 맨위에있는
카테고리 모듈을 마우스로 누른상태에서 맨아래로 내립니다.
맨아래로 내려가 있는지 확인후 우측위에있는 저장을 눌러 저장합니다.
3) 마지막으로 스타일(CSS) 만 집어넣으면 끝납니다.
(Admin (관리자) → HTML/CSS 편집 → Style.css) 이동
지금까지 작업했던 skin.html 아래에 있습니다.
일단 CSS를 삽입하기 편하도록 맨아래로 이동합니다.
/* Float 버그 */ .floatWrapper:after { content: "."; display:block; height:0; clear:both; visibility:hidden; } /* Hides from IE-mac \*/ * html .floatWrapper { height:1%; } /* End hide from IE-mac */ |
여기서 맨아래에 있는 /* End hide from IE-mac */ 바로 윗줄에 아래 첨부한 CSS를 삽입합니다.
/* Float 버그 */ .floatWrapper:after { content: "."; display:block; height:0; clear:both; visibility:hidden; } /* Hides from IE-mac \*/ * html .floatWrapper { height:1%; }
/* 카테고리 메뉴 고정 */ body{height:10px;} .menubar { position: fixed; top: 0px; height: 80px; width: 10%; z-index: 9999; margin-top: -100px; // 서브메뉴의 길이에 따라 사이즈 입력(이해 안가면 0으로 바꿔서 테스트 해보세요!)[값은 반드시 -값이어야함] } /* End hide from IE-mac */ |
이렇게 위의 보기처럼 삽입하셨다면 맨아래 있는 미리보기를 눌러보면서 Skin.html과 Style.css 중에 위의 보기처럼
제가 한글로 적어 놓은곳의 사이즈와 위치를 변경한후에 마지막으로 반드시 저장을 눌러주셔야 적용이 됩니다.
이렇게 하면 제 블로그처럼 스크롤해서 어느정도 내려가면 서브메뉴가 숨어있다 짠~ 하고 나타납니다.
이해안가는 분은 현재 제 블로그 우측 상단에 서브메뉴가 붙어있는게 보일겁니다.
맨위로 올라가 보시면 펼쳐진 카테고리 메뉴가 사라지고 접혀있는 카테고리 메뉴만 보일겁니다.
위에서 언급했듯이 카테고리 메뉴를 한개더 만들었기 때문에 카테고리 메뉴는 2개이고 그중 한개는 지금까지 만들어서
삽입했던 펼쳐진 카테고리 메뉴인데 화면이 맨위에 있을경우는 숨어있다가 스크롤시에만 나타납니다.
화면이 맨위에 있을경우엔 사라져있다가 어느정도 화면이 아래로 내려가면 나타나고
다시 화면이 위로 어느정도 올라가면 사라집니다.
결국 카테고리 메뉴는 2개지만 보이는건 한개뿐인거죠!
그럼 여기까지 블로그 화면 상단에 부드럽게 고정되는 카테고리 메뉴 포스팅을 마칩니다.
즐거운하루 되세요!
