'메뉴'에 해당되는 글 3건

  1. 2008.02.19 자바스크립트로 플래시 메뉴처럼
  2. 2008.02.19 css로 만든 메뉴
  3. 2008.02.02 슬라이드 메뉴

자바스크립트로 플래시 메뉴처럼

인터넷관련 2008. 2. 19. 15:19

미리보기 : http://oxtag.com/html/ex/javamenu.htm


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


UI관련 URL을 적어봅니다.

http://extjs.com/
http://www.dhtmlgoodies.com/
http://www.dynarch.com/
http://qooxdoo.org/
http://mootools.net/

'인터넷관련' 카테고리의 다른 글

자바스크립트 라이브러리 목록  (0) 2008.02.20
이미지와 글씨 정렬  (0) 2008.02.20
윈도우의 바로가기 모음을 내 맘대로  (0) 2008.02.19
한칸띄기 태그  (0) 2008.02.19
SSH 공격 아이피 필터링 스크립트(recent IP 기반) - 아이피 차단  (0) 2008.02.19
[LINKVIEW] 링크된 사이트를 미리 볼수 있게끔 해줍니다.  (0) 2008.02.19
!백묵 수진체 - 손글씨 폰트  (0) 2008.02.19
홈페이지 레이아웃 - 씨리우스  (0) 2008.02.19
Posted by 알 수 없는 사용자
,

css로 만든 메뉴

인터넷관련 2008. 2. 19. 15:18

http://oxtag.com/html/ex/cssMenu.html


<HTML>
<META HTTP-EQUIVE="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=EUC-KR">
<head>
<title> css로 만든 메뉴 </title>

<style type="text/css">
/* ------- MENU1  ------- */
#css_menu1{
margin: 0;
padding: 0;
float: left;
font: 12px 돋움;
letter-spacing:-1px;
}

#css_menu1 li{
display: inline;
}

#css_menu1 li a{
float: left;
color: black;
padding: 10px;
text-decoration: none;
background-color:whitesmoke;
border-top: 4px solid gray;
border-bottom: 1px solid silver;
}

#css_menu1 li a:hover{
border-top: 4px solid deeppink;
color: red;
background-color:#ffeef7;
padding: 10px;
}

/* ------- MENU2  ------- */
#css_menu2{
margin: 0;
padding: 0;
float: left;
font: 12px 돋움;
letter-spacing:-1px;
}

#css_menu2 li{
display: inline;
}

#css_menu2 li a{
float: left;
color: black;
padding: 10px;
text-decoration: none;
background-color:#f5f5f5;
border-top: 5px solid silver;
border-bottom: 5px solid silver;
selector-dummy : expression(this.hideFocus=true);
}

#css_menu2 li a:hover{
border-top: 5px solid deeppink;
color: black;
background-color:white;
padding: 10px;
margin:2 0 2 0;
border-bottom: 3px solid silver;
}

#css_menu2 li a:active{
border-top: 5px solid deeppink;
color: black;
background-color:white;
padding: 10px;
margin:2 0 2 0;
border-bottom: 3px solid silver;
}

/* ------- MENU3  ------- */  
#css_menu3{
margin: 0;
padding: 0;
float: left;
font: 12px 돋움;
letter-spacing:-1px;
}

#css_menu3 li{
display: inline;
}

#css_menu3 li a{
float: left;
color: black;
padding: 10px;
text-decoration: none;
background-color:whitesmoke;
border-top: 5px solid silver;
border-bottom: 1px solid silver;
selector-dummy : expression(this.hideFocus=true);
}

#css_menu3 li a:hover{
border-top: 5px solid deeppink;
color: black;
background-color:white;
padding: 10px;
}

#css_menu3 li a:active{
border-top: 5px solid deeppink;
color: black;
background-color:white;
padding: 10px;
}

#css_menu3 li a:hover.green{
border-top: 5px solid green;
}

#css_menu3 li a:active.green{
border-top: 5px solid green;
}

#css_menu3 li a:hover.blue{
border-top: 5px solid #0080c0;
}

#css_menu3 li a:active.blue{
border-top: 5px solid #0080c0;
}

#css_menu3 li a:hover.brown{
border-top: 5px solid #ff8000;
}

#css_menu3 li a:active.brown{
border-top: 5px solid #ff8000;
}

#css_menu3 li a:hover.purple{
border-top: 5px solid #7257B1;
}

#css_menu3 li a:active.purple{
border-top: 5px solid #7257B1;
}

#css_menu3 li a:hover.navy{
border-top: 5px solid #004080;
}

#css_menu3 li a:active.navy{
border-top: 5px solid #004080;
}  

/* ------- MENU4  ------- */

#css_menu4{
margin: 0;
padding: 0;
float: left;
font: 12px 돋움;
letter-spacing:-1px;
width:100%;
background-color:whitesmoke;
border-bottom: 1px solid silver;
}

