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

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

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

게시글 목록

번호 제목
9992
Mobile 모바일 홈페이지는 일반 홈페이지랑 개발과정이 틀린가요? 2
9989
Linux php프로그래머가 알아야할 리눅스서버지식? 2
9987
jQuery 슬라이드?탭? 효과 입니다~ 간단하고 신기해서 올려봅니다~ 1
9986
jQuery 네이버에 "실시간 급상승 검색어" 효과를 따라하고 싶습니다.
9965
MySQL Lost connection to MySQL server at 'reading initial communication packet', system error: 110 20
9963
Flash 플레시 메뉴 만들기중 질문드립니다. 1
9961
PHP 현재 도메인에서 외부 도메인에있는 이미지를 링크시 트래픽 발생은? 1
9953
PHP PHP함수의 대한질문 - 초보자을 위해 도아줍쇼 - 7
9951
PHP 효과에 대한 질문입니다. 1
9949
Flash 플래시 플레이어가 안나오네요! 1
9948
Linux mod_ssl 설치 문제
9943
PHP 쇼핑몰 php 파일이 암호화 되어 있어서 링크 수정이 안되는데 도와주세요 4
9942
PHP 'php -> win32 로 메세지를 전송할 수 있는가?
19907
HTML 이미지 게시판 질문드려요
9940
JavaScript 메뉴바 도움 부탁드립니다. 1
9937
PHP 게시판 카테고리에 선택 후 Bold체 혹은 칼라변경 하려는데요 2
9935
기타 이미지 EXIF 정보란 무엇인가요? 1
9931
JavaScript 모바일 홈페이지 연동소스들중에 베가레이스2 기종이 연동이 안된다고 하는데 3
9930
기타 혹시 이러한 주소 형태를 가지는 CMS 아시나요?
9927
JavaScript 네이버 나눔글꼴 적용 좀 봐 주세요 2
9924
MySQL 중복제거 쿼리문좀 간절히 부탁드립니다^^ 2
9922
기타 sko 파일은 뭔가요? 1
19906
HTML 모바일 퍼스트와 반응형 웹
9918
MySQL 정중히 문제해결 도움 요청합니다 3
19903
HTML 프레임 문의 드려요 ^^;; 2
이전 다음
전체 목록