프리카운터넷

프로그래밍&개발

기존 공부방

메뉴가 많은 경우에 몇 가지로 분류해 놓고 주메뉴 이름을 클릭하면 서브 메뉴가 위에서 아래로 나타났다가

다시 클릭하면 원래 위치로 되돌아가게 디자인 것입니다.

웹 페이지 공간을 절약할 수 있을 뿐 아니라 페이지를 스크롤하더라도 메뉴가 항상 화면 위에 나타나므로,

아주 유용한 스크립트입니다


	[소스] <html> <head> <title> 탑 메뉴 예제 </title> <style> TD{font-family:arial,helvetica; font-size:10pt} BODY{background-color:white} A{color:Navy; text-decoration:none} A:hover{color:red} A:visited:{color:#808080} DIV{font-family:arial,helvetica; font-size:12pt; font-weight:bold} </style> <script> /*************************************************************************** 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! ***************************************************************************/ // 브라우저 체크: ie=document.all?1:0 n=document.layers?1:0 //여기의 변수들은 임의로 설정할 수 있습니다. //한번에 움직일 픽셀 수 var move=10; //메뉴가 나타나거나 사라지는 속도(밀리세컨드 단위) menuSpeed=40 //페이지가 화면을 넘어가게 스크롤되면 다시 메뉴를 맨 위에 표시할 것인지 결정 var moveOnScroll=true /**************************************************************************** 이 이후의 소스는 수정하지 마세요 (except in the init function to set how many menus and such.) ****************************************************************************/ //Defining variables var tim; //Object constructor function makeMenu(obj,nest,lshow){ nest=(!nest) ? '':'document.'+nest+'.' this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style') this.state=1 this.go=0 this.lshow=lshow this.up=m_up; this.down=m_down; this.menu=m_menu; this.tim this.height=n?this.css.document.height:eval(obj+'.offsetHeight') this.top=b_gettop this.obj = obj + "Object"; eval(this.obj + "=this") } //Get's the top position. function b_gettop(){ var gleft=(n) ? eval(this.css.top):eval(this.css.pixelTop); return gleft; } /**************************************************************************** 메뉴 처리 부분(onmouseover, onmouseout or onclick 이벤트 처리) ****************************************************************************/ function m_menu(){ if(!this.state){ clearTimeout(this.tim) this.up() }else{ clearTimeout(this.tim) this.down() } } //Menu in function m_up(){ if(this.top()>eval(scrolled)-this.height+this.lshow){ this.go=1 this.css.top=this.top()-move this.tim=setTimeout(this.obj+".up()",menuSpeed) }else{ this.go=0 this.state=1 } } //Menu out function m_down(){ if(this.top()<eval(scrolled)){ this.go=1 this.css.top=this.top()+move this.tim=setTimeout(this.obj+".down()",menuSpeed) }else{ this.go=0 this.state=0 } } /**************************************************************************** Checking if the page is scrolled, if it is move the menu after ****************************************************************************/ function checkScrolled(){ for(i=0;i<oMenu.length;i++){ if(!oMenu[i].go)oMenu[i].css.top=(!oMenu[i].state)?eval(scrolled):eval(scrolled)-oMenu[i].height+oMenu[i].lshow } if(n) setTimeout('checkScrolled()',30) } /**************************************************************************** Inits the page, makes the menu objects, moves it to the right place, show it..Make as many as you want but remember that they take some prosessor power in netscape if you have the moveOnScroll on. The last parameter in makeMenu call is how much of the manu you want visible when it's in it's up state. ******************************************************************************/ function menuInit(){ oMenu=new Array() oMenu[0]=new makeMenu('divMenu','',20) oMenu[1]=new makeMenu('divMenu1','',20) oMenu[2]=new makeMenu('divMenu2','',40) oMenu[3]=new makeMenu('divMenu3','',20) scrolled=n?"window.pageYOffset":"document.body.scrollTop" for(i=0;i<oMenu.length;i++){ oMenu[i].css.top=eval(scrolled)-oMenu[i].height+oMenu[i].lshow oMenu[i].css.visibility='visible' } if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled(); } //Initing menu on pageload onload=menuInit; </script> </head> <body background="bg1.jpg"> <div id="divMenu" style="position:absolute; top:0; left:30; height:100; width:50; visibility:hidden"> <a href="javascript://">Link1</a> <br><br> <a href="javascript://">Link2</a> <br><br> <a href="javascript://">Link3</a> <br><br> <a href="javascript://">Link4</a> <br><br> <a href="javascript://">Link5</a> <br><br> <a href="javascript://">Link6</a> <br><br> <a href="javascript://" onclick="oMenu[0].menu()">MENU</a> </div> <div id="divMenu1" style="position:absolute; top:0; left:130; height:100; width:50; visibility:hidden"> <a href="javascript://">Link1</a> <br><br> <a href="javascript://">Link2</a> <br><br> <a href="javascript://">Link3</a> <br><br> <a href="javascript://">Link4</a> <br><br> <a href="javascript://">Link5</a> <br><br> <a href="javascript://">Link6</a> <br><br> <a href="javascript://" onclick="oMenu[1].menu()">MENU</a> </div> <div id="divMenu2" style="position:absolute; top:0; left:230; height:100; width:50; visibility:hidden"> <a href="javascript://">Link1</a> <br><br> <a href="javascript://">Link2</a> <br><br> <a href="javascript://">Link3</a> <br><br> <a href="javascript://">Link4</a> <br><br> <a href="javascript://">Link5</a> <br><br> <a href="javascript://" onclick="oMenu[2].menu()">MENU<br>NR 3</a> </div> <div id="divMenu3" style="position:absolute; top:0; left:330; height:100; width:50; visibility:hidden"> <a href="javascript://">Link1</a> <br><br> <a href="javascript://">Link2</a> <br><br> <a href="javascript://">Link3</a> <br><br> <a href="javascript://">Link4</a> <br><br> <a href="javascript://">Link5</a> <br><br> <a href="javascript://">Link6</a> <br><br> <a href="javascript://" onclick="oMenu[3].menu()">MENU</a> </div> </body> </html>