#css_menu4 div{
float: left;
}

#css_menu4 div a{
border-top: 5px solid silver;
float: left;
color: black;
padding: 10px;
text-decoration: none;
selector-dummy : expression(this.hideFocus=true);
}

#css_menu4 div a:hover{
border-top: 5px solid deeppink;
color: black;
background-color:white;
}

#css_menu4 div a:active{
border-top: 5px solid deeppink;
color: black;
background-color:white;
}

#css_menu4 div a:hover.green{
border-top: 5px solid green;
}

#css_menu4 div a:active.green{
border-top: 5px solid green;
}

#css_menu4 div a:hover.blue{
border-top: 5px solid #0080c0;
}

#css_menu4 div a:active.blue{
border-top: 5px solid #0080c0;
}

#css_menu4 div a:hover.brown{
border-top: 5px solid #ff8000;
}

#css_menu4 div a:active.brown{
border-top: 5px solid #ff8000;
}

#css_menu4 div a:hover.purple{
border-top: 5px solid #7257B1;
}

#css_menu4 div a:active.purple{
border-top: 5px solid #7257B1;
}

#css_menu4 div a:hover.navy{
border-top: 5px solid #004080;
}

#css_menu4 div a:active.navy{
border-top: 5px solid #004080;
}  

/* ------- MENU5  ------- */
#css_menu5{
margin: 0;
padding: 0;
float: left;
font: 12px 돋움;
letter-spacing:-1px;
width:100%;
background-color:whitesmoke;
}

#css_menu5 div{
float: left;
}

#css_menu5 div a{
float: left;
color: black;
padding: 10px;
text-decoration: none;
background-color:#f5f5f5;
border-top: 5px solid silver;
border-bottom: 5px solid silver;
selector-dummy : expression(this.hideFocus=true);
}

#css_menu5 div a:hover{
border-top: 5px solid deeppink;
color: black;
background-color:white;
padding: 10px;
margin:2 0 2 0;
border-bottom: 3px solid silver;
}

#css_menu5 div a:active{
border-top: 5px solid deeppink;
color: black;
background-color:white;
padding: 10px;
margin:2 0 2 0;
border-bottom: 3px solid silver;
}

#css_menu5 div a:hover.green{
border-top: 5px solid green;
}

#css_menu5 div a:active.green{
border-top: 5px solid green;
}

#css_menu5 div a:hover.blue{
border-top: 5px solid #0080c0;
}

#css_menu5 div a:active.blue{
border-top: 5px solid #0080c0;
}

#css_menu5 div a:hover.brown{
border-top: 5px solid #ff8000;
}

#css_menu5 div a:active.brown{
border-top: 5px solid #ff8000;
}

#css_menu5 div a:hover.purple{
border-top: 5px solid #7257B1;
}

#css_menu5 div a:active.purple{
border-top: 5px solid #7257B1;
}

#css_menu5 div a:hover.navy{
border-top: 5px solid #004080;
}

#css_menu5 div a:active.navy{
border-top: 5px solid #004080;
}

</style>

</head>
<body>

<ul id="css_menu1">
<li><a href="#">자유게시판</a></li>
<li><a href="#">질문&답변</a></li>
<li><a href="#">알짜게시판</a></li>
<li><a href="#">메시지박스</a></li>
<li><a href="#">환경설정</a></li>
<li><a href="#">로그아웃</a></li>
</ul>
<br style="clear: left;" />
<br>

<ul id="css_menu2">
<li><a href="#">자유게시판</a></li>
<li><a href="#">질문&답변</a></li>
<li><a href="#">알짜게시판</a></li>
<li><a href="#">메시지박스</a></li>
<li><a href="#">환경설정</a></li>
<li><a href="#">로그아웃</a></li>
</ul>
<br style="clear: left;" />
<br>

<ul id="css_menu3">
<li><a href="#" class="blue">자유게시판</a></li>
<li><a href="#" class="brown">질문&답변</a></li>
<li><a href="#" class="purple">알짜게시판</a></li>
<li><a href="#" class="navy">메시지박스</a></li>
<li><a href="#" class="green">환경설정</a></li>
<li><a href="#">로그아웃</a></li>
</ul>
<br style="clear: left;" />
<br>

<div id="css_menu4">
<div><a href="#" class="blue">자유게시판</a></div>
<div><a href="#" class="brown">질문&답변</a></div>
<div><a href="#" class="purple">알짜게시판</a></div>
<div><a href="#" class="navy">메시지박스</a></div>
<div><a href="#" class="green">환경설정</a></div>
<div><a href="#">로그아웃</a></div>
<div><a style="width:100%"></a></div>
</div>
<br><br>

<div id="css_menu5">
<div><a></a></div>
<div><a href="#" class="blue">자유게시판</a></div>
<div><a href="#" class="brown">질문&답변</a></div>
<div><a href="#" class="purple">알짜게시판</a></div>
<div><a href="#" class="navy">메시지박스</a></div>
<div><a href="#" class="green">환경설정</a></div>
<div><a href="#">로그아웃</a></div>
<div><a style="width:100%"></a></div>
</div>


