<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> |
'인터넷정보' 카테고리의 다른 글
창에서의 F11, F5, Ctrl 비활성화 스크립트 (0) | 2007.10.18 |
---|---|
테이블크기 늘리기,줄이기,초기값지정 (0) | 2007.10.18 |
인풋 박스 숫자 입력시 툴팁으로 표시 (0) | 2007.10.18 |
숫자만 입력되었는지 체크하기 (0) | 2007.10.18 |
이미지 안쓰고 모서리 둥근 테이블 만들기 2 (0) | 2007.10.18 |
CSS 만으로 만든 롤오버 이미지 (0) | 2007.10.18 |
웹페이지에 삽입된 동영상 및 음악 제어 (0) | 2007.10.18 |
토글 메뉴 (0) | 2007.10.18 |
PNG 그림파일 알파값 살리기 (0) | 2007.10.18 |
텍스트 밑줄 긋기 (0) | 2007.10.18 |
자바스크립트로 플래시 메뉴처럼
미리보기 : 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/
'인터넷정보' 카테고리의 다른 글
CSS text-indent (0) | 2007.10.13 |
---|---|
image mapping 프로그램, 이미지맵, 이미지매핑 (0) | 2007.10.13 |
자바스크립트 라이브러리 목록 (0) | 2007.10.13 |
이미지와 글씨 정렬 (0) | 2007.10.13 |
SSH 공격 아이피 필터링 스크립트(recent IP 기반) - 아이피 차단 (0) | 2007.10.13 |
윈도우의 바로가기 모음을 내 맘대로 (0) | 2007.10.13 |
한칸띄기 태그 (0) | 2007.10.13 |
Cold Night for Alligators (0) | 2007.10.13 |
Tiranti Solid LET체 (0) | 2007.10.13 |
!백묵 수진체 - 손글씨 폰트 (0) | 2007.10.13 |
css로 만든 메뉴
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>
'인터넷정보' 카테고리의 다른 글
한칸띄기 태그 (0) | 2007.10.13 |
---|---|
Cold Night for Alligators (0) | 2007.10.13 |
Tiranti Solid LET체 (0) | 2007.10.13 |
!백묵 수진체 - 손글씨 폰트 (0) | 2007.10.13 |
홈페이지 레이아웃 - 씨리우스 (0) | 2007.10.13 |
AJAX URL (0) | 2007.10.13 |
[LINKVIEW] 링크된 사이트를 미리 볼수 있게끔 해줍니다. (0) | 2007.10.13 |
달력, calendar (0) | 2007.10.13 |
pcount, 카운터, counter (0) | 2007.10.13 |
웹용 라디오 플래이어 가로버전 입니다.(프레임용) (0) | 2007.10.13 |