Jquery, vertical menu on / over effect example
2015. 3. 24. 16:24ㆍIT/Jquery Plugin/Tip
Jquery, vertical menu on / over effect example
<script>
$(document).ready(function(){
$('ul.left_menu_con > li > a').attr ('href', function(i, value) {
href_str = value.substr((value.length-2),1);
// 대메뉴 menu num 값 셋팅
if(href_str.indexOf("<?=substr($tp[local],0,1)?>") >= 0 ){
$('.left_img').eq(i).attr("src","<?=$leftmenu_skin_path?>/img/left_menu0<?=substr($tp[local],0,1)?>_over.png");
$('.left_img').eq(i).removeAttr('onmouseover').removeAttr('onmouseout');
$(this).parent("li").find(".left_sub_all_1").css("display","block");
$(this).parent("li").find(".left_sub_all_1").css("z-index","0");
// 서브메뉴 menu num 값 셋팅
$("ul.left_menu_con > li").eq(i).find("div > ul > li > a").attr ('href', function(j, value) {
if(value.indexOf("<?=$tp[local]?>") >= 0 ){
$("ul.left_menu_con > li").eq(i).find("div > ul > li > a > img.left_sub_img").eq(j).attr("src","<?=$leftmenu_skin_path?>/img/left_menu_s<?=$tp[local]?>_over.png");
$("ul.left_menu_con > li").eq(i).find("div > ul > li > a > img.left_sub_img").eq(j).removeAttr('onmouseover').removeAttr('onmouseout');
}
});
}else{
}
});
$(".left_sub_all_1").mouseover(function(){
idx = $(".left_img").index($(this).parent("li").find(".left_img"));
$(this).parent("li").find(".left_img").attr("src","<?=$leftmenu_skin_path?>/img/left_menu0" + (idx+1) + "_over.png");
});
// menu on / over effect
var dropdownwithdelay = function( $navigation,submenuClass,delay ){
$navigation.each(function(){
var $triggers, $this = $(this);
$triggers = $this.find( "." + submenuClass ).parent("li");
$triggers.hover(function(){
$(this).find( "." + submenuClass ).css("z-index","100");
$(this).find( "." + submenuClass ).stop(true,true).show(150);
},function(){
//$(this).find( "." + submenuClass ).stop(true,true).delay( delay ).hide("fast");
$(".left_menu_con > li").each(function(idx){
if($(this).children("a").attr("href").substr(($(this).children("a").attr("href").length-2),1) != "<?=substr($tp[local],0,1)?>"){
$(".left_img").eq(idx).attr("src","<?=$leftmenu_skin_path?>/img/left_menu0" + (idx+1) + ".png");
}
});
if($(this).children("a").attr("href").substr(($(this).children("a").attr("href").length-2),1) != "<?=substr($tp[local],0,1)?>"){
$(this).find( "." + submenuClass ).stop(true,true).delay( delay ).hide("fast");
}else{
$(this).find( "." + submenuClass ).css("z-index","1");
}
});
});
}
dropdownwithdelay( $("ul.left_menu_con:eq(0)"), "left_sub_all_1",200 );
});
</script>
<style>
.left_menu_con{position:relative;}
</style>
<ul class="left_menu_con">
<li ><a href="<?=$g4[path]?>/sp.php?p=11"><img class="left_img" src="<?=$leftmenu_skin_path?>/img/left_menu01.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu01_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu01.png"'></a>
<div class="left_sub_all_1" >
<ul class="left_sub_ul" style="margin-top:250px;">
<li><a href="<?=$g4[path]?>/sp.php?p=11">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s11.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s11_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s11.png"'>
</a></li>
<li><a href="<?=$g4[path]?>/sp.php?p=12">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s12.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s12_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s12.png"'>
</a></li>
<li><a href="<?=$g4[path]?>/sp.php?p=13">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s13.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s13_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s13.png"'>
</a></li>
<li><a href="<?=$g4[path]?>/sp.php?p=14">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s14.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s14_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s14.png"'>
</a></li>
<li><a href="#">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s15.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s15_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s15.png"'>
</a></li>
<li><a href="#">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s16.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s16_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s16.png"'>
</a></li>
</ul>
</div>
</li>
<li ><a href="<?=$g4[path]?>/sp.php?p=21"><img class="left_img" src="<?=$leftmenu_skin_path?>/img/left_menu02.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu02_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu02.png"'></a>
<div class="left_sub_all_1" >
<ul class="left_sub_ul" style="margin-top:300px;">
<li><a href="<?=$g4[path]?>/sp.php?p=21">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s11.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s11_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s11.png"'>
</a></li>
<li><a href="#">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s12.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s12_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s12.png"'>
</a></li>
<li><a href="#">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s13.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s13_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s13.png"'>
</a></li>
<li><a href="#">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s14.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s14_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s14.png"'>
</a></li>
<li><a href="#">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s15.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s15_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s15.png"'>
</a></li>
<li><a href="#">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s16.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s16_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s16.png"'>
</a></li>
</ul>
</div>
</li>
<li><a href="<?=$g4[path]?>/sp.php?p=31"><img class="left_img" src="<?=$leftmenu_skin_path?>/img/left_menu03.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu03_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu03.png"'></a>
<div class="left_sub_all_1" >
<ul class="left_sub_ul" style="margin-top:330px;">
<li><a href="<?=$g4[path]?>/sp.php?p=31">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s11.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s11_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s11.png"'>
</a></li>
<li><a href="#">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s12.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s12_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s12.png"'>
</a></li>
<li><a href="#">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s13.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s13_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s13.png"'>
</a></li>
<li><a href="#">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s14.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s14_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s14.png"'>
</a></li>
<li><a href="#">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s15.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s15_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s15.png"'>
</a></li>
<li><a href="#">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s16.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s16_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s16.png"'>
</a></li>
</ul>
</div>
</li>
<li><a href="<?=$g4[path]?>/sp.php?p=41"><img class="left_img" src="<?=$leftmenu_skin_path?>/img/left_menu04.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu04_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu04.png"'></a>
<div class="left_sub_all_1" >
<ul class="left_sub_ul" style="margin-top:380px;">
<li><a href="<?=$g4[path]?>/sp.php?p=41">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s11.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s11_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s11.png"'>
</a></li>
<li><a href="#">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s12.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s12_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s12.png"'>
</a></li>
<li><a href="#">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s13.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s13_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s13.png"'>
</a></li>
<li><a href="#">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s14.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s14_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s14.png"'>
</a></li>
<li><a href="#">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s15.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s15_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s15.png"'>
</a></li>
<li><a href="#">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s16.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s16_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s16.png"'>
</a></li>
</ul>
</div>
</li>
<li><a href="<?=$g4[path]?>/sp.php?p=51"><img class="left_img" src="<?=$leftmenu_skin_path?>/img/left_menu05.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu05_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu05.png"'></a>
<div class="left_sub_all_1" >
<ul class="left_sub_ul" style="margin-top:420px;">
<li><a href="<?=$g4[path]?>/sp.php?p=51">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s11.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s11_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s11.png"'>
</a></li>
<li><a href="#">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s12.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s12_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s12.png"'>
</a></li>
<li><a href="#">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s13.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s13_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s13.png"'>
</a></li>
<li><a href="#">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s14.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s14_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s14.png"'>
</a></li>
<li><a href="#">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s15.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s15_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s15.png"'>
</a></li>
<li><a href="#">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s16.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s16_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s16.png"'>
</a></li>
</ul>
</div>
</li>
<li><a href="<?=$g4[path]?>/sp.php?p=61"><img class="left_img" src="<?=$leftmenu_skin_path?>/img/left_menu06.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu06_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu06.png"'></a>
<div class="left_sub_all_1">
<ul class="left_sub_ul" style="margin-top:460px;">
<li><a href="<?=$g4[path]?>/sp.php?p=61">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s11.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s11_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s11.png"'>
</a></li>
<li><a href="#">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s12.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s12_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s12.png"'>
</a></li>
<li><a href="#">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s13.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s13_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s13.png"'>
</a></li>
<li><a href="#">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s14.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s14_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s14.png"'>
</a></li>
<li><a href="#">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s15.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s15_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s15.png"'>
</a></li>
<li><a href="#">
<img class='left_sub_img' src="<?=$leftmenu_skin_path?>/img/left_menu_s16.png" onmouseover='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s16_over.png"' onmouseout='this.src="<?=$leftmenu_skin_path?>/img/left_menu_s16.png"'>
</a></li>
</ul>
</div>
</li>
</ul>
'IT > Jquery Plugin/Tip' 카테고리의 다른 글
table rowspan 테이블 rowspan 합치는 jquery (0) | 2015.04.09 |
---|---|
javascript onclick 이벤트에서 location.href 사용시 "_blank" 효과로 새창 링크효과 (0) | 2015.03.24 |
Jquery all Checkbox (0) | 2015.03.24 |
Jquery, placeholder ie7에서 사용 가능하도록.... (0) | 2015.03.24 |
이메일 2개 나눠서 입력받고 나중에 Jquery로 input text 1개에다가 값 설정 및 넣기 - 그누보드 게시판 메일 입력시 (1) | 2015.03.24 |