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

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

빨간망사챠챠
프로필 보기이 회원 글보기
 · 13년 전 · 2264 · 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년 전
ㅎㅎ감사합니다

게시글 목록

번호 제목
12487
PHP pc 모바일 체크
12486
PHP 계정 사용량(용량) 확인
380
Html, script 등 기초부터 배우실 분에게 유용한
12484
PHP textarea 입력한 엔터값 출력하기 1
12483
MySQL 소수점 반올림 버림
376
제가 아는 무료 이미지 사이트 모음 3
12482
jQuery jQuery version 1.9 이상에서 $.browser 사용하기
12481
PHP 에러 로그파일 생성하기
12479
PHP 간단한 특정 IP 차단하기 입니다. 1
12478
PHP 다른 사이트의 내용을 자동으로 긁어오기 입니다.
12477
PHP 후이즈검색 하기 입니다.
12476
PHP 그래프 그리기 입니다.
12475
JavaScript 자바스크립트로 구현한 number_format() 입니다.
12474
JavaScript 금액 관련 숫자를 한글로 변환하기 입니다.
12473
PHP PHP 날짜 계산 관련 함수
12472
jQuery jQuery 1.x와 2.x 버전 동시에 사용하기
12471
PHP 요일, 시간마다 다른 CSS 제어하기 입니다.
12470
PHP iframe내의 id셀렉터 입니다.
12469
JavaScript 사업자 등록번호 검사하기 입니다.
371
웹디자인할때 유용한 색상조합 4
12468
PHP 폼전송을 통해서 페이지를 이동하기 입니다.
12467
JavaScript 항상 같은곳에 광고창 만들기 입니다.
12466
JavaScript 부메뉴 나오게 하기 입니다.
12465
JavaScript 특정문자 제거하기 입니다.
12464
JavaScript 휴대폰번호 검사 하기 입니다.
이전 다음
전체 목록