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

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

투노노
프로필 보기이 회원 글보기
 · 18년 전 · 4028 · 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년 전
정말이지 자바스크립트의 무한한가능성을 다시 한번 되새겨봅니다.
정말 대단하시네요~ 감탄했습니다.
정말 수고많으셨습니다. 새해 복 많이받으세요^^

게시글 목록

번호 제목
12007
기타 그라디언트 5
12006
기타 메일 서버 (SMTP, POP3) 설정
12005
MySQL 페도라 설치후 mysql이 원격으로 접속이 안될때
12000
Flash 일러스트 단축키 4
11994
Flash [[ 플래시 MX 단축키 요약 ]] 5
11993
기타 cgi 세팅 - httpd.conf
11992
MySQL [설치/설정] http-2.2.3에서 ssl 설치입니다.
11991
JavaScript adduser 명령어 기본사용법
11990
MySQL 리눅스 자동백업
11989
기타 리눅스 쿼터(quata)설정 및 설명
29203
HTML 그림위에 마우스 올리면 다른 이미지 뜨기
11988
Linux Xinetd 설치하기&설명
11986
MySQL mysql버전확인 1
11985
JavaScript su, telnet, ftp 권한제한
11984
기타 scp간략하게 사용방법 (파일서버간에복사)
11983
JavaScript Portsentry 1.1 설치하기(실시간해킹방지프로그램)
11982
Linux 리눅스에서 휴지통 (safedelete)
29202
HTML apache2 가상호스트 설정방법
29201
HTML [질문]DIV여러개를 부드럽게 오버랩 하기?
24968
포인트 몇개 올라가요 ?? 15
11981
JavaScript 시작과 멈춤이 가능한 스크롤 텍스트
29200
HTML 이미지에 마우스만 올려도 링크로 이동
29198
HTML 마우스 오른쪽 버튼 클릭시 강제 이동 1
11979
기타 [급 질문] 기존 메뉴 소스 수정해서 새로운 서브메뉴를 만들려고 하는데... 1
11978
Flash php.ini정보
11975
JavaScript Lightbox2 적용 방법 2
11973
기타 rpm 명령어 1
11972
기타 Trac 설치
11971
기타 Subversion Book
11970
기타 META 태그 사용법
11966
기타 예전에 올렸던 내용인데 어플로 제작해서 편하게 사용할 수 있도록 했습니다. 3
11962
MySQL MySQL 다운로드 3
29197
HTML Document Type Definition
29196
HTML 간단PHP(4)
11961
기타 간단PHP(3)
11960
기타 간단PHP(2)
11959
JavaScript 간단PHP(1)
11958
기타 fedora에서 yum install시 key문제...
11956
MySQL [질문] proftpd실행이 안되는 이유는?????? 1
11952
JavaScript [질문]페도라 6... Securt SSH 및 콘솔에서 vi편집기내에서 한글깨짐현상 3
11948
JavaScript [질문] 페도라리눅스에서 한글깨짐현상 3
11944
기타 포토샵 CS3 폰트가 바뀌는 현상 3
11936
기타 [질문] dns, 네임서버 설정 후 도메인 호스트 등록에 관해.. 7
11935
기타 여러장 사진을 하나로 합성하기
29195
HTML 포토샵 CS3으로 파노라마 사진을 만들어봅시다!
11934
JavaScript 포토샵 CS3에서 JPG 파일을 RAW 파일처럼 보정하기 - 사진 후보정
29191
HTML 입출력빌드프로그램으로 쇼핑몰 한번 만들어봤어요 3
11933
JavaScript [소스] 배경이미지 바꾸기 (PHP에서)에 대한 초보
29186
HTML 플래쉬에서 PHP와 연동하면서 파일 업로드(PHP쪽) 4
11932
Flash 플래쉬쪽에서의 파일업로드
11931
Flash 플래쉬에서 PHP와 연동하면서 파일 업로드
11926
Flash 초보가 올리는 왼쪽 메뉴(허접) 4
11922
MySQL [MySQL 초보자 분을 위한 기본 명령어] 3
29183
기타 CSS로 만든 - 3D 입체 갤러리 2
11920
기타 CS3에서 슬라이스툴 1
11916
기타 액체에서 고체로 되는 이미지 만들기 3
11915
기타 사진 색감 예쁘게 보정하기
11913
JavaScript 타일 이미지 멥핑 1
11910
기타 이미지를 뽀샤시 하게 만들어보아요 2
29182
HTML 브러쉬만들기
11904
기타 보안서버구축 관련 팁 5
11901
기타 눈물만들기 2
11900
기타 김 서린 창문에 낙서한 효과내기
29181
HTML 말랑말랑 젤리 텍스트
11898
기타 액션을 이용하여 간단하게 로모효과 주기 1
29179
HTML 간단하게 수채화 느낌 내기 1
11894
JavaScript htmlspecialchars() 역변환(반대) 함수 3
11892
기타 FLV 파일을 SWF로 돌릴 때 보안 문제 1
11890
JavaScript 배경이미지 바꾸기 (PHP에서) 1
11889
JavaScript 검색창 추가
11888
기타 <DIV> 태그 border 셋팅
11886
기타 질문입니다 1
11883
기타 [앞으로] < [1] [2] [3] [4] > [뒤로] 2
11879
기타 신비로운 텍스쳐 만들기 3
11875
기타 신비한 텍스쳐 만들기 3
29178
HTML 팝업소스 관련질문-오늘하루창안열기
29167
HTML 자바스크립으로 플래쉬 메뉴처럼 10 현재글
11874
JavaScript 글씨의 색을 자동으로 변환시켜주는 함수
29166
HTML [함수] js_rolling , JS로 만든 롤링 클래스
11872
PHP [정보] 관리자 및 회원의 페이지 접근 권한 간단구현 1
11870
JavaScript [스크립트] 이미지 리사이징 1
11867
PHP [서버운영] 아파치로그] sql로 바로 저장. 2
11866
PHP [서버운영] 아파치로그] 보기좋고 파싱하기 좋은 통합로그.
11865
MySQL MySQL에서 Query Cache 사용하기
29165
HTML 색상표
29162
HTML 입출력폼 생성기 2
11861
MySQL 무료 웹방화벽 Modsecurity..! 3
11851
MySQL 리눅스 포기 하고 싶습니다.. ㅠ.ㅠ 9
11850
기타 오라클 lock 체크 스크립트
11847
기타 포토샵CS3에서 글씨 쓰는 도중 굴림체로 글꼴이 자동으로 변경될 때... 2
11846
PHP __PHP_Incomplete_Class
11845
JavaScript ucc(동영상) 서비스 운영관련 자료 (키워드 ffmpeg)
11840
기타 서브 메뉴 사라지게 하는거 소스 수정 좀 부탁드립니다~ 4
11826
MySQL 리눅스 명령어!!!! (보기전에 심호흡 한번 하세요. ^^) 13
11825
MySQL MySQL 한글 정렬 Tip
11823
기타 외부문서불러오기 1
11816
기타 서브메뉴 사라지게 하려면 어떻게 해야하나요?? 6
11808
Flash 플래시 메뉴 소스 7
11805
Flash 서브 메뉴에 링크 거는 법 좀 알려주세요~ ㅠㅠ 2
11804
JavaScript <script>
이전 다음
전체 목록