[jQuery] 클릭, 마우스 Over 시 메뉴 Slide 보여주기

[jQuery] 클릭, 마우스 Over 시 메뉴 Slide 보여주기

- 마우스를 클릭할 때 서브 메뉴들이 슬라이드로 열리고 닫힘

- 마우스가 Over 될때, Out 될 때 서브 메뉴들이 슬라이드로 열리고 닫힘

< 소스 >

<!DOCTYPE html> <head> <meta charset="utf-8"> <title>alzio jquery</title> <script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script> <style> * { margin: 0px; padding: 0px;} body { font-family:Arial, sans-serif; font-size:15px; background-color: #3366FF; } #ALL { margin:500px 0 0 200px; width:600px; } h3{font-family:"돋움", Arial, Dotum ,Sans-serif; font-size:16px; font-weight:normal; margin-bottom: 20px } .menu1 { width: 300px; float:left; } .menu2 { width: 300px; float:left; margin-left:20px;} .head { background: #3399CC; color:#fff; padding: 8px; cursor: pointer; margin-top:3px; font-family:Arial, sans-serif; font-size:24px} .body { display:none;} .body a { display:block; text-decoration:none; background-color:#8FC9E4; color:#fff; padding:3px 0 3px 10px;} .body a:hover { color: #fff;} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head> <div id="ALL"> <table> <tr> <td valign="top" align="left"> <div class="menu1"> <h3>클릭이벤트</h3> <p class="head">Safety & Tolerability</p> <div class="body"> <a href="#">120 fold dose well tolerated</a> <a href="#">Organ-specific AE rates</a> <a href="#">safety in clinical trials</a> <a href="#">safety & tolerability in 7,400pts with T2DM</a> </div> <p class="head">Efficacy</p> <div class="body"> <a href="#">sub1</a> <a href="#">sub2</a> <a href="#">sub3</a> </div> <p class="head">Unique Characteristics</p> <div class="body"> <a href="#">sub1</a> <a href="#">sub2</a> <a href="#">sub3</a> </div> </div> </td> <td valign="top" align="left"> <div class="menu2"> <h3>마우스오버이벤트</h3> <div class="wrap_sub_menu"> <p class="head">main1</p> <div class="body"> <a href="#">sub1</a> <a href="#">sub2</a> <a href="#">sub3</a> </div> </div> <div class="wrap_sub_menu"> <p class="head">main2</p> <div class="body"> <a href="#">sub1</a> <a href="#">sub2</a> <a href="#">sub3</a> </div> </div> <div class="wrap_sub_menu"> <p class="head">main3</p> <div class="body"> <a href="#">sub1</a> <a href="#">sub2</a> <a href="#">sub3</a> </div> </div> </div> </td> </tr> </table> </div> <br/><br/><br/><br/><br/> <script type="text/javascript"> $(function(){ $(".menu1 p.head").click(function(){ $(this).css("background", "#336699").next("div.body").slideToggle(300).siblings("div.body").slideUp("slow"); $(this).siblings("p.head").css("background", "#3399CC"); }); // // 1번, 2번 중에 알아서 선택 // // 마우스가 Over 되었을때 펼쳐지고 밖으로 나가면 축소됨 ( 1번 선택 ) $(".wrap_sub_menu").hover(function(){ $(this).css("background", "#336699").children("div.body").slideDown(300).siblings("div.body").slideUp("slow"); $(this).siblings("p.head").css("background", "#3399CC"); }, function(){ $(this).css("background", "#336699").children("div.body").slideUp("slow"); $(this).siblings("p.head").css("background", "#3399CC"); }); // 마우스가 Over 되었을때 펼쳐지고 다른 메뉴가 아니고 그냥 나가면 펼쳐진 상태로 있음 ( 2번 선택 ) $(".menu2 p.head").mouseover(function(){ $(this).css("background", "#336699").next("div.body").slideDown(300).siblings("div.body").slideUp("slow"); $(this).siblings("p.head").css("background", "#3399CC"); }); }); </script>

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

'프로그래밍 > JavaScript' 카테고리의 다른 글

[javascript] 현재 일자 가져오기 ( YYYY-MM-DD HH:mm:SS ) (0)	2014.05.09
[jQuery] 게시판 댓글, 답글 처리 로직 (0)	2014.04.18
[jquery] 해당 block 안의 모든 링크 새창(_blank)으로 띄우기 (0)	2013.11.05
iframe height change by childe page resize (0)	2013.09.05
[jQuery] 리스트 롤링 ( list rolling ) (1)	2013.08.07

프로그램이 좋다

[jQuery] 클릭, 마우스 Over 시 메뉴 Slide 보여주기

'프로그래밍 > JavaScript' 카테고리의 다른 글

티스토리툴바

[jQuery] 클릭, 마우스 Over 시 메뉴 Slide 보여주기

'프로그래밍 > JavaScript' 카테고리의 다른 글

'프로그래밍/JavaScript' Related Articles

티스토리툴바