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

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

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

게시글 목록

번호 제목
384
알고있으면 유용한 무료 디자인소스 사이트
12508
JavaScript 서버시간 알아내기
383
css 템플릿 사이트
381
모바일 ui 사이트 1
20395
기타 swip 사용 안하고, touchstart, touchmove 사용하여 슬라이드 구현
12507
PHP 숫자를 한글표기로 바꾸기 입니다.
12506
Mobile Android,IOS 앱용 아이콘 템플릿 참고 사이트
12505
PHP 여러문장을 한번에 자동 줄바꿈 하기 입니다.
12504
웹서버 서버 동시접속자 설정 변경하기
12503
PHP 디렉토리의 모든 파일을 읽어 목록으로 만들기 입니다.
12502
PHP PHP 버전이 낮아 imagerotate() 함수가 없을때 대신 사용하는 함수
12500
PHP 간단하게 자동으로 테이블 너비 조정하기 입니다. 1
12499
PHP 문자열자르기 (문자별 다른 너비 해결)
12498
MySQL 테이블 복사 쿼리
20392
기타 많이들 사용하시는 Slider 에 대해서... 2
12497
PHP 현재 접속중인 사용자 나타내기
12496
MySQL mysql select 후 update 하기
12495
PHP 다른 페이지로 이동하는 방법 3가지 입니다.
12494
PHP 한글문자열 자르는 법 입니다.
12493
PHP mysql_query 전체 갯수 빨리 알아보기 입니다.
12492
PHP POST값 통째로 인코딩하기, 배열, iconv
12491
PHP 이메일주소 검사하기 입니다.
12490
웹서버 php 확장자 내 맘대로 바꾸기 입니다.
12489
PHP 문자열을 한 문자씩 나누어 출력하기 입니다.
12488
node.js Node js 게시판 프로젝트 소개합니다.
다음
전체 목록