테스트 사이트 - 개발 중인 베타 버전입니다
SIR

메뉴바 - 이런걸 원하시는건가??

빨간망사챠챠
프로필 보기이 회원 글보기
 · 13년 전 · 2260 · 1
<!DOCTYPE html> 
<html> 
<head> 
<title>메뉴예제</title> 
<!-- 메뉴 롤오버 스크립트 --> 
<script type="text/javascript"> 
function menu_over(a) { 
var preName = 'menu';
var subName = 'sub';
for(var i = 1 ; i < 9 ; i++){
    getObject(preName + i).className = 'menu_level_1' + (i == parseInt(a) ? '_over' : '');
    getObject(preName + i + subName).className = 'menu_level_2' + (i == parseInt(a) ? '_over' : '');
}
} 
function getObject(objName){
    return document.getElementById(objName);
}
<!-- // 메뉴 롤오버 스크립트 --> 
</script> 
<style> 
@font-face {font-family:NanumGothic; src:url(img/NanumGothic.eot);} 

body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0} 
body,input,textarea,select,button,table{font-family:'돋움',Dotum,AppleGothic,sans-serif;font-size:12px} 
img,fieldset{border:0} 
ul,ol{list-style:none} 
em,address{font-style:normal} 
a{text-decoration:none} 
a:hover,a:active,a:focus{text-decoration:underline} 




