웹개발
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] 탭메뉴형 자바스크립트
작성자
운영자
등록일
20081202180214
조회수
39,202
탭메뉴형 자바스크립트 소스입니다.
자바스크립트
Products
Support
About us
Download
Product 1
Product 2
Product 3
Phone
Email
Knowledge base
History
The team
Contact us
Visions
Patches
Whitepapers
Tab menu
Color picker
Window scripts
Games
<HTML> <HEAD> <TITLE> 자바스크립트 </TITLE> <style type="text/css"> /*********************************************************************************************** Copyright (c) 2005 - Alf Magne Kalleland post@dhtmlgoodies.com Get this and other scripts at www.dhtmlgoodies.com You can use this script freely as long as this copyright message is kept intact. ***********************************************************************************************/ body{ font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; margin-top:0px; } .bodyText{ padding-left:10px; padding-right:10px; border-top:1px solid #000000; } .bodyText p{ margin-top:5px; } #mainContainer{ width:760px; height:600px; border:1px solid #000000; margin:0 auto; background-image:url('../../images/heading3.gif'); background-repeat:no-repeat; padding-top:85px; } #mainMenu{ background-color: #FFF; /* Background color of main menu */ font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Fonts of main menu items */ font-size:0.9em; /* Font size of main menu items */ border-bottom:1px solid #000000; /* Bottom border of main menu */ height:30px; /* Height of main menu */ position:relative; /* Don't change this position attribute */ } #mainMenu a{ padding-left:5px; /* Spaces at the left of main menu items */ padding-right:5px; /* Spaces at the right of main menu items */ font-weight:bold; /* Don't change these two options */ position:absolute; bottom:-1px; /* Change this value to -2px if you're not using a strict doctype */ } #submenu{ font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font of sub menu items */ background-color:#E2EBED; /* Background color of sub menu items */ width:100%; /* Don't change this option */ } #submenu div{ white-space:nowrap; /* Don't change this option */ } /* Style attributes of active menu item */ #mainMenu .activeMenuItem{ /* Border options */ border-left:1px solid #000000; border-top:1px solid #000000; border-right:1px solid #000000; background-color: #E2EBED; /* Background color */ cursor:pointer; /* Cursor like a hand when the user moves the mouse over the menu item */ } #mainMenu .activeMenuItem img{ position:absolute; bottom:0px; right:0px; } /* Style attributes of inactive menu items */ #mainMenu .inactiveMenuItem{ color: #000; /* Text color */ cursor:pointer; /* Cursor like a hand when the user moves the mouse over the menu item */ } #submenu a{ text-decoration:none; padding-left:5px; /* Space at the left of each sub menu item */ padding-right:5px; /* Space at the right of each sub menu item */ color: #000; /* Text color */ font-size:0.9em; } #submenu a:hover{ color: #FF0000; /* Red color when the user moves the mouse over sub menu items */ } </style> <script type="text/javascript"> /*********************************************************************************************** Copyright (c) 2005 - Alf Magne Kalleland post@dhtmlgoodies.com Get this and other scripts at www.dhtmlgoodies.com You can use this script freely as long as this copyright message is kept intact. ***********************************************************************************************/ var menuAlignment = 'left'; // Align menu to the left or right? var topMenuSpacer = 0; // Horizontal space(pixels) between the main menu items var activateSubOnClick = false; var leftAlignSubItems = false; // left align sub items t var activeMenuItem = false; // Don't change this option. It should initially be false var activeTabIndex = 0; // Index of initial active tab (0 = first tab) - If the value below is set to true, it will override this one. var rememberActiveTabByCookie = true; // Set it to true if you want to be able to save active tab as cookie var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false; var Opera = navigator.userAgent.indexOf('Opera')>=0?true:false; var navigatorVersion = navigator.appVersion.replace(/.*?MSIE ([0-9]\.[0-9]).*/g,'$1')/1; /* These cookie functions are downloaded from http://www.mach5.com/support/analyzer/manual/html/General/CookiesJavaScript.htm */ function Get_Cookie(name) { var start = document.cookie.indexOf(name+"="); var len = start+name.length+1; if ((!start) && (name != document.cookie.substring(0,name.length))) return null; if (start == -1) return null; var end = document.cookie.indexOf(";",len); if (end == -1) end = document.cookie.length; return unescape(document.cookie.substring(len,end)); } // This function has been slightly modified function Set_Cookie(name,value,expires,path,domain,secure) { expires = expires * 60*60*24*1000; var today = new Date(); var expires_date = new Date( today.getTime() + (expires) ); var cookieString = name + "=" +escape(value) + ( (expires) ? ";expires=" + expires_date.toGMTString() : "") + ( (path) ? ";path=" + path : "") + ( (domain) ? ";domain=" + domain : "") + ( (secure) ? ";secure" : ""); document.cookie = cookieString; } function showHide() { if(activeMenuItem){ activeMenuItem.className = 'inactiveMenuItem'; var theId = activeMenuItem.id.replace(/[^0-9]/g,''); document.getElementById('submenu_'+theId).style.display='none'; var img = activeMenuItem.getElementsByTagName('IMG'); if(img.length>0)img[0].style.display='none'; } var img = this.getElementsByTagName('IMG'); if(img.length>0)img[0].style.display='inline'; activeMenuItem = this; this.className = 'activeMenuItem'; var theId = this.id.replace(/[^0-9]/g,''); document.getElementById('submenu_'+theId).style.display='block'; if(rememberActiveTabByCookie){ Set_Cookie('dhtmlgoodies_tab_menu_tabIndex','index: ' + (theId-1),100); } } function initMenu() { var mainMenuObj = document.getElementById('mainMenu'); var menuItems = mainMenuObj.getElementsByTagName('A'); if(document.all){ mainMenuObj.style.visibility = 'hidden'; document.getElementById('submenu').style.visibility='hidden'; } if(rememberActiveTabByCookie){ var cookieValue = Get_Cookie('dhtmlgoodies_tab_menu_tabIndex') + ''; cookieValue = cookieValue.replace(/[^0-9]/g,''); if(cookieValue.length>0 && cookieValue<menuItems.length){ activeTabIndex = cookieValue/1; } } var currentLeftPos = 15; for(var no=0;no<menuItems.length;no++){ if(activateSubOnClick)menuItems[no].onclick = showHide; else menuItems[no].onmouseover = showHide; menuItems[no].id = 'mainMenuItem' + (no+1); if(menuAlignment=='left') menuItems[no].style.left = currentLeftPos + 'px'; else menuItems[no].style.right = currentLeftPos + 'px'; currentLeftPos = currentLeftPos + menuItems[no].offsetWidth + topMenuSpacer; var img = menuItems[no].getElementsByTagName('IMG'); if(img.length>0){ img[0].style.display='none'; if(MSIE && !Opera && navigatorVersion<7){ img[0].style.bottom = '-1px'; img[0].style.right = '-1px'; } } if(no==activeTabIndex){ menuItems[no].className='activeMenuItem'; activeMenuItem = menuItems[no]; var img = activeMenuItem.getElementsByTagName('IMG'); if(img.length>0)img[0].style.display='inline'; }else menuItems[no].className='inactiveMenuItem'; if(!document.all)menuItems[no].style.bottom = '-1px'; if(MSIE && navigatorVersion < 6)menuItems[no].style.bottom = '-2px'; } var mainMenuLinks = mainMenuObj.getElementsByTagName('A'); var subCounter = 1; var parentWidth = mainMenuObj.offsetWidth; while(document.getElementById('submenu_' + subCounter)){ var subItem = document.getElementById('submenu_' + subCounter); if(leftAlignSubItems){ // No action }else{ var leftPos = mainMenuLinks[subCounter-1].offsetLeft; document.getElementById('submenu_'+subCounter).style.paddingLeft = leftPos + 'px'; subItem.style.position ='absolute'; if(subItem.offsetWidth > parentWidth){ leftPos = leftPos - Math.max(0,subItem.offsetWidth-parentWidth); } subItem.style.paddingLeft = leftPos + 'px'; subItem.style.position ='static'; } if(subCounter==(activeTabIndex+1)){ subItem.style.display='block'; }else{ subItem.style.display='none'; } subCounter++; } if(document.all){ mainMenuObj.style.visibility = 'visible'; document.getElementById('submenu').style.visibility='visible'; } document.getElementById('submenu').style.display='block'; } window.onload = initMenu; </script> </HEAD> <BODY> <!-- This is the start of the menu --> <div id="mainMenu"> <a>Products</a> <a>Support</a> <a>About us</a> <a>Download</a> </div> <div id="submenu"> <!-- The first sub menu --> <div id="submenu_1"> <a href="#">Product 1</a> <a href="#">Product 2</a> <a href="#">Product 3</a> </div> <!-- Second sub menu --> <div id="submenu_2"> <a href="#">Phone</a> <a href="#">Email</a> <a href="#">Knowledge base</a> </div> <!-- Third sub menu --> <div id="submenu_3"> <a href="#">History</a> <a href="#">The team</a> <a href="#">Contact us</a> <a href="#">Visions</a> </div> <!-- Fourth sub menu --> <div id="submenu_4"> <a href="#">Patches</a> <a href="#">Whitepapers</a> <a href="#">Tab menu</a> <a href="#">Color picker</a> <a href="#">Window scripts</a> <a href="#">Games</a> </div> </div> </BODY> </HTML>
0
0
※ 짧은 댓글일수록 예의를 갖추어 작성해 주시기 바랍니다.
번호
제목
글쓴이
추천
조회
날짜
363
[TEXT] 텍스트 링크에 마우스 오버 시 텍스트 변경하기
[1]
운영자
3 /
1
27073
2018-05-01
362
[JQuery] 휴대폰 번호를 입력하면 자동으로 하이픈을 붙여줍니다.
운영자
3 /
1
31194
2018-04-12
361
[JQuery] 사업자 번호를 입력하면 자동으로 하이픈을 붙여줍니다.
운영자
1 /
0
29611
2018-04-11
360
[INPUT BOX] 평수를 제곱미터(㎡)로 제곱미터(㎡)를 다시 평수로 계산해줍니다.
[1]
운영자
2 /
0
26818
2016-01-13
359
[BUTTON] 화면 우측하단에 고정되어있는 버튼
운영자
10 /
0
31362
2010-04-21
358
[ETC] Html의 태그를 제거하는 자바스크립트 소스입니다.
운영자
3 /
0
30805
2010-03-08
357
[SELECT BOX] 멀티플 SELECT BOX에서 OPTION VALUE 가져오기
운영자
3 /
0
39928
2010-02-23
356
[SELECT BOX] SELECT 박스에 항목이 동적으로 추가,삭제됩니다.
운영자
3 /
0
35921
2010-02-10
355
[SELECT BOX] SELECT 박스에 항목이 동적으로 추가됩니다.
운영자
0 /
0
28925
2010-02-05
354
[TEXT] 한글자씩 글자 색이 채워집니다.
운영자
2 /
0
28378
2010-01-27
353
[TEXT] 텍스트가 한글자씩 지정된 색상으로 바뀌는 효과
운영자
0 /
0
27092
2010-01-21
352
[TEXTAREA] 버튼을 클릭하면 텍스트에어리어(TEXTAREA) 의 내용이 전체 선택됩니..
운영자
2 /
0
30255
2010-01-05
351
[LAYER] 드롭&다운 판넬
운영자
1 /
1
29538
2009-10-14
350
[POPUP] 움직이는 팝업 레이어
운영자
2 /
0
28869
2009-10-13
349
[RADIO] 레디오 버튼의 선택 유무 체크하기 3
운영자
1 /
1
25101
2009-09-12
348
[INPUT BOX] 입력되는 단어의 첫글자를 대문자로 바꾸기
운영자
0 /
0
27923
2009-06-09
347
[INPUT BOX] 정규식을 이용한 숫자입력 체크 소스입니다.
운영자
1 /
0
36321
2009-03-03
346
[MENU] 가로형 텍스트 레이어 메뉴
운영자
1 /
0
34245
2009-02-20
345
[LAYER] 클릭하면 레이어 인덱스 위치가 바뀝니다.
운영자
0 /
0
25362
2009-02-19
344
[INPUT BOX] 공백(스페이스) 입력시 경고창
운영자
1 /
0
28924
2009-02-18
343
[SELECT MENU] 세이클럽 형식 펼침목록 메뉴
운영자
0 /
0
27427
2009-02-17
342
[LAYER] 레이어 보이기/숨기기
운영자
2 /
0
28185
2009-02-16
341
[TABLE] sort 테이블 II
운영자
0 /
0
28212
2009-02-07
340
[TABLE] sort 가능한 테이블
운영자
0 /
0
30344
2009-02-06
339
[RADIO BOX] 라디오 박스를 선택하면 input 박스가 나타납니다.
운영자
0 /
0
26597
2009-02-04
1
[2]
[3]
[4]
[5]
[6]
[7]
[8]
[9]
[10]
제목
내용
제목+내용
작성자