웹개발
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] 드롭다운 가로형 메뉴
작성자
운영자
등록일
20081202172647
조회수
35,355
드롭다운 가로형 메뉴 자바스크립트 소스입니다.
자바스크립트 메뉴
Products
Product 1
Product 2
Prices
White sheets
User manuals
Support
Contact Us
Report a bug
Product A
Product B
Another product
Sub item 3
Sub item 3.1
Sub item 3.2
Sub item 3.2.1
Sub item 3.2.2
Sub item 3.2.3
Sub item 3.3
Sub item 4
Sub item 5
Partners
Partner A
Partner B
Another partner
Our latest partners
Visions
History
본문내용 들어가는 곳입니다!
Menu item 1
Menu item 2
Sub item 1
This is a sub
Sub item 3
Sub item 3.1
Sub item 3.2
Sub item 3.2.1
Sub item 3.2.2
Sub item 3.2.3
Sub item 3.3
Sub item 4
Sub item 5
Menu item 3
Sub item 3.1
Sub item 3.2
Sub item 3.3
Sub item 3.4
Menu item 4
Menu item 5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE> 자바스크립트 메뉴 </TITLE> <style type="text/css"> /* General styles for this example page */ html{ height:100%; } body{ font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; font-size:0.8em; margin:0px; padding:0px; text-align:center; /*background-color:#E2EBED;*/ height:100%; } p{ margin-top:5px; margin-bottom:10px; } #mainContainer{ width:760px; margin:0 auto; text-align:left; background-color: #FFF; padding-left:16px; padding-right:16px; padding-bottom:20px; } #dhtmlgoodies_menu img{ border:0px; } /* End general styles for this example page */ /* General configuration CSS */ #dhtmlgoodies_menu ul li ul{ display:none; /* Needed to display ok in Opera */ } #dhtmlgoodies_menu{ visibility:hidden; } #dhtmlgoodies_menu ul{ margin:0px; /* No indent */ padding:0px; /* No indent */ } #dhtmlgoodies_menu li{ list-style-type:none; /* No bullets */ } #dhtmlgoodies_menu a{ margin:0px; padding:0px; } /* End general configuration CSS */ /* Cosmetic */ /*********************************************************************** CSS - MENU BLOCKS General rules for all menu blocks (group of sub items) ***********************************************************************/ #dhtmlgoodies_menu ul{ border:1px solid #000; background-color:#FFF; padding:1px; } #dhtmlgoodies_menu ul.menuBlock1{ /* Menu bar - main menu items */ border:0px; padding:1px; border:1px solid #317082; background-color:#E2EBED; overflow:visible; } #dhtmlgoodies_menu ul.menuBlock2{ /* Menu bar - main menu items */ border:0px; padding:1px; border:1px solid #555; } /*********************************************************************** CSS - MENU ITEMS Here, you could assign rules to the menu items at different depths. ***********************************************************************/ /* General rules for all menu items */ #dhtmlgoodies_menu a{ color: #000; text-decoration:none; padding-left:2px; padding-right:2px; } /* Main menu items */ #dhtmlgoodies_menu .currentDepth1{ padding-left:5px; padding-right:5px; border:1px solid #E2EBED; } #dhtmlgoodies_menu .currentDepth1over{ padding-left:5px; padding-right:5px; background-color:#317082; border:1px solid #000; } #dhtmlgoodies_menu .currentDepth1 a{ font-weight:bold; } #dhtmlgoodies_menu .currentDepth1over a{ /* Text rules */ color:#FFF; font-weight:bold; } /* Sub menu depth 1 */ #dhtmlgoodies_menu .currentDepth2{ padding-right:2px; border:1px solid #FFF; } #dhtmlgoodies_menu .currentDepth2over{ padding-right:2px; background-color:#E2EBED; border:1px solid #000; } #dhtmlgoodies_menu .currentDepth2over a{ /* Text rules */ color:#000; } /* Sub menu depth 2 */ #dhtmlgoodies_menu .currentDepth3{ padding-right:2px; border:1px solid #FFF; } #dhtmlgoodies_menu .currentDepth3over{ padding-right:2px; background-color:#EDE3EB; border:1px solid #000; } /* Sub menu depth 3 */ #dhtmlgoodies_menu .currentDepth4{ padding-right:2px; border:1px solid #FFF; } #dhtmlgoodies_menu .currentDepth4over{ padding-right:2px; background-color:#EBEDE3; border:1px solid #000; } </style> <script type="text/javascript"> /************************************************************************************************************ (C) www.dhtmlgoodies.com, October 2005 This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website. Terms of use: You are free to use this script as long as the copyright message is kept intact. However, you may not redistribute, sell or repost it without our permission. Thank you! www.dhtmlgoodies.com Alf Magne Kalleland ************************************************************************************************************/ var dhtmlgoodies_menuObj; // Reference to the menu div var currentZIndex = 1000; var liIndex = 0; var visibleMenus = new Array(); var activeMenuItem = false; var timeBeforeAutoHide = 1200; // Microseconds from mouse leaves menu to auto hide. var dhtmlgoodies_menu_arrow = 'http://www.dhtmlgoodies.com/scripts/dhtmlgoodies-menu2/images/arrow.gif'; var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false; var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox')>=0?true:false; var navigatorVersion = navigator.appVersion.replace(/.*?MSIE ([0-9]\.[0-9]).*/g,'$1')/1; var menuBlockArray = new Array(); var menuParentOffsetLeft = false; // {{{ getStyle() /** * Return specific style attribute for an element * * @param Object el = Reference to HTML element * @param String property = Css property * @private */ function getStyle(el,property) { if (document.defaultView && document.defaultView.getComputedStyle) { var retVal = null; var comp = document.defaultView.getComputedStyle(el, ''); if (comp){ retVal = comp[property]; if(!retVal){ var comp = document.defaultView.getComputedStyle(el, null); retVal = comp.getPropertyCSSValue(property); } } if(retVal==null)retVal=''; return el.style[property] || retVal; } if (document.documentElement.currentStyle && MSIE){ var value = el.currentStyle ? el.currentStyle[property] : null; return ( el.style[property] || value ); } return el.style[property]; } function getTopPos(inputObj) { var origInputObj = inputObj; var returnValue = inputObj.offsetTop; if(inputObj.tagName=='LI' && inputObj.parentNode.className=='menuBlock1'){ var aTag = inputObj.getElementsByTagName('A')[0]; if(aTag)returnValue += aTag.parentNode.offsetHeight; } var topOfMenuReached = false; while((inputObj = inputObj.offsetParent) != null){ if(inputObj.parentNode.id=='dhtmlgoodies_menu')topOfMenuReached=true; if(topOfMenuReached && !inputObj.className.match(/menuBlock/gi) || (!MSIE && origInputObj.parentNode.className=='menuBlock1')){ var style = getStyle(inputObj,'position'); if(style=='absolute' || style=='relative'){ return returnValue; } } returnValue += inputObj.offsetTop; } return returnValue; } function getLeftPos(inputObj) { var returnValue = inputObj.offsetLeft; var topOfMenuReached = false; while((inputObj = inputObj.offsetParent) != null){ if(inputObj.parentNode.id=='dhtmlgoodies_menu')topOfMenuReached=true; if(topOfMenuReached && !inputObj.className.match(/menuBlock/gi)){ var style = getStyle(inputObj,'position'); if(style=='absolute' || style=='relative')return returnValue; } returnValue += inputObj.offsetLeft; } return returnValue; } function showHideSub() { var attr = this.parentNode.getAttribute('currentDepth'); if(navigator.userAgent.indexOf('Opera')>=0){ attr = this.parentNode.currentDepth; } this.className = 'currentDepth' + attr + 'over'; if(activeMenuItem && activeMenuItem!=this){ activeMenuItem.className=activeMenuItem.className.replace(/over/,''); } activeMenuItem = this; var numericIdThis = this.id.replace(/[^0-9]/g,''); var exceptionArray = new Array(); // Showing sub item of this LI var sub = document.getElementById('subOf' + numericIdThis); if(sub){ visibleMenus.push(sub); sub.style.display=''; sub.parentNode.className = sub.parentNode.className + 'over'; exceptionArray[sub.id] = true; } // Showing parent items of this one var parent = this.parentNode; while(parent && parent.id && parent.tagName=='UL'){ visibleMenus.push(parent); exceptionArray[parent.id] = true; parent.style.display=''; var li = document.getElementById('dhtmlgoodies_listItem' + parent.id.replace(/[^0-9]/g,'')); if(li.className.indexOf('over')<0)li.className = li.className + 'over'; parent = li.parentNode; } hideMenuItems(exceptionArray); } function hideMenuItems(exceptionArray) { /* Hiding visible menu items */ var newVisibleMenuArray = new Array(); for(var no=0;no<visibleMenus.length;no++){ if(visibleMenus[no].className!='menuBlock1' && visibleMenus[no].id){ if(!exceptionArray[visibleMenus[no].id]){ var el = visibleMenus[no].getElementsByTagName('A')[0]; visibleMenus[no].style.display = 'none'; var li = document.getElementById('dhtmlgoodies_listItem' + visibleMenus[no].id.replace(/[^0-9]/g,'')); if(li.className.indexOf('over')>0)li.className = li.className.replace(/over/,''); }else{ newVisibleMenuArray.push(visibleMenus[no]); } } } visibleMenus = newVisibleMenuArray; } var menuActive = true; var hideTimer = 0; function mouseOverMenu() { menuActive = true; } function mouseOutMenu() { menuActive = false; timerAutoHide(); } function timerAutoHide() { if(menuActive){ hideTimer = 0; return; } if(hideTimer<timeBeforeAutoHide){ hideTimer+=100; setTimeout('timerAutoHide()',99); }else{ hideTimer = 0; autohideMenuItems(); } } function autohideMenuItems() { if(!menuActive){ hideMenuItems(new Array()); if(activeMenuItem)activeMenuItem.className=activeMenuItem.className.replace(/over/,''); } } function initSubMenus(inputObj,initOffsetLeft,currentDepth) { var subUl = inputObj.getElementsByTagName('UL'); if(subUl.length>0){ var ul = subUl[0]; ul.id = 'subOf' + inputObj.id.replace(/[^0-9]/g,''); ul.setAttribute('currentDepth' ,currentDepth); ul.currentDepth = currentDepth; ul.className='menuBlock' + currentDepth; ul.onmouseover = mouseOverMenu; ul.onmouseout = mouseOutMenu; currentZIndex+=1; ul.style.zIndex = currentZIndex; menuBlockArray.push(ul); ul = dhtmlgoodies_menuObj.appendChild(ul); var topPos = getTopPos(inputObj); var leftPos = getLeftPos(inputObj)/1 + initOffsetLeft/1; ul.style.position = 'absolute'; ul.style.left = leftPos + 'px'; ul.style.top = topPos + 'px'; var li = ul.getElementsByTagName('LI')[0]; while(li){ if(li.tagName=='LI'){ li.className='currentDepth' + currentDepth; li.id = 'dhtmlgoodies_listItem' + liIndex; liIndex++; var uls = li.getElementsByTagName('UL'); li.onmouseover = showHideSub; if(uls.length>0){ var offsetToFunction = li.getElementsByTagName('A')[0].offsetWidth+2; if(navigatorVersion<6 && MSIE)offsetToFunction+=15; // MSIE 5.x fix initSubMenus(li,offsetToFunction,(currentDepth+1)); } if(MSIE){ var a = li.getElementsByTagName('A')[0]; a.style.width=li.offsetWidth+'px'; a.style.display='block'; } } li = li.nextSibling; } ul.style.display = 'none'; if(!document.all){ //dhtmlgoodies_menuObj.appendChild(ul); } } } function resizeMenu() { var offsetParent = getLeftPos(dhtmlgoodies_menuObj); for(var no=0;no<menuBlockArray.length;no++){ var leftPos = menuBlockArray[no].style.left.replace('px','')/1; menuBlockArray[no].style.left = leftPos + offsetParent - menuParentOffsetLeft + 'px'; } menuParentOffsetLeft = offsetParent; } /* Initializing menu */ function initDhtmlGoodiesMenu() { dhtmlgoodies_menuObj = document.getElementById('dhtmlgoodies_menu'); var aTags = dhtmlgoodies_menuObj.getElementsByTagName('A'); for(var no=0;no<aTags.length;no++){ var subUl = aTags[no].parentNode.getElementsByTagName('UL'); if(subUl.length>0 && aTags[no].parentNode.parentNode.parentNode.id != 'dhtmlgoodies_menu'){ var img = document.createElement('IMG'); img.src = dhtmlgoodies_menu_arrow; aTags[no].appendChild(img); } } var mainMenu = dhtmlgoodies_menuObj.getElementsByTagName('UL')[0]; mainMenu.className='menuBlock1'; mainMenu.style.zIndex = currentZIndex; mainMenu.setAttribute('currentDepth' ,1); mainMenu.currentDepth = '1'; mainMenu.onmouseover = mouseOverMenu; mainMenu.onmouseout = mouseOutMenu; var mainMenuItemsArray = new Array(); var mainMenuItem = mainMenu.getElementsByTagName('LI')[0]; mainMenu.style.height = mainMenuItem.offsetHeight + 2 + 'px'; while(mainMenuItem){ mainMenuItem.className='currentDepth1'; mainMenuItem.id = 'dhtmlgoodies_listItem' + liIndex; mainMenuItem.onmouseover = showHideSub; liIndex++; if(mainMenuItem.tagName=='LI'){ mainMenuItem.style.cssText = 'float:left;'; mainMenuItem.style.styleFloat = 'left'; mainMenuItemsArray[mainMenuItemsArray.length] = mainMenuItem; initSubMenus(mainMenuItem,0,2); } mainMenuItem = mainMenuItem.nextSibling; } for(var no=0;no<mainMenuItemsArray.length;no++){ initSubMenus(mainMenuItemsArray[no],0,2); } menuParentOffsetLeft = getLeftPos(dhtmlgoodies_menuObj); window.onresize = resizeMenu; dhtmlgoodies_menuObj.style.visibility = 'visible'; } window.onload = initDhtmlGoodiesMenu; </script> </HEAD> <BODY> <div id="mainContainer"> <br><br> <div id="dhtmlgoodies_menu"> <ul> <li><a href="#">Products</a> <ul> <li><a href="#">Product 1</a></li> <li><a href="#">Product 2</a> <ul> <li><a href="#">Prices</a></li> <li><a href="#">White sheets</a></li> <li><a href="#">User manuals</a></li> </ul> </li> </ul> </li> <li><a href="#">Support</a> <ul> <li><a href="#">Contact Us</a></li> <li><a href="#">Report a bug</a> <ul> <li><a href="#">Product A</a></li> <li><a href="#">Product B</a></li> <li><a href="#">Another product</a></li> </ul> </li> <li><a href="#">Sub item 3</a> <ul> <li><a href="#">Sub item 3.1</a></li> <li><a href="#">Sub item 3.2</a> <ul> <li><a href="#">Sub item 3.2.1</a></li> <li><a href="#">Sub item 3.2.2</a></li> <li><a href="#">Sub item 3.2.3</a></li> </ul> </li> <li><a href="#">Sub item 3.3</a></li> </ul> </li> <li><a href="#">Sub item 4</a></li> <li><a href="#">Sub item 5</a></li> </ul> </li> <li><a href="#">Partners</a> <ul> <li><a href="#">Partner A</a></li> <li><a href="#">Partner B</a></li> <li><a href="#">Another partner</a></li> <li><a href="#">Our latest partners</a></li> </ul> </li> <li><a href="#">Visions</a> <li><a href="#">History</a> </ul> </div> <br><br><br><br><br> 본문내용 들어가는 곳입니다! </div> <div id="dhtmlgoodies_menu"> <ul> <li><a href="#">Menu item 1</a></li> <li><a href="#">Menu item 2</a> <ul> <li><a href="#">Sub item 1</a></li> <li><a href="#">This is a sub</a></li> <li><a href="#">Sub item 3</a> <ul> <li><a href="#">Sub item 3.1</a></li> <li><a href="#">Sub item 3.2</a> <ul> <li><a href="#">Sub item 3.2.1</a></li> <li><a href="#">Sub item 3.2.2</a></li> <li><a href="#">Sub item 3.2.3</a></li> </ul> </li> <li><a href="#">Sub item 3.3</a></li> </ul> </li> <li><a href="#">Sub item 4</a></li> <li><a href="#">Sub item 5</a></li> </ul> </li> <li><a href="#">Menu item 3</a> <ul> <li><a href="#">Sub item 3.1</a></li> <li><a href="#">Sub item 3.2</a></li> <li><a href="#">Sub item 3.3</a></li> <li><a href="#">Sub item 3.4</a></li> </ul> </li> <li><a href="#">Menu item 4</a> <li><a href="#">Menu item 5</a> </ul> </div> </BODY> </HTML>
0
0
※ 짧은 댓글일수록 예의를 갖추어 작성해 주시기 바랍니다.
번호
제목
글쓴이
추천
조회
날짜
363
[TEXT] 텍스트 링크에 마우스 오버 시 텍스트 변경하기
[1]
운영자
3 /
1
27037
2018-05-01
362
[JQuery] 휴대폰 번호를 입력하면 자동으로 하이픈을 붙여줍니다.
운영자
3 /
1
31152
2018-04-12
361
[JQuery] 사업자 번호를 입력하면 자동으로 하이픈을 붙여줍니다.
운영자
1 /
0
29574
2018-04-11
360
[INPUT BOX] 평수를 제곱미터(㎡)로 제곱미터(㎡)를 다시 평수로 계산해줍니다.
[1]
운영자
2 /
0
26803
2016-01-13
359
[BUTTON] 화면 우측하단에 고정되어있는 버튼
운영자
10 /
0
31339
2010-04-21
358
[ETC] Html의 태그를 제거하는 자바스크립트 소스입니다.
운영자
3 /
0
30797
2010-03-08
357
[SELECT BOX] 멀티플 SELECT BOX에서 OPTION VALUE 가져오기
운영자
3 /
0
39893
2010-02-23
356
[SELECT BOX] SELECT 박스에 항목이 동적으로 추가,삭제됩니다.
운영자
3 /
0
35903
2010-02-10
355
[SELECT BOX] SELECT 박스에 항목이 동적으로 추가됩니다.
운영자
0 /
0
28916
2010-02-05
354
[TEXT] 한글자씩 글자 색이 채워집니다.
운영자
1 /
0
28346
2010-01-27
353
[TEXT] 텍스트가 한글자씩 지정된 색상으로 바뀌는 효과
운영자
0 /
0
27079
2010-01-21
352
[TEXTAREA] 버튼을 클릭하면 텍스트에어리어(TEXTAREA) 의 내용이 전체 선택됩니..
운영자
2 /
0
30221
2010-01-05
351
[LAYER] 드롭&다운 판넬
운영자
1 /
1
29531
2009-10-14
350
[POPUP] 움직이는 팝업 레이어
운영자
2 /
0
28859
2009-10-13
349
[RADIO] 레디오 버튼의 선택 유무 체크하기 3
운영자
1 /
1
25096
2009-09-12
348
[INPUT BOX] 입력되는 단어의 첫글자를 대문자로 바꾸기
운영자
0 /
0
27915
2009-06-09
347
[INPUT BOX] 정규식을 이용한 숫자입력 체크 소스입니다.
운영자
1 /
0
36313
2009-03-03
346
[MENU] 가로형 텍스트 레이어 메뉴
운영자
1 /
0
34237
2009-02-20
345
[LAYER] 클릭하면 레이어 인덱스 위치가 바뀝니다.
운영자
0 /
0
25351
2009-02-19
344
[INPUT BOX] 공백(스페이스) 입력시 경고창
운영자
1 /
0
28895
2009-02-18
343
[SELECT MENU] 세이클럽 형식 펼침목록 메뉴
운영자
0 /
0
27420
2009-02-17
342
[LAYER] 레이어 보이기/숨기기
운영자
2 /
0
28178
2009-02-16
341
[TABLE] sort 테이블 II
운영자
0 /
0
28205
2009-02-07
340
[TABLE] sort 가능한 테이블
운영자
0 /
0
30309
2009-02-06
339
[RADIO BOX] 라디오 박스를 선택하면 input 박스가 나타납니다.
운영자
0 /
0
26588
2009-02-04
1
[2]
[3]
[4]
[5]
[6]
[7]
[8]
[9]
[10]
제목
내용
제목+내용
작성자