Jquery, vertical menu on / over effect example

Jquery, vertical menu on / over effect example

2015. 3. 24. 16:24ㆍIT/Jquery Plugin/Tip

$(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>

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

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

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

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

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

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

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

</a></li>

</a></li>

</a></li>

</a></li>

</a></li>

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

</a></li>

</a></li>

</a></li>

</a></li>

</a></li>

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

</a></li>

</a></li>

</a></li>

</a></li>

</a></li>

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

</a></li>

</a></li>

</a></li>

</a></li>

</a></li>

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

</a></li>

</a></li>

</a></li>

</a></li>

</a></li>

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

캔드리의 얕은 지식들

캔드리의 얕은 지식들

태그

최근글

댓글

공지사항

아카이브

'IT > Jquery Plugin/Tip' 카테고리의 다른 글

관련글

티스토리툴바