.lnb1 {margin:0 auto; 
background:#1F68CA; border:1px solid #1F68CA; width:1000px; height:35px; text-align:left; border-radius: 5px 5px 0 0; 
background:#850909 -webkit-gradient(linear, 0% 0%, 0% 100%,from(#5DA0FA), to(#1F68CA)); 
background:#850909 -moz-linear-gradient(top, #5DA0FA, #1F68CA); 
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#5DA0FA,endColorStr=#1F68CA); 
} 
.lnb2{margin:0 auto; background:#efefef; border:1px solid #cccccc; width:1000px; height:33px; text-align:left; border-radius: 0 0 5px 5px;} 
.menu_level_1 {color:white; font-family:NanumGothic; Font-weight:500; float:left; padding:10px 15px 0 15px; cursor:pointer;} 
.menu_level_1_over {color:black; font-family:NanumGothic; Font-weight:500; float:left; background:white; border-radius: 5px 5px 0 0; margin:5px 5px 0 5px; padding:10px 15px 7px 15px; cursor:pointer;} 
.menu_level_2 {display:none;} 
.menu_level_2_over {display:block;} 
.menu_level_2_over div {cursor:pointer; padding:10px; font-family:NanumGothic; padding:10px; cursor:pointer; float:left;} 
.menu_level_2_over div:hover {display:block; Font-weight:bold; cursor:pointer;} 
</style> 
</head> 
<body> 
<br /> 
<br /> 
<br /> 
<div class="lnb1" style="clear:both;"> 
<div id="menu1" class="menu_level_1_over" onmouseover="menu_over('1')">Menu1</div> 
<div id="menu2" class="menu_level_1" onmouseover="menu_over('2')">메뉴2</div> 
<div id="menu3" class="menu_level_1" onmouseover="menu_over('3')">메뉴3</div> 
<div id="menu4" class="menu_level_1" onmouseover="menu_over('4')">메뉴4</div> 
<div id="menu5" class="menu_level_1" onmouseover="menu_over('5')">메뉴5</div> 
<div id="menu6" class="menu_level_1" onmouseover="menu_over('6')">메뉴6</div> 
<div id="menu7" class="menu_level_1" onmouseover="menu_over('7')">메뉴7</div> 
<div id="menu8" class="menu_level_1" onmouseover="menu_over('8')">메뉴8</div> 
</div> 
<div class="lnb2" style="clear:both;"> 
<div id="menu1sub" class="menu_level_2_over"> 
<div>메뉴1_서브메뉴1</div> 
<div>서브메뉴2</div> 
<div>서브메뉴3</div> 
<div>서브메뉴4</div> 
<div>서브메뉴5</div> 
<div>서브메뉴6</div> 
<div>서브메뉴7</div> 
<div>서브메뉴8</div> 
</div> 
<div id="menu2sub" class="menu_level_2"> 
<div>메뉴2_서브메뉴1</div> 
<div>서브메뉴2</div> 
<div>서브메뉴3</div> 
<div>서브메뉴4</div> 
<div>서브메뉴5</div> 
<div>서브메뉴6</div> 
<div>서브메뉴7</div> 
<div>서브메뉴8</div> 
</div> 
<div id="menu3sub" class="menu_level_2"> 
<div>메뉴3_서브메뉴1</div> 
<div>서브메뉴2</div> 
<div>서브메뉴3</div> 
<div>서브메뉴4</div> 
<div>서브메뉴5</div> 
<div>서브메뉴6</div> 
<div>서브메뉴7</div> 
<div>서브메뉴8</div> 
</div> 
<div id="menu4sub" class="menu_level_2"> 
<div>메뉴4_서브메뉴1</div> 
<div>서브메뉴2</div> 
<div>서브메뉴3</div> 
<div>서브메뉴4</div> 
<div>서브메뉴5</div> 
<div>서브메뉴6</div> 
<div>서브메뉴7</div> 
<div>서브메뉴8</div> 
</div> 
<div id="menu5sub" class="menu_level_2"> 
<div>메뉴5_서브메뉴1</div> 
<div>서브메뉴2</div> 
<div>서브메뉴3</div> 
<div>서브메뉴4</div> 
<div>서브메뉴5</div> 
<div>서브메뉴6</div> 
<div>서브메뉴7</div> 
<div>서브메뉴8</div>
목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 1개

soon5657
프로필 보기이 회원 글보기
 13년 전
ㅎㅎ감사합니다

게시글 목록

번호 제목
12307
JavaScript 테이블 각 row 마우스오버시 색깔바꾸기 입니다.
12306
JavaScript png 24비트 투명처리하기 입니다.
12305
JavaScript full-down메뉴 자바스크립트 입니다.
12304
JavaScript iframe사용시 높이 자동 조정하기 입니다.
12303
JavaScript 계산기
12302
JavaScript 숫자를 한글로 변환하기 입니다.
12301
JavaScript 아이프레임 자동으로 늘어나는 자바 스크립트 입니다.
12300
JavaScript 끊기지 않는 배너 롤링 입니다.
12299
기타 랜섬에 당한 화일 복구
12298
JavaScript id값 변수명으로 치환 예제 자바스크립트 입니다.
12297
JavaScript 상태바의 링크 주소 감추기 입니다.
12296
JavaScript 가짜 카운터 달기 입니다.
12295
JavaScript 홈에 머문시간을 제목표시줄과 상태바에 실시간으로 알려주기 입니다.
12294
JavaScript prompt 와 alert 응용 자바스크립트 예제 입니다.
12293
JavaScript prompt 와 alert 간단한 자바스크립트 예제 입니다.
12292
jQuery 간단한 탭 제이쿼리
12291
jQuery 간단한 셀렉트 드롭다운 제이쿼리
12290
JavaScript 문서내 이미지갯수 출력하기 입니다.
12289
JavaScript 내용 복사해서 붙어넣기 하면 출처 따라오는 자바스크립트입니다.
12288
JavaScript 팝업창 지정한 시간대에 예약 열기 입니다.
12287
JavaScript 접속때마다 음악 다르게 나오기 입니다.
12286
JavaScript 자동 스크롤 메뉴 관련 입니다.
12285
JavaScript 이 브라우저로 몇페이지나 보았나 확인하기 입니다.
12284
JavaScript 사용자 브라우저의 펄러그인 목록 출력하기 입니다.
12283
JavaScript 상태표시줄 제어 + 간단한 복사 제어 하기 입니다.
이전 다음
전체 목록