태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

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

12년 전

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

추천 목록

번호	제목
84	input 입력 필드 앞뒤 공백 실시간 제거
83	Placeholder 포커스시 감추기
82	[ transition ] 링크 hover 색상 변화 속도 조절
81	CSS Hover 를 이용한 깔끔한 페이징
80	스크롤해도 상단에 고정되는 메뉴 만들기
79	[jQuery] jQuery fadeIn(), fadeOut(), fadeToggle(), fadeTo() 이해하기
78	쇼핑몰 상품테이블 롤링
77	Input 한글/영어 제어하기
76	퀵메뉴
75	div 태그에 스크롤바(Scroll Bar) 붙이기
74	CSS Hack을 사용하여 호환성 문제를 해결
	자바스크립으로 플래쉬 메뉴처럼...
72	input 박스에 안내문구 나타내기
71	input textarea 포커스시 효과주기
70	문장에서 특정단어에 효과주기마스터
69	x 초후 나타나는 레이어...
68	meta 화면이펙트
67	원클릭으로 세개의 iframe에 링크 호출하기
66	카운트다운 후 특정 페이지로 이동합니다
65	롤오버 버튼 스크립트
64	버튼 클릭시 열리는 레이어 팝업 이동가능한 레이어 만들기
63	좌우측 재생 제어되는 자바스크립트 마퀴(marquee) 소스
62	<blink> 태그 구현
61	롤오버, 자동 이동 레이어
60	이미지 롤링
59	네이버 콤보스타일 메뉴
58	HTML과 자바스크립트에서 스타일시트 속성
57	CDATA 섹션[XML 표준]
56	textfield 크기에 맞게 툴팁(tooltip) 보여주는 레이어
55	웹페이지 이동 방법