테스트 사이트 - 개발 중인 베타 버전입니다
SIR

자바스크립으로 플래쉬 메뉴처럼

투노노
프로필 보기이 회원 글보기
 · 18년 전 · 4027 · 10
톡박에 한번 올렸던 소스인데 조금 다듬어서 올립니다.
적절히 수정&가공하시면 멋진 메뉴가 나올거에요~

<html>
 <head>
  <title>Menu</title>
 </head>
<script>
var delay = 3;            // 메뉴 스피드(낮을수록 빠름)
var m_length = 20;    // 메뉴 간격
var sel_l_length = 30;    // 선택한 메뉴와 이전 메뉴 간격
var sel_r_length = 60;    // 선택한 메뉴와 다음 메뉴 간격


var m_sel = 0;            // 메뉴 선택 상태
var m_max = 0;        // 메인메뉴 갯수
var sm_alpha = 0;    // 서브메뉴 투명도
var id = new Array();    // 메인메뉴 ID
var sid = new Array();    // 서브메뉴 ID
var m_top = 0;                // 메인메뉴 y 위치
function on_load(){
    while(document.getElementById("menu"+(m_max+1)) != null){
        m_max++;
        id[m_max] = document.getElementById("menu"+m_max);
        sid[m_max] = document.getElementById("smenu"+m_max);
    };
    m_top = id[1].offsetTop;
    m_act();
}
function m_over(m){
    m_sel = m;
    for(i=1;i<=m_max;i++){
        if(sid[i] != null){
            if(m_sel == i){
                id[i].style.fontWeight = 'bold';
                sid[i].style.display = "";
                sm_alpha = 0;
                if ((navigator.appName.indexOf('Microsoft')+1)) {
                    sid[i].filters.alpha.opacity = sm_alpha;
                }else{
                    sid[i].style.opacity = (sm_alpha/100);
                }
                sid[i].style.top = id[i].offsetTop + id[i].offsetHeight + 40;
            }else{
                id[i].style.fontWeight = '';
                sid[i].style.display = "none";
            }
        }
    }
}
function m_act(){
    var goy = 0;
    for(i=1;i<=m_max;i++){

        // 메인메뉴 좌우 이동
        if(i>1)
            temp = id[i-1].offsetWidth + id[i-1].offsetLeft;
        if(i==1){
            gox=id[i].offsetLeft;
        }else if(m_sel == i){
            gox =  temp + sel_l_length;
        }else if(m_sel+1 == i){
            gox =temp + sel_r_length;
        }else{
            gox = temp + m_length;
        }
        id[i].style.left = Math.ceil(id[i].offsetLeft - (id[i].offsetLeft - (gox))/delay)+"px";

        // 메인메뉴 상하 이동
        if(m_sel == i){
            id[i].style.top = Math.ceil(id[i].offsetTop - (id[i].offsetTop - (m_top + 7))/delay)+"px";
        }else if(m_sel!=0){
            id[i].style.top = Math.ceil(id[i].offsetTop - (id[i].offsetTop - (m_top - 5))/delay)+"px";
        }

        // 서브메뉴
        if(m_sel == i && sid[i] != null){
            // 서브메뉴 투명도
            if(sm_alpha < 100){
                sm_alpha += 5;
                if ((navigator.appName.indexOf('Microsoft')+1)) {
                    sid[i].filters.alpha.opacity = sm_alpha;
                }else{
                    sid[i].style.opacity = (sm_alpha/100);
                }
            }
            // 서브메뉴 아래서부터 위로 나타남
            goy = id[i].offsetTop + id[i].offsetHeight;
            sid[i].style.top = (sid[i].offsetTop - (sid[i].offsetTop - goy)/delay)+"px";
        }
    }
    setTimeout('m_act()',20);
}

