'탭메뉴'에 해당되는 글 2건
- 2014.10.15 jQuery 로 탭메뉴를 맹글어 보아요~ 8
- 2014.04.10 jQuery 로 탭메뉴 보였다 안보였다 맹글기 3
jQuery 로 탭메뉴를 맹글어 보아요~
Javascript 예제 2014. 10. 15. 16:31
최종적으로 맹글어질건 아래와 같은, 사이트 메인화면 중간중간에 들어가는 탭메뉴들이다.(클릭하면 클릭됨)
html
※ 버튼의 롤오버 이미지 파일명은 ***_on.* ***_off.* 요렇게 해야 클릭했을때 이미지가 바뀐다.
<div class="tabmenu"> <h2>첫번째 탭메뉴</h2> <ul> <li><a href="#link"><img src="img/menu_01_off.gif" alt="메뉴01" /></a> <ul class="tabcontent"> <li><a href="#">1 제목이 나오는부분.....</a></li> <li><a href="#">2 제목이 나오는부분.....</a></li> </ul> <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p> </li> <li><a href="#link"><img src="img/menu_02_off.gif" alt="메뉴02" /></a> <ul class="tabcontent"> <li><a href="#">무우우우우우우우.....</a></li> <li><a href="#">5무우우우우우우우ㄴ.....</a></li> </ul> <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p> </li> <li><a href="#link"><img src="img/menu_03_off.gif" alt="메뉴03" /></a> <ul class="tabcontent"> <li><a href="#">요농이 요느마</a></li> <li><a href="#">요농이 요느마</a></li> </ul> <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p> </li> <li><a href="#link"><img src="img/menu_04_off.gif" alt="메뉴04" /></a> <ul class="tabcontent"> <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li> <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li> </ul> <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p> </li> </ul> </div>
css
<style> .tabmenu {position:relative; width:400px; height:200px; font-family:dotum,"",verdana;line-height:17px;font-size:12px;color:#555;} .tabmenu img {border:none;vertical-align:top;} .tabmenu ul {margin:0px;padding:0px;list-style:none;margin-top: 15px;} .tabmenu ul li {float:left} .tabmenu .tabcontent {display:none; width:240px;height:125px;position:absolute; left:0px;top:60px } .tabmenu .morebtn {position:absolute;right:0;top:30px;} </style>
javascript (설명은 주석으로 대체함)
<script> $(document).ready(function(){ $(".tabmenu").each(function(){ var tab = $(this).children("ul"); var tabBtn = tab.children("li").children("a"); var content = tabBtn.nextAll(); // 탭버튼을 클릭했을때 tabBtn.click(function(){ // 이미 on 상태면 pass if( $(this).hasClass("on") ) return; // 모든 컨텐츠 부분을 안보이게 한뒤 content.hide(); // 클릭한 tab 버튼(a태그) 옆의 모든 태그들은 보이도록 $(this).nextAll().show(); // 모든탭 버튼에 있던 on 클래스를 빼고 // 현재 클릭한 탭메뉴 버튼에 on 클래스 추가 tabBtn.removeClass("on"); $(this).addClass("on"); // 탭버튼를 쭉 돌면서 on 클래스가 있는 버튼만 on 이미지로 바꾸고 // 나머지 버튼들은 off 이미지로 바꾼다. tabBtn.each(function(){ var src; var img = $(this).children("img"); if( $(this).hasClass("on") ){ src = img.attr("src").replace("_off.", "_on."); }else{ src = img.attr("src").replace("_on.", "_off."); } img.attr("src", src); }); }); // 맨첫번째 탭버튼 클릭처리 tabBtn.eq(0).click(); }); }); </script>
※ 요렇게 tabmenu 클래스만 지정해서 똑같은 html 구조면 동시에 여러게 탭메뉴를 맹글수 있다.
<div class="tabmenu"> <h2>첫번째 탭메뉴</h2> <ul> <li><a href="#link"><img src="img/menu_01_off.gif" alt="메뉴01" /></a> <ul class="tabcontent"> <li><a href="#">1제목이 나오는부분.....</a></li> <li><a href="#">2제목이 나오는부분.....</a></li> </ul> <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p> </li> <li><a href="#link"><img src="img/menu_02_off.gif" alt="메뉴02" /></a> <ul class="tabcontent"> <li><a href="#">무우우우우우우우.....</a></li> <li><a href="#">5무우우우우우우우ㄴ.....</a></li> </ul> <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p> </li> <li><a href="#link"><img src="img/menu_03_off.gif" alt="메뉴03" /></a> <ul class="tabcontent"> <li><a href="#">요농이 요느마</a></li> <li><a href="#">요농이 요느마</a></li> </ul> <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p> </li> <li><a href="#link"><img src="img/menu_04_off.gif" alt="메뉴04" /></a> <ul class="tabcontent"> <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li> <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li> </ul> <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p> </li> </ul> </div> <div class="tabmenu"> <h2>두번째 탭메뉴</h2> <ul> <li><a href="#link"><img src="img/menu_01_off.gif" alt="메뉴01" /></a> <ul class="tabcontent"> <li><a href="#">제목이 나오는부분.....</a></li> <li><a href="#">제목이 나오는부분.....</a></li> </ul> </li> <li><a href="#link"><img src="img/menu_02_off.gif" alt="메뉴02" /></a> <ul class="tabcontent"> <li><a href="#">무우우우우우우우.....</a></li> <li><a href="#">무우우우우우우우ㄴ.....</a></li> </ul> </li> <li><a href="#link"><img src="img/menu_03_off.gif" alt="메뉴03" /></a> <ul class="tabcontent"> <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li> <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li> </ul> </li> <li><a href="#link"><img src="img/menu_04_off.gif" alt="메뉴04" /></a> <ul class="tabcontent"> <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li> <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li> </ul> </li> </ul> </div>
'Javascript 예제' 카테고리의 다른 글
jQuery 로 탭 만들어 보기 (0) | 2018.10.12 |
---|---|
Javascript 로 초성검색하기 (0) | 2018.06.26 |
네이버맵 커스텀 컨트롤(CustomControl) 버튼 지도에 추가하기 (0) | 2014.04.29 |
jQuery 로 탭메뉴 보였다 안보였다 맹글기 (3) | 2014.04.10 |
jQuery로 Outer HTML 가져오기 (2) | 2012.11.06 |
jQuery 로 탭메뉴 보였다 안보였다 맹글기
Javascript 예제 2014. 4. 10. 17:11
탭을 클릭할때 탭메뉴 이미지가 on, off 되고 해당되는 서브메뉴 div 가 보였다 안보였다 하는 샘플을 맹글어 보았다.
주석을 싹 달아놨으니 응용하는데 큰 문제는 없을것이다.
※ 롤오버 이미지 이름은 프로그램 편의상 xxxxxx.png, xxxxxx_on.png 요렇게 해야 쪽바로 작동한다.
※ png 파일이 아니라 gif 나 뭐 다른 확장자면 소스중에 .toggle() 요부분에다 옵션으로 지정할 수는 있다. 고건 주석으로 설명되 있음.
html
<div id="wrap"> <div id="tabMenu"> <ul> <li><a href="#" title="메뉴1"><img src="images/tab_01.png" alt="메뉴1" /></a></li> <li><a href="#" title="메뉴2"><img src="images/tab_02.png" alt="메뉴1" /></a></li> <li><a href="#" title="메뉴3"><img src="images/tab_03.png" alt="메뉴2" /></a></li> <li><a href="#" title="메뉴4"><img src="images/tab_04.png" alt="메뉴3" /></a></li> <li><a href="#" title="메뉴5"><img src="images/tab_05.png" alt="메뉴4" /></a></li> <li><a href="#" title="메뉴6"><img src="images/tab_06.png" alt="메뉴5" /></a></li> <li><a href="#" title="메뉴7"><img src="images/tab_07.png" alt="메뉴6" /></a></li> </ul> </div> <div id="tabSubMenu"> <div>서브1<div>룰루랄라~</div></div> <div>서브2</div> <div>서브3</div> <div>서브4</div> <div>서브5</div> <div>서브6</div> <div>서브7</div> </div> </div>
javascript
var tabMenu = $("#tabMenu ul>li>a"); var tabSubMenu = $("#tabSubMenu>div"); // 모든 서브메뉴 안보이게 tabSubMenu.hide(); // 탭메뉴 a 를 클릭했을때 tabMenu.on("click", function(e){ // 클릭한 메뉴가 몇번째 메뉴인지 가져옴 var idx = tabMenu.index($(this)); // 모든 서브메뉴 안보이게 tabSubMenu.hide(); // 서브메뉴중에서 클릭한 메뉴에 해당하는 서브메뉴만 보이게 tabSubMenu.eq(idx).show(); // 현재 on 이미지를 off 이미지로 변경 tabMenu.find("img.on").removeClass("on").toggle(); // 클릭한 탭 이미지만 on 이미지로 변경 $(this).find("img").addClass("on").toggle({to:"on"}); }); /** 이미지 토클 훌러그인 $("img").toggle(); // on이면 off로, off면 on 이미지로 $("img").toggle({to:"on"}); // 무조건 on 이미지로 // on, off 이미지 패턴설정 $("img").toggle({to:"on", on:"_on.gif", ".gif"}); */ $.fn.toggle = function(opt){ var base = { to : null, on : "_on.png", off : ".png" }; $.extend(base, opt); this.each(function(){ var el = $(this); if(!el.is("img")) return; var src = conv = el.attr("src"); // to 옵션이 있을때 if( base.to ){ if( base.to=="on" && (src.indexOf(base.on)<0) ) conv = src.replace(base.off,base.on); else if( base.to=="off" ) conv = src.replace(base.on,base.off); } // to 옵션이 없으면 토글 처리 else{ conv = (src.indexOf(base.on) < 0) ? src.replace(base.off,base.on) : src.replace(base.on,base.off); } el.attr("src", conv); el.data("orgimg", conv); }); return this; }; // 페이지 로딩시 맨 첫번째 메뉴 튀어나와 있게 함. tabMenu.eq(0).click();
전체소스
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> </head> <body> <div id="wrap"> <div id="tabMenu"> <ul> <li><a href="#" title="메뉴1"><img src="images/tab_01.png" alt="메뉴1" /></a></li> <li><a href="#" title="메뉴2"><img src="images/tab_02.png" alt="메뉴1" /></a></li> <li><a href="#" title="메뉴3"><img src="images/tab_03.png" alt="메뉴2" /></a></li> <li><a href="#" title="메뉴4"><img src="images/tab_04.png" alt="메뉴3" /></a></li> <li><a href="#" title="메뉴5"><img src="images/tab_05.png" alt="메뉴4" /></a></li> <li><a href="#" title="메뉴6"><img src="images/tab_06.png" alt="메뉴5" /></a></li> <li><a href="#" title="메뉴7"><img src="images/tab_07.png" alt="메뉴6" /></a></li> </ul> </div> <div id="tabSubMenu"> <div>서브1<div>룰루랄라~</div></div> <div>서브2</div> <div>서브3</div> <div>서브4</div> <div>서브5</div> <div>서브6</div> <div>서브7</div> </div> </div> <script> var tabMenu = $("#tabMenu ul>li>a"); var tabSubMenu = $("#tabSubMenu>div"); // 모든 서브메뉴 안보이게 tabSubMenu.hide(); // 탭메뉴 a 를 클릭했을때 tabMenu.on("click", function(e){ // 클릭한 메뉴가 몇번째 메뉴인지 가져옴 var idx = tabMenu.index($(this)); // 모든 서브메뉴 안보이게 tabSubMenu.hide(); // 서브메뉴중에서 클릭한 메뉴에 해당하는 서브메뉴만 보이게 tabSubMenu.eq(idx).show(); // 현재 on 이미지를 off 이미지로 변경 tabMenu.find("img.on").removeClass("on").toggle(); // 클릭한 탭 이미지만 on 이미지로 변경 $(this).find("img").addClass("on").toggle({to:"on"}); }); /** 이미지 토클 훌러그인 $("img").toggle(); // on이면 off로, off면 on 이미지로 $("img").toggle({to:"on"}); // 무조건 on 이미지로 // on, off 이미지 패턴설정 $("img").toggle({to:"on", on:"_on.gif", ".gif"}); */ $.fn.toggle = function(opt){ var base = { to : null, on : "_on.png", off : ".png" }; $.extend(base, opt); this.each(function(){ var el = $(this); if(!el.is("img")) return; var src = conv = el.attr("src"); // to 옵션이 있을때 if( base.to ){ if( base.to=="on" && (src.indexOf(base.on)<0) ) conv = src.replace(base.off,base.on); else if( base.to=="off" ) conv = src.replace(base.on,base.off); } // to 옵션이 없으면 토글 처리 else{ conv = (src.indexOf(base.on) < 0) ? src.replace(base.off,base.on) : src.replace(base.on,base.off); } el.attr("src", conv); el.data("orgimg", conv); }); return this; }; // 페이지 로딩시 맨 첫번째 메뉴 튀어나와 있게 함. tabMenu.eq(0).click(); </script> </body> </html>
※ 마우스 오버될때도 적용할려면~~?
// 탭메뉴 a 를 클릭했을때 tabMenu.on("click", function(e){ // 클릭한 메뉴가 몇번째 메뉴인지 가져옴 var idx = tabMenu.index($(this)); // 모든 서브메뉴 안보이게 tabSubMenu.hide(); // 서브메뉴중에서 클릭한 메뉴에 해당하는 서브메뉴만 보이게 tabSubMenu.eq(idx).show(); // 현재 on 이미지를 off 이미지로 변경 tabMenu.find("img.on").removeClass("on").toggle(); // 클릭한 탭 이미지만 on 이미지로 변경 $(this).find("img").addClass("on").toggle({to:"on"}); }).on("mouseover", function(){ // 마우스 오버됬을때 클릭한것처럼 동작 $(this).click(); });
메뉴 심플하기 그지 없다.
'Javascript 예제' 카테고리의 다른 글
jQuery 로 탭메뉴를 맹글어 보아요~ (8) | 2014.10.15 |
---|---|
네이버맵 커스텀 컨트롤(CustomControl) 버튼 지도에 추가하기 (0) | 2014.04.29 |
jQuery로 Outer HTML 가져오기 (2) | 2012.11.06 |
jQuery 로 페이지를 벗어날때 확인창 띄우기 (1) | 2012.06.08 |
jQuery 로 원하는 갯수만큼 checkbox 선택하기 (1) | 2011.11.24 |