검색결과 리스트
글
jQuery 마우스 롤오버 이미지 기능과 메뉴 활성화 및 필요없는 메뉴 지우기
js API/jquery
2012. 4. 26. 16:25
jQuery 마우스 롤오버 이미지 기능과
메뉴 활성화 및
필요없는 메뉴 감추기[hidden]
이젠 쉽게 메뉴 롤오버를 적용 시키세요
메뉴 뿐 아니라 탭메뉴 적용에도 탁월한 기능을 보입니다.
브라우저 테스트 : 익스[6,7,8,9], 파이어폭스, 사파리, 오페라, 크롬, 안드로이드, 아이폰, 탭, 아이패드
#@ HTML
< nav id="Nav1"> < a href="#" title="메뉴1">< img src="./img/tab_a_01_off.gif" /> < a href="#" title="메뉴2">< img src="./img/tab_a_02_off.gif" /> < a href="#" title="메뉴3">< img src="./img/tab_a_06_off.gif" /> < a href="#" title="메뉴4">< img src="./img/tab_a_03_off.gif" /> < div class="sub_menu4"> < a href="#" title="메뉴4 서브메뉴1">< img src="./img/tab_b_01_off.gif"> < a href="#" title="메뉴4 서브메뉴2">< img src="./img/tab_b_02_off.gif"> < a href="#" title="메뉴4 서브메뉴3">< img src="./img/tab_b_03_off.gif"> < /div> < a href="#" title="메뉴5">< img src="./img/tab_a_04_off.gif" /> < /nav>
<@# 사용법>
1. 1차 메뉴에 롤오버 기능 적용 방법
< script type="text/javascript" src="hover.js" >< /script> < script type="text/javascript"> $(document).ready(function() { // 1차 메뉴중 [메뉴1] 활성화 시키기 $('.hover').fusionNavi({'element':'#NavI1','current':'','remove':''}); }); < /script>
2. 1차 메뉴 롤오버 기능 및 "메뉴1번" 활성화 적용 방법
< script type="text/javascript" src="hover.js" >< /script> < script type="text/javascript"> $(document).ready(function() { // 1차 메뉴중 [메뉴1] 활성화 시키기 $('.hover').fusionNavi({'element':'#NavI1','current':0,'remove':''}); // 1차 메뉴 4번의 2차 메뉴 비활성화 $('.hover').fusionNavi({'element':'.sub_menu4','current':'','remove':''}); }); < /script>
3. 1차 "메뉴4번" 활성화 2차 "메뉴1번" 활성화 적용 방법
< script type="text/javascript" src="hover.js" >< /script> < script type="text/javascript"> $(document).ready(function() { // 1차 메뉴중 [메뉴4] 활성화 시키기 $('.hover').fusionNavi({'element':'#NavI1','current':3,'remove':''}); // 1차 메뉴 4번의 2차 메뉴 1번 활성화 $('.hover').fusionNavi({'element':'.sub_menu4','current':0,'remove':''}); }); < /script>
4. 1차 "메뉴5번" 메뉴 감추기(hidden) 방법
< script type="text/javascript" src="hover.js" >< /script> < script type="text/javascript"> $(document).ready(function() { // 1차 메뉴중 [메뉴1] 활성화 시키기 $('.hover').fusionNavi({'element':'#NavI1','current':0,'remove':4}); // 1차 메뉴 4번의 2차 메뉴 비활성화 $('.hover').fusionNavi({'element':'.sub_menu4','current':'','remove':''}); }); < /script>
@# 간단 설명
$('.hover').fusionNavi({'element':'[#아이디명 || .class명]', // 특정 "#아이디" 또는 ".클래스" 밑에 있는 <a 태그로 감싸인 <img 태그에 적용
'current':'[ 3 || null ]', // 적용 순번 및 비활성화 [ 0 부터 시작 || 비활성화]
remove':'[ 4 || null ]' // 감추고 싶은 메뉴 [ 0 부터 시작 || 비활성화]
});
#@ script 소스 /======================================================
jQuery(function($) { $.fn.fusionNavi= function(params) { var targetID = params['element']; //적용위치 var current_position = params['current']; //현재활성화 메뉴 순번 var remove_position = params['remove']; //메뉴 감추기(hidden) 메뉴 순번 // 현재 메뉴 제외, 나머지에 class="hover" $(targetID+' > a img').addClass('hover'); // 메뉴 감추기(hidden) try{ $(targetID+' > a:eq('+remove_position+') img').remove(); }catch(e){} // 현재 메뉴 활성화 try{ if(current_position || current_position=="0"){ var hoverOnCur = $(targetID+' > a img').eq(current_position).attr('src').replace('_off','_on'); $(targetID+' > a img').eq(current_position).attr('src', hoverOnCur); $(targetID+' > a img').eq(current_position).removeClass('hover'); } }catch(e){} // on $(targetID+' > a img.hover').mouseenter(function(){ var hoverOn = $(this).attr('src').replace('_off','_on'); $(this).attr('src', hoverOn); }); // off $(targetID+' > a img.hover').mouseleave(function(){ var hoverOff = $(this).attr('src').replace('_on','_off'); $(this).attr('src', hoverOff); }); } });
'js API > jquery' 카테고리의 다른 글
jQuery select 셀렉트 메뉴 onchange 이벤트 (0) | 2012.04.29 |
---|---|
jQuery 특정 자바스크립트 로딩 후 실행 하기(동적 스크립트 로딩 및 액션) (0) | 2012.04.27 |
jQuery를 이용한 메인 공지 에니메이션 (0) | 2012.04.26 |
jQuery 레이어 창 만들기 (0) | 2012.04.20 |
jquery 정규식 표현 문자 검색 등 (0) | 2012.04.19 |