</body>
</HTML>
   

'인터넷관련' 카테고리의 다른 글

[LINKVIEW] 링크된 사이트를 미리 볼수 있게끔 해줍니다.  (0) 2008.02.19
!백묵 수진체 - 손글씨 폰트  (0) 2008.02.19
홈페이지 레이아웃 - 씨리우스  (0) 2008.02.19
AJAX URL  (0) 2008.02.19
Tiranti Solid LET체  (0) 2008.02.19
Cold Night for Alligators  (0) 2008.02.19
달력, calendar  (0) 2008.02.19
pcount, 카운터, counter  (0) 2008.02.19
Posted by 알 수 없는 사용자
,

슬라이드 메뉴

인터넷관련 2008. 2. 2. 10:15
<HTML>
<HEAD>
<TITLE>슬라이딩 메뉴(출처-mygony.com)</TITLE>
<style>
BODY { font-size:9pt; }
.menu {
    border:1px solid #CCCCCC;
    background-color:#DEDEDE;
    padding:3px 1px 1px 5px;
    width:150px;
    cursor:pointer;
}
.submenu {
    width:150px;
    padding-left:10px;
    display:none;
    cursor:pointer;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function slide(Id, interval, to)
{
    var obj = document.getElementById(Id);
    var H, step = 5;

    if (obj == null) return;
    if (to == undefined) { // user clicking

        if (obj._slideStart == true) return;
        if (obj._expand == true) {
            to = 0;
            obj.style.overflow = "hidden";
        } else {
            slide.addId(Id);
            for(var i=0; i < slide.objects.length; i++) {
                if (slide.objects[i].id != Id && slide.objects[i]._expand == true) {
                    slide(slide.objects[i].id);
                }
            }

            obj.style.height = "";
            obj.style.overflow = "";
            obj.style.display = "block";
            to = obj.offsetHeight;
            obj.style.overflow = "hidden";
            obj.style.height = "1px";
        }
        obj._slideStart = true;
    }
   
    step            = ((to > 0) ? 1:-1) * step;
    interval        = ((interval==undefined)?1:interval);
    obj.style.height = (H=((H=(isNaN(H=parseInt(obj.style.height))?0:H))+step<0)?0:H+step)+"px";
   
    if (H <= 0) {
        obj.style.display = "none";
        obj.style.overflow = "hidden";
        obj._expand = false;
        obj._slideStart = false;
    } else if (to > 0 && H >= to) {
        obj.style.display = "block";
        obj.style.overflow = "visible";
        obj.style.height = H + "px";
        obj._expand = true;
        obj._slideStart = false;
    } else {
        setTimeout("slide('"+Id+"' , "+interval+", "+to+");", interval);
    }
}
slide.objects = new Array();
slide.addId = function(Id)
{
    for (var i=0; i < slide.objects.length; i++) {
        if (slide.objects[i].id == Id) return true;
    }
    slide.objects[slide.objects.length] = document.getElementById(Id);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<div class="menu" onClick="slide('sub1');">Tree1</div>
<div id="sub1" class="submenu">
    <div>  + SubTree1-1</div>
    <div>  + SubTree1-2</div>
    <div>  + SubTree1-3</div>
    <div>  + SubTree1-4</div>
    <div>  + SubTree1-5</div>
</div>
<div class="menu" onClick="slide('sub2');">Tree2</div>
<div id="sub2" class="submenu">
    <div>  + SubTree2-1</div>
    <div>  + SubTree2-2</div>
    <div>  + SubTree2-3</div>
    <div>  + SubTree2-4</div>
</div>
<div class="menu" onClick="slide('sub3');">Tree3</div>
<div id="sub3" class="submenu">
    <div>  + SubTree3-1</div>
    <div>  + SubTree3-2</div>
    <div>  + SubTree3-3</div>
</div>
<div class="menu">이건 다른 메뉴</div>
</BODY>
</HTML>

'인터넷관련' 카테고리의 다른 글

사업자등록번호, 주민등록번호 등 편리하게 붙혀넣기  (0) 2008.02.02
자식창에서 부모창으로 submit 하기  (0) 2008.02.02
숫자만 입력되었는지 체크하기  (0) 2008.02.02
인풋 박스 숫자 입력시 툴팁으로 표시  (0) 2008.02.02
테이블크기 늘리기,줄이기,초기값지정  (0) 2008.02.02
CSS 만으로 만든 롤오버 이미지  (0) 2008.02.02
이미지 안쓰고 모서리 둥근 테이블 만들기 2  (0) 2008.02.02
해상도에따른 브라우저 크기조절  (0) 2008.02.02
Posted by 알 수 없는 사용자
,

티스토리툴바