</script>
<style>
.sm_a{color: #666666; text-decoration:none; padding:0px 3px 0px 2px}
.sm_a:hover {color: #FFFFFF; text-decoration:none; background:#666666; padding:0px 3px 0px 2px}
div{font-family:verdana; font-size:10px; letter-spacing:-1px}
.smenu{top:50px; position:absolute; filter:alpha(opacity=0); color:#DDDDDD}
.mmenu{top:30px; position:absolute; cursor:pointer; padding-right:2px; color:#666666}
</style>
<body onload='on_load()'>
    <div class=mmenu style='left:200px;' id=menu1 onClick='m_over(1)'>
    ABOUT US<br>
    </div>
    <div id='smenu1' class=smenu style='left:200px; display:none'><a href='' class=sm_a>menu1</a> | <a href='' class=sm_a>menu2</a> | <a href='' class=sm_a>menu3</a></div>
    <div class=mmenu style='left:280px;' id=menu2 onClick='m_over(2)'>
    PRODUCT<br>
    </div>
    <div id='smenu2' class=smenu style='left:250px; display:none'><a href='' class=sm_a>menu4</a> | <a href='' class=sm_a>menu5</a> | <a href='' class=sm_a>menu6</a></div>
    <div class=mmenu style='left:360px;' id=menu3 onClick='m_over(3)'>
    STORY<br>
    </div>
    <div id='smenu3' class=smenu style='left:310px; display:none'><a href='' class=sm_a>menu7</a> | <a href='' class=sm_a>menu8</a> | <a href='' class=sm_a>menu9</a></div>
</body>
</html>
[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]
목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 10개

야간열차
프로필 보기이 회원 글보기
 18년 전
우왓 ~ 고맙습니다. 지금 혼자 끙끙대던 건데^^
강강술냄세
프로필 보기이 회원 글보기
 18년 전
우아~이거 최곤데요
별빛님
프로필 보기이 회원 글보기
 18년 전
와우 멋진데요 감사 합니다
마프
프로필 보기이 회원 글보기
 18년 전
정말 좋네요 감사합니다.
투사
프로필 보기이 회원 글보기
 18년 전
블루비 자료와 같은데..요?
얼챙이
프로필 보기이 회원 글보기
 17년 전
플레시메뉴처럼
지드
프로필 보기이 회원 글보기
 17년 전
감사합니다^^

멋지네요 - ㅎㅎㅎ
보리투씨
프로필 보기이 회원 글보기
 17년 전
좋네요!! 추천한방^^
은지요☆
프로필 보기이 회원 글보기
 14년 전
와,이거 정말 필요했었는데..감사합니다 ^^
한사
프로필 보기이 회원 글보기
 13년 전
정말이지 자바스크립트의 무한한가능성을 다시 한번 되새겨봅니다.
정말 대단하시네요~ 감탄했습니다.
정말 수고많으셨습니다. 새해 복 많이받으세요^^

게시글 목록

번호 제목
11797
Flash 플래시 1 픽셀 정도 어긋나는 현상때문에요....... 6
11796
기타 Progress 로딩바
29161
HTML 체크박스 전체선택 소스
11795
기타 텍스트 박스의 내용을 쿠키로 저장하는 스크립트 입니다.
11794
PHP [펌]PHP 애플리케이션을 가장 빠르게, Part 2: PHP 애플리케이션을 프로파일링 하여 느려진 코드를 진단 및 빠르게 하기 (한글)
11793
PHP [펌]PHP 애플리케이션을 가장 빠르게, Part 1: opcode 캐시 소프트웨어로 성능과 처리량 높이기
11789
MySQL Oracle 과연 대용량에만 사용가능할까? 3
11784
기타 Drag & Drop Sample 4
29160
HTML window.print() div 를 이용한 부분인쇄
11781
Flash 도와주세요.. 2
11778
PHP SSL 관련 링크 2
24966
휴가원_기업일반 1
24964
회의록_인사 1
24963
제안서 회사약식제안서_기타
24961
회계전표_회계 1
24960
확인서_경리
24950
제안서 홈페이지개발제안서_개발 9
24948
현금지출장_경리 1
24947
현금보관증_부동산
24946
프랜차이즈-체인점계약
24945
품의서_인사
24944
계약서 표준임대차계약서_부동산
24943
팩스전송용지_경리
24942
팩스기안문_인사
24941
투자관련협의서_영업
24940
퇴직증명서_인사
24939
퇴직서_총무
29158
HTML 셀렉트박스(체크, 라디오)를 PHP(ASP, JSP)에서 선택하는 방법 1
11777
MySQL Logrotate
11774
JavaScript startssl 자동실행 2
11772
기타 4. 아파치 서버 설정하기 (보안, SSL) 1
11771
기타 Apache SSL 보안 설치
11770
MySQL mysql error code
11769
MySQL Mysql - ErrCode
11765
기타 [질문]그물효과패턴이라는데, 사용법은? 3
11764
기타 날짜 맞추기
11763
기타 httpd: Could not determine the server's fully qualified domain name, using 127.0.0.1 for Server Name
11758
기타 웹 브라우저에서 가로 스크롤 안생기게 하기 4
29148
HTML 괜찮은 레이어 팝업창 소스 9
11752
기타 삽질하다 막혀버렸어요... ㅠㅠ 5
11747
기타 지우개 툴로 손글씨 쓰기-CS3 새로생긴 기능 4
11746
기타 페도라 리눅스 네임서버 설치
29147
HTML CS3의 새로운 기능 - Live Color 사용법
11744
JavaScript 플래쉬 초보입니다...질문좀 ^^ 1
11735
Flash 퀵메뉴 - 수정해서 쓰세요!^^ 8
29145
HTML 각각의 툴에대한 옵션바의 수치를 기본설정으로 돌릴려면 1
11733
기타 히든필드 처리하기 1
11731
JavaScript 경고창의 폰트 조절..... 1
11730
기타 [질문] action레이어 하나에서 버튼 클릭시 사진을 이동하게 할려고 하는데,,,
24937
기본이력서 1
11728
기타 마지막으로 사용된 필터 한번 더 적용할때 단축키로 간단히 1
11727
기타 JS 이용해서 동적으로 테이블 생성
11725
기타 이동툴로 잠시 변환후, 원래의 툴을 사용하려할때 1
11717
기타 포샵에서 한글이 안써지고 영어만 써질때가 간혹 있어여 7
29138
HTML 원하는 물체만 쉽게 선택하는 툴은 없나요? 6
11716
기타 열린 인터넷 소켓 리스트 출력하기
11715
JavaScript 특정 프로세스가 연 파일 보기.
11714
기타 특정 사용자 &#51922;아 낼때 사용하는 명령어
11711
기타 CS3 간단 리뷰 2
11710
Flash 플래시 파일명 대신 외부파일 호출
11708
Flash 플래시 파일명 대신 외부파일 호출 1
11700
MySQL mysql 원격접속방법 7
11697
기타 대화 상자 닫지말고 Reset하자 2
24936
취업추천의뢰서_인사
24935
출장보고서_영업
24934
출근부_노무관리
24933
추천서_인사
24932
총무_월말종합보고서
24931
창업사업계획(승인,변경승인)신청서
24930
차용증_기업일반
24929
지출결의서_경리
24928
주주명부_기업일반
24927
주식회사정관예제_창업
24926
계약서 주식양수도계약서_경리
24925
주문서_기업일반
24922
제안서 제안서_기업일반 2
24921
계약서 전세계약서_일반계약
24920
계약서 전세계약서_부동산
24919
재직증명서-현정관리
24918
재직증명서_기업일반
24917
재직증명서2_노무
24916
재직증명서2_기업일반
24915
계약서 장비임대 계약서_영업
24914
잔여퇴직급여-수당청구서_행정자치부
24913
계약서 자동차매매계약서-양도양수_일반계약
11696
기타 메뉴를 찾습니다
11694
기타 히스토리 팔레트 그것이 알고 싶다!!! 1
24912
자기소개서_인사
24911
인사고과표_기업일반
24910
이력서_기업일반
24909
위임장_기업일반
24908
영업보고서_인사
24907
영업_업무출장보고서
24906
영수증_기타
11692
PHP waterproof phpedit 무료 라이센스 얻는 법 1
24905
영문재직증명서_회사
24904
영문이력서_개인
24903
영문이력서2_개인
24902
계약서 연봉제근로계약서
24901
계약서 연봉계약서-근로_기타
이전 다음
전체 목록