 전체소개
책갈피 방식 탭매뉴 형식의 메뉴 입니다.
스크립트가 잘되어있군요 메뉴추가와 수정이 아주 간편합니다.
파일 설명
highlight-path.js : 자바 스크립트 경로 지정파일
menuG5.css : 스타일 시트 파일
content.js : 메뉴설정부분
기능 먼저보기
깔끔한 레이아웃으로 속도가 스무쓰하다 ^^
소스 설명
<head>
<link rel=stylesheet href="menuG5.css" type="text/css">
<style type="text/css">
.pad { padding:0px 30px; border-width:1px; border-style:solid; border-color:#ffffff #ffffff #666666 #ffffff; }
.padSub { padding:1px; border-width:1px; border-style:solid; border-color:#666666; background-color:#cccccc; }
.padSub2 { padding:1px; border-width:1px; border-style:solid; border-color:#666666; background-color:#cccccc; }
.itemTopOff { width:90px; padding:1px 12px; background-color:#999999; border-width:1px 1px 0px 1px; border-style:solid; border-color:#666666; text-align:center; }
.itemTopOn { cursor:default; width:110px; padding:4px 12px; background-color:#f0f0f0; border-width:1px 1px 0px 1px; border-style:solid; border-color:#666666; text-align:center; }
.itemOff { width:115px; padding:1px 6px 1px 11px; text-align:left; background-color:#cccccc; }
.itemOn { cursor:default; width:115px; padding:1px 6px 1px 11px; text-align:left; background-color:#333333; }
.fontTopOff { font-family:verdana; font-size:10pt; color:#000000; }
.fontTopOn { font-family:verdana; font-size:10pt; color:#000000; font-weight:bold; }
.fontOff { font-family:verdana; font-size:10pt; color:#000000; }
.fontOn { font-family:verdana; font-size:10pt; color:#ffffff; }
.tagOff { width:8px; height:13px; float:right; background:url("images/tagRN.gif") no-repeat bottom; }
.tagOn { width:8px; height:13px; float:right; background:url("images/tagRH.gif") no-repeat bottom; }
</style>
<script language="javascript" src="highlight-path.js"></script>
<script language="javascript" src="script/menuG5LoaderX.js"></script>
</head> <body onload="showMenu('Demo')">
Html파일에 있는 소스인 이부분을 넣어 주셔야 합니다.
content.js 파일
addMenu("Demo", "demo-top"); //메인부분의 메뉴 ID를 정합니다.
addLink("demo-top", "Home", "", "", "l1"); //첫번째 메뉴
addSubMenu("demo-top", "Tool Scripts", "", "", "tool-sub", "s1"); //2번째 메뉴
addSubMenu("demo-top", "Game Scripts", "", "", "game-sub", "s2"); //3번째 메뉴
addSubMenu("demo-top", "User Forum", "", "", "forum-sub", "s3"); //4번째 메뉴
addLink("demo-top", "Contact", "", "", "l2"); //5번째 메뉴
addSubMenu("tool-sub", "Menu Scripts", "", "", "menu-sub", ""); //tool-sub로 지정된부분의 서브메뉴 메인
addLink("tool-sub", "Xin Calendar", "", "", ""); //tool-sub로 지정된부분의 서브메뉴1
addLink("tool-sub", "Select Menu 2", "", "", ""); //tool-sub로 지정된부분의 서브메뉴2
addLink("tool-sub", "Form Guard", "", "", ""); //tool-sub로 지정된부분의 서브메뉴3
addLink("game-sub", "Soul Of Fighters", "", "", ""); //game-sub로 지정된부분의 서브메뉴1
addLink("game-sub", "Simple Tetris 2", "", "", ""); //game-sub로 지정된부분의 서브메뉴2
addLink("game-sub", "Bubble Puzzle", "", "", ""); //game-sub로 지정된부분의 서브메뉴3
addLink("game-sub", "Puzzle OnSite", "", "", ""); //game-sub로 지정된부분의 서브메뉴4
addLink("forum-sub", "Menu G5", "", "", ""); //forum-sub로 지정된 서브메뉴1
addLink("forum-sub", "Xin Calendar", "", "", ""); //forum-sub로 지정된 서브메뉴2
addLink("forum-sub", "Form Utilities", "", "", ""); //forum-sub로 지정된 서브메뉴3
addLink("menu-sub", "Menu G5", "", "", ""); //menu-sub로 지정된 서브메뉴1
addLink("menu-sub", "Menu G4", "", "", ""); //menu-sub로 지정된 서브메뉴2
addLink("menu-sub", "Menu G3", "", "", ""); //menu-sub로 지정된 서브메뉴3
endMenu();
우선 가장 앞부분의 addLink 는 해당 메뉴의 설정입니다.
그리고 addSubMenu 부분은 서브메뉴를 설정하는 부분입니다.
addLink 로 시작하는 부분에는 서브메뉴가 없는 부분이며 addSubMenu 는 서브메뉴를 설정하는 부분입니다.
addLink("demo-top", "Home", "", "http://www.happycgi.com" , "l1");
addLink("적용되는부분의 ID를 지정합니다","메뉴의 이름을 정합니다","","링크주소를 정합니다", "l1");
addSubMenu("tool-sub", "Menu Scripts", "", "http://www.happycgi.com" , "menu-sub", "");
addSubMenu("적용되는부분의 ID를 지정합니다" , "메뉴의 이름을 정합니다" , "" , "링크주소를 지정합니다" , "서브메뉴로 나올 부분의 ID를 지정합니다" , "");
Html파일에 있는 이부분이 메뉴가 표시되는 부분입니다.
<table cellpadding="0" cellspacing="0" border="0" align="center"><tr><td id="holder"> </td></tr></table><br clear="all">
id="holder" 부분이 표시되는 것 입니다.
|
