서브메뉴를 아래와 같이 텍스트로 하시면 이쁩니다.
모두 복사해서 태그연습장에서 실행해보세요.
<html>
<head>
<title>Cross-browser Dynamic HTML Scripts - NewsMenu</title>
<style type="text/css">
DIV.clTopMenu{position:absolute; width:101; height:150; clip:rect(0,101,14,0); visibility:hidden; z-index:31; layer-background-color:#EEEEEE; background-color:#EEEEEE}
DIV.clTopMenuBottom{position:absolute; width:101; height:3; clip:rect(0,101,3,0); top:11; layer-background-color:#CECFCE; background-color:#CECFCE; z-index:2}
DIV.clTopMenuText{position:absolute; width:91; left:5; top:15; font-family:arial,helvetica; font-size:11px; background-color:#EEEEEE; z-index:1}
</style>
<script type="text/javascript" language="JavaScript">
/********************************************************************************
Copyright (C) 1999 Thomas Brattli
This script is made by and copyrighted to Thomas Brattli at www.bratta.com
Visit for more great scripts. This may be used freely as long as this msg is intact!
I will also appriciate any links you could give me.
********************************************************************************/
//Default browsercheck, added to all scripts!
function checkBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}
bw=new checkBrowser()
/********************************************************************************
If you want to change the appearens on the text, background-colors, size or
anything do that in the style tag above.
This menu might not be as easy to adapt to your own site, but please
play around with it before you mail me for help...
****************************************************************************/
/***************************************************************************
Variables to set.
****************************************************************************/
//There are 2 ways these menus can be placed
// 0 = column
// 1 = row
nPlace=0
//How many menus do you have? (remember to copy and add divs in the body if you add menus)
var nNumberOfMenus=2
var nMwidth=101 //The width on the menus (set the width in the stylesheet as well)
var nPxbetween=20 //Pixels between the menus
var nFromleft=10 //The first menus left position
var nFromtop=85 //The top position of the menus
var nBgcolor='#CECFCE' //The bgColor of the bottom mouseover div
var nBgcolorchangeto='#6380BC' //The bgColor to change to
var nImageheight=11 //The position the mouseover line div will stop at when going up!
/***************************************************************************
You shouldn't have to change anything below this
****************************************************************************/
//Object constructor
function makeNewsMenu(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0;
this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;
this.scrollHeight=bw.ns4?this.css.document.height:this.evnt.offsetHeight
this.moveIt=b_moveIt;this.bgChange=b_bgChange;
this.slideUp=b_slideUp; this.slideDown=b_slideDown;
this.clipTo=b_clipTo;
this.obj = obj + "Object"; eval(this.obj + "=this")
}
//Objects methods
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
function b_bgChange(color){if(bw.dom || bw.ie4) this.css.backgroundColor=color; else this.css.bgColor=color}
function b_clipTo(t,r,b,l){
if(bw.ns4){this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.left=l
}else this.css.clip="rect("+t+","+r+","+b+","+l+")";
}
function b_slideUp(ystop,moveby,speed,fn,wh){
if(!this.slideactive){
if(this.y>ystop){
this.moveIt(this.x,this.y-5); eval(wh)
setTimeout(this.obj+".slideUp("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)
}else{
this.slideactive=false; this.moveIt(0,ystop); eval(fn)
}
}
}
function b_slideDown(ystop,moveby,speed,fn,wh){
if(!this.slideactive){
if(this.y<ystop){
this.moveIt(this.x,this.y+5); eval(wh)
setTimeout(this.obj+".slideDown("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)
}else{
this.slideactive=false; this.moveIt(0,ystop); eval(fn)
}
}
}
//Initiating the page, making cross-browser objects
function newsMenuInit(){
oTopMenu=new Array()
zindex=10
for(i=0;i<=nNumberOfMenus;i++){
oTopMenu[i]=new Array()
oTopMenu[i][0]=new makeNewsMenu('divTopMenu'+i)
oTopMenu[i][1]=new makeNewsMenu('divTopMenuBottom'+i,'divTopMenu'+i)
oTopMenu[i][2]=new makeNewsMenu('divTopMenuText'+i,'divTopMenu'+i)
oTopMenu[i][1].moveIt(0,nImageheight)
oTopMenu[i][0].clipTo(0,nMwidth,nImageheight+3,0)
if(!nPlace) oTopMenu[i][0].moveIt(i*nMwidth+nFromleft+(i*nPxbetween),nFromtop)
else{
oTopMenu[i][0].moveIt(nFromleft,i*nImageheight+nFromtop+(i*nPxbetween))
oTopMenu[i][0].css.zIndex=zindex--
}
oTopMenu[i][0].css.visibility="visible"
}
}
//Moves the menu
function topMenu(num){
if(oTopMenu[num][1].y==nImageheight) oTopMenu[num][1].slideDown(oTopMenu[num][2].scrollHeight+20,10,40,'oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)')
else if(oTopMenu[num][1].y==oTopMenu[num][2].scrollHeight+20) oTopMenu[num][1].slideUp(nImageheight,10,40,'oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)')
}
//Changes background onmouseover
function menuOver(num){oTopMenu[num][1].bgChange(nBgcolorchangeto)}
function menuOut(num){oTopMenu[num][1].bgChange(nBgcolor)}
//Calls the init function onload
onload=newsMenuInit;
</script>
</HEAD>
<BODY bgcolor="f2f2f2" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Remember the "news" "key control" and "page contols" text are images, you probably want to change those
with your own images. If your own images have different sizes please adjust the height and clips
of the divs, and change the nImageheight variable in the script. Good luck -->
<div id="divTopMenu0" class="clTopMenu"><a href="#" onmouseover="menuOver(0)" onmouseout="menuOut(0)" onclick="topMenu(0); if(bw.dom || bw.ie4)this.blur(); return false"><img src="images/news.gif" width=101 height=11 alt="" border=0 align="top"></a>
<div id="divTopMenuText0" class="clTopMenuText">
Added some link to me buttons and
advertising info and a new script and a new tutorial.<br><br>
Remember to join the newsletter!
</div>
<div id="divTopMenuBottom0" class="clTopMenuBottom"></div>
</div>
<div id="divTopMenu1" class="clTopMenu"><a href="#" onmouseover="menuOver(1)" onmouseout="menuOut(1)" onclick="topMenu(1); if(bw.dom || bw.ie4)this.blur(); return false"><img src="images/keycontrol.gif" width=101 height=11 alt="" border=0 align="top"></a>
<div id="divTopMenuText1" class="clTopMenuText">
1-6=Menu controls<br>
M=Menuchange<br>
N=News<br>
K=Key controls<br>
P=Page control<br>
A=Scroll down<br>
Z=Scroll up<br>
S=Scriptomania<br><br>
</div>
<div id="divTopMenuBottom1" class="clTopMenuBottom"></div>
</div>
<div id="divTopMenu2" class="clTopMenu"><a href="#" onmouseover="menuOver(2)" onmouseout="menuOut(2)" onclick="topMenu(2); if(bw.dom || bw.ie4)this.blur(); return false"><img src="images/pagecontrol.gif" width=101 height=11 alt="" border=0 align="top"></a>
<div id="divTopMenuText2" class="clTopMenuText">
Text here.
</div>
<div id="divTopMenuBottom2" class="clTopMenuBottom"></div>
</div>
<!-- To add a new menu just copy these lines:
<div id="divTopMenuN" class="clTopMenu"><a href="#" onmouseover="menuOver(N)" onmouseout="menuOut(N)" onclick="topMenu(N); if(ie)this.blur(); return false">HEADING IMAGE GOES HERE</a>
<div id="divTopMenuTextN" class="clTopMenuText">
TEXT HERE
</div>
<div id="divTopMenuBottomN" class="clTopMenuBottom"></div>
</div>
And change the letter N to a number higher then the last menu...
(and remember to set the variable nNumberOfMenus in the script to
the same number of menus you have (remember it starts counting
at 0) --><br><br>
</BODY>
</HTML>
모두 복사해서 태그연습장에서 실행해보세요.
<html>
<head>
<title>Cross-browser Dynamic HTML Scripts - NewsMenu</title>
<style type="text/css">
DIV.clTopMenu{position:absolute; width:101; height:150; clip:rect(0,101,14,0); visibility:hidden; z-index:31; layer-background-color:#EEEEEE; background-color:#EEEEEE}
DIV.clTopMenuBottom{position:absolute; width:101; height:3; clip:rect(0,101,3,0); top:11; layer-background-color:#CECFCE; background-color:#CECFCE; z-index:2}
DIV.clTopMenuText{position:absolute; width:91; left:5; top:15; font-family:arial,helvetica; font-size:11px; background-color:#EEEEEE; z-index:1}
</style>
<script type="text/javascript" language="JavaScript">
/********************************************************************************
Copyright (C) 1999 Thomas Brattli
This script is made by and copyrighted to Thomas Brattli at www.bratta.com
Visit for more great scripts. This may be used freely as long as this msg is intact!
I will also appriciate any links you could give me.
********************************************************************************/
//Default browsercheck, added to all scripts!
function checkBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}
bw=new checkBrowser()
/********************************************************************************
If you want to change the appearens on the text, background-colors, size or
anything do that in the style tag above.
This menu might not be as easy to adapt to your own site, but please
play around with it before you mail me for help...
****************************************************************************/
/***************************************************************************
Variables to set.
****************************************************************************/
//There are 2 ways these menus can be placed
// 0 = column
// 1 = row
nPlace=0
//How many menus do you have? (remember to copy and add divs in the body if you add menus)
var nNumberOfMenus=2
var nMwidth=101 //The width on the menus (set the width in the stylesheet as well)
var nPxbetween=20 //Pixels between the menus
var nFromleft=10 //The first menus left position
var nFromtop=85 //The top position of the menus
var nBgcolor='#CECFCE' //The bgColor of the bottom mouseover div
var nBgcolorchangeto='#6380BC' //The bgColor to change to
var nImageheight=11 //The position the mouseover line div will stop at when going up!
/***************************************************************************
You shouldn't have to change anything below this
****************************************************************************/
//Object constructor
function makeNewsMenu(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0;
this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;
this.scrollHeight=bw.ns4?this.css.document.height:this.evnt.offsetHeight
this.moveIt=b_moveIt;this.bgChange=b_bgChange;
this.slideUp=b_slideUp; this.slideDown=b_slideDown;
this.clipTo=b_clipTo;
this.obj = obj + "Object"; eval(this.obj + "=this")
}
//Objects methods
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
function b_bgChange(color){if(bw.dom || bw.ie4) this.css.backgroundColor=color; else this.css.bgColor=color}
function b_clipTo(t,r,b,l){
if(bw.ns4){this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.left=l
}else this.css.clip="rect("+t+","+r+","+b+","+l+")";
}
function b_slideUp(ystop,moveby,speed,fn,wh){
if(!this.slideactive){
if(this.y>ystop){
this.moveIt(this.x,this.y-5); eval(wh)
setTimeout(this.obj+".slideUp("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)
}else{
this.slideactive=false; this.moveIt(0,ystop); eval(fn)
}
}
}
function b_slideDown(ystop,moveby,speed,fn,wh){
if(!this.slideactive){
if(this.y<ystop){
this.moveIt(this.x,this.y+5); eval(wh)
setTimeout(this.obj+".slideDown("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)
}else{
this.slideactive=false; this.moveIt(0,ystop); eval(fn)
}
}
}
//Initiating the page, making cross-browser objects
function newsMenuInit(){
oTopMenu=new Array()
zindex=10
for(i=0;i<=nNumberOfMenus;i++){
oTopMenu[i]=new Array()
oTopMenu[i][0]=new makeNewsMenu('divTopMenu'+i)
oTopMenu[i][1]=new makeNewsMenu('divTopMenuBottom'+i,'divTopMenu'+i)
oTopMenu[i][2]=new makeNewsMenu('divTopMenuText'+i,'divTopMenu'+i)
oTopMenu[i][1].moveIt(0,nImageheight)
oTopMenu[i][0].clipTo(0,nMwidth,nImageheight+3,0)
if(!nPlace) oTopMenu[i][0].moveIt(i*nMwidth+nFromleft+(i*nPxbetween),nFromtop)
else{
oTopMenu[i][0].moveIt(nFromleft,i*nImageheight+nFromtop+(i*nPxbetween))
oTopMenu[i][0].css.zIndex=zindex--
}
oTopMenu[i][0].css.visibility="visible"
}
}
//Moves the menu
function topMenu(num){
if(oTopMenu[num][1].y==nImageheight) oTopMenu[num][1].slideDown(oTopMenu[num][2].scrollHeight+20,10,40,'oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)')
else if(oTopMenu[num][1].y==oTopMenu[num][2].scrollHeight+20) oTopMenu[num][1].slideUp(nImageheight,10,40,'oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)')
}
//Changes background onmouseover
function menuOver(num){oTopMenu[num][1].bgChange(nBgcolorchangeto)}
function menuOut(num){oTopMenu[num][1].bgChange(nBgcolor)}
//Calls the init function onload
onload=newsMenuInit;
</script>
</HEAD>
<BODY bgcolor="f2f2f2" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Remember the "news" "key control" and "page contols" text are images, you probably want to change those
with your own images. If your own images have different sizes please adjust the height and clips
of the divs, and change the nImageheight variable in the script. Good luck -->
<div id="divTopMenu0" class="clTopMenu"><a href="#" onmouseover="menuOver(0)" onmouseout="menuOut(0)" onclick="topMenu(0); if(bw.dom || bw.ie4)this.blur(); return false"><img src="images/news.gif" width=101 height=11 alt="" border=0 align="top"></a>
<div id="divTopMenuText0" class="clTopMenuText">
Added some link to me buttons and
advertising info and a new script and a new tutorial.<br><br>
Remember to join the newsletter!
</div>
<div id="divTopMenuBottom0" class="clTopMenuBottom"></div>
</div>
<div id="divTopMenu1" class="clTopMenu"><a href="#" onmouseover="menuOver(1)" onmouseout="menuOut(1)" onclick="topMenu(1); if(bw.dom || bw.ie4)this.blur(); return false"><img src="images/keycontrol.gif" width=101 height=11 alt="" border=0 align="top"></a>
<div id="divTopMenuText1" class="clTopMenuText">
1-6=Menu controls<br>
M=Menuchange<br>
N=News<br>
K=Key controls<br>
P=Page control<br>
A=Scroll down<br>
Z=Scroll up<br>
S=Scriptomania<br><br>
</div>
<div id="divTopMenuBottom1" class="clTopMenuBottom"></div>
</div>
<div id="divTopMenu2" class="clTopMenu"><a href="#" onmouseover="menuOver(2)" onmouseout="menuOut(2)" onclick="topMenu(2); if(bw.dom || bw.ie4)this.blur(); return false"><img src="images/pagecontrol.gif" width=101 height=11 alt="" border=0 align="top"></a>
<div id="divTopMenuText2" class="clTopMenuText">
Text here.
</div>
<div id="divTopMenuBottom2" class="clTopMenuBottom"></div>
</div>
<!-- To add a new menu just copy these lines:
<div id="divTopMenuN" class="clTopMenu"><a href="#" onmouseover="menuOver(N)" onmouseout="menuOut(N)" onclick="topMenu(N); if(ie)this.blur(); return false">HEADING IMAGE GOES HERE</a>
<div id="divTopMenuTextN" class="clTopMenuText">
TEXT HERE
</div>
<div id="divTopMenuBottomN" class="clTopMenuBottom"></div>
</div>
And change the letter N to a number higher then the last menu...
(and remember to set the variable nNumberOfMenus in the script to
the same number of menus you have (remember it starts counting
at 0) --><br><br>
</BODY>
</HTML>
'인터넷관련' 카테고리의 다른 글
| 프레임없이 주소창의 페이지경로 감추기 (0) | 2008.01.29 |
|---|---|
| 팝업창 기능별 옵션 적용해서 새창 띄우기.. (0) | 2008.01.29 |
| 음악파일을 랜덤하게 듣기 (0) | 2008.01.29 |
| 시작 날짜를 알려주는 소스 (0) | 2008.01.29 |
| 메뉴타입만들기 (0) | 2008.01.29 |
| 마우스를 따라다니는 글이나 이미지 (0) | 2008.01.29 |
| 현재의 년,월,일,시간 나타내기 (0) | 2008.01.29 |
| 브라우저 크기를 절대 조절 못하게합니다. (0) | 2008.01.29 |
