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

프로그래밍/JavaScript

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

도깨비방망이 2014. 2. 7. 14:21

[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>

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