웹개발
Category
JSP/Servlet
ASP
ASP.NET
PHP
웹디자인
Category
Photoshop
Illustrator
Flash
클라이언트 스크립트
Category
●
Javascript Example
Javascript
CSS3
HTML5
데이타 베이스
Category
MySQL
MSSQL
커뮤니티
Category
공지사항
개발자마당
엔지니어마당
자유마당
플래쉬게임
여행과정보
질문과 답변
Category
웹개발 질문과답변
디자인 질문과답변
자료실
Category
이미지 자료실
개발 자료실
클럽
Category
자동차클럽
하늘소리
공이랑
Javascript Example
Javascript
CSS3
HTML5
Javascript Example
제 목
[MENU] 슬라이딩 메뉴
작성자
운영자
등록일
200807070102629
조회수
33,197
슬라이딩 메뉴 자바스크립트 소스입니다.
Insert title here
New scripts
Slide out menu
Content organizer
Item #1
Item #2
Slide in pane
Chess widget
Color picker
Updated scripts
Calendar script
Tab menu
DHTML menu
Slide in pane
Support us
Link to us
Recommend us
Donate
Forum
Topic one
Topic two
Topic three
Contact us
Support
Feedback
Submit a script
The end(no subs)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <style type="text/css"> /* DEMO CSS */ a{ color:red; text-decoration:none; } img{ border:0px; } #mainContainer{ width:760px; height:600px; margin:0 auto; text-align:left; background-color:#FFF; } #leftContainer{ width:160px; float:left; padding-left:5px; padding-right:5px; height:300px; } #contentContainer{ width:590px; float:left; } .ad{ clear:both; text-align:center; padding:5px; } /* END DEMO CSS */ #dhtmlgoodies_menu{ font-family:arial; /* Font for main menu items */ width:150px; /* Width of main menu */ } #dhtmlgoodies_menu li{ /* Main menu <li> */ list-style-type:none; /* No bullets */ margin:0px; /* No margin - needed for Opera */ } #dhtmlgoodies_menu ul{ margin:0px; /* No <ul> air */ padding:0px; /* No <ul> air */ } #dhtmlgoodies_menu ul li ul{ /* Styling for those who doesn't have javascript enabled */ padding-left:10px; } #dhtmlgoodies_menu li a{ /* Main menu links */ text-decoration:none; /* No underline */ color:#000; /* Black text color */ height:20px; /* 20 pixel height */ line-height:20px; /* 20 pixel height */ vertical-align:middle; /* Align text in the middle */ border:1px solid #000; /* Black border */ background-color:#FAFAFA; /* Light blue background color */ margin:1px; /* A little bit of air */ padding:1px; /* Air between border and text inside */ display:block; } #dhtmlgoodies_menu li a:hover,#dhtmlgoodies_menu .activeMainMenuItem{ color:#FFF; background-color:#317082; } .dhtmlgoodies_subMenu{ visibility:hidden; position:absolute; overflow:hidden; border:1px solid #000; background-color:#FAFAFA; font-family:arial; text-align:left; } .dhtmlgoodies_subMenu ul{ margin:0px; padding:0px; } .dhtmlgoodies_subMenu ul li{ list-style-type:none; margin:0px; padding:1px; /* 1px of air between submenu border and sub menu item - (the "white" space you see on mouse over )*/ } .dhtmlgoodies_subMenu ul li a{ /* Sub menu items */ white-space:nowrap; /* No line break */ text-decoration:none; /* No underline */ color:#000; /* Black text color */ height:16px; /* 16 pixels height */ line-height:16px; /* 16 pixels height */ padding:1px; /* 1px of "air" inside */ display:block; /* Display as block - you shouldn't change this */ } .dhtmlgoodies_subMenu ul li a:hover{ /* Sub menu items - mouse over effects */ color:#FFF; /* White text */ background-color:#317082; /* Blue background */ } </style> <SCRIPT LANGUAGE="JavaScript"> <!-- /*** * A huge thanks to Dean Parkinson for the help with this widget */ /************************************************************************************************************ @fileoverview Slide out menu Copyright (C) 2007 Dean Parkinson This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option) any later version. This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details. You should have received a copy of the GNU Lesser General Public License along with this library; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA Alf Magne Kalleland, 2007 Owner of DHTMLgoodies.com ************************************************************************************************************/ var MENUDIV_ID = "dhtmlgoodies_menu"; var SUBMENU_CLASS = 'dhtmlgoodies_subMenu'; var menuItems; var slideSpeed_out = 10; // Steps to move sub menu at a time ( higher = faster) var slideSpeed_in = 10; var delayMenuClose = 150; // Microseconds from mouseout to close of menu var slideTimeout_out = 25; // Microseconds between slide steps ( lower = faster) var slideTimeout_in = 10; // Microseconds between slide steps ( lower = faster) var xOffsetSubMenu = 0; // Offset x-position of sub menu items - use negative value if you want the sub menu to overlap main menu /* Don't change anything below here */ var indeces = new Array(); indeces[0] = 0; var isMSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false; var browserVersion = parseInt(navigator.userAgent.replace(/.*?MSIE ([0-9]+?)[^0-9].*/g,'$1')); if(!browserVersion)browserVersion=1; function mouseOn(obj) { var mi = findNode(getSearchIdFromObj(obj)); if (mi) mi.mouseOn(); } function mouseOff(obj) { var mi = findNode(getSearchIdFromObj(obj)); if (mi) mi.mouseOff(); } function getSearchIdFromObj(obj) { // pull the postfix off the A link or LI tag id and return the menu item ID var objId = obj.id; var idx = objId.indexOf('_'); if (idx>=0) { return "MenuItem" + objId.substring(idx); } return null; } function slideChildMenu(aId) { var mi = findNode(aId); if (mi) mi.slideChildMenu(); } function findNode(searchId) { var result; for (var no=0;no<menuItems.length;no++) { result = menuItems[no].findNode(searchId); if (result) return result; } return null; } function getNextIndex(lvl) { var result = 0; if (indeces.length<=lvl) { indeces[lvl] = 1; } else { result = indeces[lvl]; indeces[lvl]++; } return result; } function MenuItem(divref, ulref, liref, lvlnum, parentref) { this.parent = parentref; this.div = divref; this.ul = ulref; this.width = this.ul.offsetWidth; // this.left = div.style.left.replace(/[^0-9]/g,''); this.li = liref; this.alink = this.li.getElementsByTagName('A')[0]; this.lvl = lvlnum; this.idx = getNextIndex(this.lvl); this.children; this.subUL = this.li.getElementsByTagName('UL')[0]; this.children; this.isMouseOnMe = false; // note: if !isOpen && !isClosed then I am animating a slide this.isChildMenuOpen = false; this.isChildMenuClosed = true; // Constructor // if a node does not have an A tag but it's children do then we need // null out this node's alink field... if (this.alink) { if (this.alink.parentNode!=this.li) this.alink = null; } if (this.subUL) { this.children = new Array(); var subLI = this.subUL.getElementsByTagName('LI')[0]; while(subLI) { if(subLI.tagName && subLI.tagName.toLowerCase()=='li') { this.children[this.children.length] = new MenuItem(null, this.subUL, subLI, this.lvl + 1, this); } subLI = subLI.nextSibling; } } this.getPostfix = function() { return '_' + this.idx + '_' + this.lvl; } this.getId = function() { return "MenuItem" + this.getPostfix(); } this.hasChildren = function() { return (this.children!=null); } this.getTopPos = function() { var origDisp = this.div.style.display; this.div.style.display = ""; var obj = this.li; var result = obj.offsetTop; while((obj = obj.offsetParent) != null) result += obj.offsetTop; this.div.style.display = origDisp; return result; } this.getLeftPos = function() { var origDisp = this.div.style.display; this.div.style.display = ""; var obj = this.li; var result = obj.offsetLeft; while((obj = obj.offsetParent) != null) result += obj.offsetLeft; this.div.style.display = origDisp; return result; } this.renderNode = function() { // set node properties this.li.id = "menuItemLI" + this.getPostfix(); this.ul.style.position = "relative"; if (this.alink) { this.alink.id = "menuItemA" + this.getPostfix(); this.alink.onmouseover = function() {mouseOn(this);}; this.alink.onmouseout = function() {mouseOff(this);}; } else { this.li.onmouseover = function() {mouseOn(this);}; this.li.onmouseout = function() {mouseOff(this);}; } // set sub-menu nodes if (this.hasChildren()) { var mi = this.children[0]; var subdiv = document.createElement('DIV'); subdiv.className=SUBMENU_CLASS; document.body.appendChild(subdiv); subdiv.id = "menuItemDIV" + mi.getPostfix(); this.subUL.id = "menuItemUL" + mi.getPostfix(); subdiv.appendChild(this.subUL); subdiv.style.left = this.getLeftPos() + this.width + xOffsetSubMenu + 'px'; subdiv.style.top = this.getTopPos() + 'px'; subdiv.style.visibility = "hidden"; subdiv.style.display = "none"; subdiv.style.zindex = "1000"; for (var no=0;no<this.children.length;no++) { var mi = this.children[no]; mi.div = subdiv; mi.renderNode(); } } return this.li; } this.findNode = function(searchId) { var result; if (this.getId() == searchId) { result = this; } else { if (this.hasChildren()) { for (var no=0;no<this.children.length;no++) { var mi = this.children[no]; result = mi.findNode(searchId); if (result!=null) break; } } } return result; } this.mouseOn = function() { this.isMouseOnMe = true; if (this.hasChildren() && this.isChildMenuClosed) { this.initiateChildMenuOpen(); } } this.mouseOff = function() { this.isMouseOnMe = false; if (this.hasChildren() && !this.isChildMenuClosed) { this.initiateChildMenuClose(); } else if (this.parent) { this.parent.mouseOff(); } } this.isMouseOnChild = function() { if (this.isMouseOnMe) return true; if (this.hasChildren()) { for (var no=0;no<this.children.length;no++) { if (this.children[no].isMouseOnChild()) return true; } } return false; } this.initiateChildMenuOpen = function() { this.isChildMenuClosed = false; var childDiv = this.children[0].div; childDiv.style.width = "0px"; childDiv.style.visibility = "visible"; childDiv.style.display = ""; this.slideChildMenu(); } this.initiateChildMenuClose = function() { this.isChildMenuOpen = false; // we have to wait to close the menu // allow the mouse to navigate over the child menu setTimeout("slideChildMenu('" + this.getId() + "')", delayMenuClose); } this.slideChildMenu = function() { var divref = this.children[0].div; var ulref = this.children[0].ul; var maxwidth = this.children[0].width; var nextWidth; if (this.isMouseOnMe || this.isMouseOnChild()) { nextWidth = divref.offsetWidth + slideSpeed_out; if (nextWidth >= maxwidth) { this.finishOpeningChild(divref, ulref, maxwidth); } else { ulref.style.left = nextWidth - maxwidth + "px"; divref.style.width = nextWidth + "px"; setTimeout("slideChildMenu('" + this.getId() + "')", slideTimeout_out); } } else { nextWidth = divref.offsetWidth - slideSpeed_in; if (nextWidth <= 0) { this.finishClosingChild(divref, ulref, maxwidth); } else { ulref.style.left = nextWidth - maxwidth + "px"; divref.style.width = nextWidth + "px"; setTimeout("slideChildMenu('" + this.getId() + "')", slideTimeout_out); } } } this.finishOpeningChild = function(divref, ulref, maxwidth) { this.isChildMenuOpen = true; this.isChildMenuClosed = false; ulref.style.left = "0px"; divref.style.width = maxwidth + "px"; } this.finishClosingChild = function(divref, ulref, maxwidth) { this.isChildMenuOpen = false; this.isChildMenuClosed = true; divref.style.visibility = "hidden"; divref.style.display = "none"; divref.style.width = maxwidth + "px"; if (this.parent) this.parent.mouseOff(); } } function collectMenuNodes(menuObj) { if (!menuObj) return null; var results = new Array(); var menuUL = menuObj.getElementsByTagName('UL')[0]; var menuLI = menuUL.getElementsByTagName('LI')[0]; while(menuLI) { if(menuLI.tagName && menuLI.tagName.toLowerCase()=='li') { results[results.length] = new MenuItem(menuObj, menuUL, menuLI, 0, null); } menuLI = menuLI.nextSibling; } return results; } function initMenu() { var mainDiv = document.getElementById(MENUDIV_ID); menuItems = collectMenuNodes(mainDiv); if (menuItems) { for (var no=0;no<menuItems.length;no++) { var mi = menuItems[no]; mi.renderNode(); } mainDiv.style.visibility = 'visible'; } // window.onresize = resetPosition; } window.onload = initMenu; //--> </SCRIPT> </head> <body> <div id="leftContainer"> <!--- START MENU HTML --> <div id="dhtmlgoodies_menu" style="visibility: hidden;"> <ul> <li><a href="#">New scripts</a> <ul> <li><a href="#">Slide out menu</a></li> <li><a href="#">Content organizer</a> <ul> <li><a href="#">Item #1</a></li> <li><a href="#">Item #2</a></li> </ul> </li> <li><a href="#">Slide in pane</a></li> <li><a href="#">Chess widget</a></li> <li><a href="#">Color picker</a></li> </ul> </li> <li><a href="#">Updated scripts</a> <ul> <li><a href="#">Calendar script</a></li> <li><a href="#">Tab menu</a></li> <li><a href="#">DHTML menu</a></li> <li><a href="#">Slide in pane</a></li> </ul> </li> <li><a href="#">Support us</a> <ul> <li><a href="#">Link to us</a></li> <li><a href="#">Recommend us</a></li> <li><a href="#">Donate</a></li> </ul> </li> <li><a href="#">Forum</a> <ul> <li><a href="#">Topic one</a></li> <li><a href="#">Topic two</a></li> <li><a href="#">Topic three</a></li> </ul> </li> <li><a href="#">Contact us</a> <ul> <li><a href="#">Support</a></li> <li><a href="#">Feedback</a></li> <li><a href="#">Submit a script</a></li> </ul> </li> <li><a href="#">The end(no subs)</a></li> </ul> </div> <!-- END MENU HTML--> </div> </div> </body> </html>
0
0
※ 짧은 댓글일수록 예의를 갖추어 작성해 주시기 바랍니다.
번호
제목
글쓴이
추천
조회
날짜
238
[SELECT] SELECT BOX에서 선택된 OPTION VALUE 와 TEXT 가져오기
운영자
18 /
8
82995
2008-08-09
237
[TIME] 앞으로 남은 날짜를 계산해줍니다.
운영자
0 /
0
23857
2008-08-09
236
[TIME] 타이머 자바스크립트
운영자
0 /
0
23809
2008-08-09
235
[CALENDAR] 팝업 카렌더 II
운영자
0 /
1
25358
2008-08-09
234
[TEXT] 텍스트 하이라이트 효과
운영자
0 /
0
31072
2008-08-09
233
[TEXT] 자연스럽게 좌-우측으로 페이딩 아웃되는 스크롤 텍스트
운영자
0 /
1
24062
2008-08-08
232
[CALENDAR] 심플한 달력!
운영자
0 /
0
24514
2008-08-07
231
[IMAGE] 파일 업로드시 이미지 미리보기
운영자
0 /
17
28928
2008-08-04
230
[TABLE] 마우스 오버시 테이블이 페이드 인 아웃됩니다!
운영자
2 /
0
24899
2008-08-04
229
[CALCULATOR] 심플한 계산기
운영자
0 /
0
24527
2008-08-01
228
[PASSWORD] 패스워드를 입력해야만 페이지를 볼수 있습니다.
운영자
0 /
0
26444
2008-07-31
227
[TEXT] 폼안에서 글자가 타이핑 됩니다.
운영자
0 /
0
24375
2008-07-30
226
[WINDOW] 브라우저 흔들기
운영자
0 /
0
24075
2008-07-29
225
[TABLE] 테이블 가로라인 이동
운영자
0 /
0
24878
2008-07-28
224
[TEXT] 텍스트가 페이딩 롤오버 됩니다.
운영자
0 /
0
23978
2008-07-26
223
[LINK] 링크된 텍스테에 마우스를 올리면 색상이 깜빡거립니다.
운영자
0 /
0
23766
2008-07-25
222
[TABLE] 테이블 소트시키기 II
운영자
0 /
0
24096
2008-07-21
221
[FILE] 버튼을 누르면 첨부파일 입력창 갯수가 늘어납니다.
운영자
0 /
0
23701
2008-07-20
220
[TOOLTIP] 말풍선 툴팁!
운영자
1 /
9
29803
2008-07-17
219
[TABLE] 드래그 & 드롭 테이블
운영자
0 /
4
27980
2008-07-08
218
[MENU] 슬라이딩 메뉴
운영자
0 /
0
33197
2008-07-07
217
[TABLE] 테이블 하이라이트 효과
운영자
0 /
0
24693
2008-07-05
216
[MENU] 네이버 콤보 스타일 (토글 리스트 메뉴)
운영자
0 /
0
26918
2008-07-04
215
[INPUT BOX] 정규식을 이용한 공백(SPACE) 체크하기
운영자
2 /
3
65647
2008-07-03
214
[POPUP] 간단한 풍선도움말
운영자
0 /
0
23644
2008-07-02
[1]
[2]
[3]
[4]
[5]
6
[7]
[8]
[9]
[10]
제목
내용
제목+내용
작성자