메뉴바 도움 부탁드립니다.
메뉴에서 서브메뉴를 누르면 상단메뉴 그라이데이션이 유지 되지 않습니다.
'menu_level_1_over'게 계속 유지가 되어야 하는데 'menu_level_1로 넘어가 버립니다.
꼭 도움 부탁드립니다.
<!DOCTYPE html>
<html>
<head>
<title>메뉴예제</title>
<!-- 메뉴 롤오버 스크립트 -->
<script type="text/javascript">
function menu_over(a) {
var b = a+'sub'
if(document.getElementById(a).className == 'menu_level_1') {
document.getElementById('menu1').className = 'menu_level_1';
document.getElementById('menu2').className = 'menu_level_1';
document.getElementById('menu3').className = 'menu_level_1';
document.getElementById('menu4').className = 'menu_level_1';
document.getElementById('menu5').className = 'menu_level_1';
document.getElementById('menu6').className = 'menu_level_1';
document.getElementById('menu7').className = 'menu_level_1';
document.getElementById('menu8').className = 'menu_level_1';
document.getElementById(a).className = 'menu_level_1_over';
document.getElementById('menu1sub').className = 'menu_level_2';
document.getElementById('menu2sub').className = 'menu_level_2';
document.getElementById('menu3sub').className = 'menu_level_2';
document.getElementById('menu4sub').className = 'menu_level_2';
document.getElementById('menu5sub').className = 'menu_level_2';
document.getElementById('menu6sub').className = 'menu_level_2';
document.getElementById('menu7sub').className = 'menu_level_2';
document.getElementById('menu8sub').className = 'menu_level_2';
document.getElementById(b).className = 'menu_level_2_over';
}
}
<!-- // 메뉴 롤오버 스크립트 -->
</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('menu1')">Menu1</div>
<div id="menu2" class="menu_level_1" onmouseover="menu_over('menu2')"메뉴2</div>
<div id="menu3" class="menu_level_1" onmouseover="menu_over('menu3')">메뉴3</div>
<div id="menu4" class="menu_level_1" onmouseover="menu_over('menu4')">메뉴4</div>
<div id="menu5" class="menu_level_1" onmouseover="menu_over('menu5')">메뉴5</div>
<div id="menu6" class="menu_level_1" onmouseover="menu_over('menu6')">메뉴6</div>
<div id="menu7" class="menu_level_1" onmouseover="menu_over('menu7')">메뉴7</div>
<div id="menu8" class="menu_level_1" onmouseover="menu_over('menu8')">메뉴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>
'menu_level_1_over'게 계속 유지가 되어야 하는데 'menu_level_1로 넘어가 버립니다.
꼭 도움 부탁드립니다.
<!DOCTYPE html>
<html>
<head>
<title>메뉴예제</title>
<!-- 메뉴 롤오버 스크립트 -->
<script type="text/javascript">
function menu_over(a) {
var b = a+'sub'
if(document.getElementById(a).className == 'menu_level_1') {
document.getElementById('menu1').className = 'menu_level_1';
document.getElementById('menu2').className = 'menu_level_1';
document.getElementById('menu3').className = 'menu_level_1';
document.getElementById('menu4').className = 'menu_level_1';
document.getElementById('menu5').className = 'menu_level_1';
document.getElementById('menu6').className = 'menu_level_1';
document.getElementById('menu7').className = 'menu_level_1';
document.getElementById('menu8').className = 'menu_level_1';
document.getElementById(a).className = 'menu_level_1_over';
document.getElementById('menu1sub').className = 'menu_level_2';
document.getElementById('menu2sub').className = 'menu_level_2';
document.getElementById('menu3sub').className = 'menu_level_2';
document.getElementById('menu4sub').className = 'menu_level_2';
document.getElementById('menu5sub').className = 'menu_level_2';
document.getElementById('menu6sub').className = 'menu_level_2';
document.getElementById('menu7sub').className = 'menu_level_2';
document.getElementById('menu8sub').className = 'menu_level_2';
document.getElementById(b).className = 'menu_level_2_over';
}
}
<!-- // 메뉴 롤오버 스크립트 -->
</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('menu1')">Menu1</div>
<div id="menu2" class="menu_level_1" onmouseover="menu_over('menu2')"메뉴2</div>
<div id="menu3" class="menu_level_1" onmouseover="menu_over('menu3')">메뉴3</div>
<div id="menu4" class="menu_level_1" onmouseover="menu_over('menu4')">메뉴4</div>
<div id="menu5" class="menu_level_1" onmouseover="menu_over('menu5')">메뉴5</div>
<div id="menu6" class="menu_level_1" onmouseover="menu_over('menu6')">메뉴6</div>
<div id="menu7" class="menu_level_1" onmouseover="menu_over('menu7')">메뉴7</div>
<div id="menu8" class="menu_level_1" onmouseover="menu_over('menu8')">메뉴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개
13년 전
function menu_over(a) {
var b = a+'sub';
if(document.getElementById(a).className == 'menu_level_1') {
document.getElementById('menu1').className = 'menu_level_1';
document.getElementById('menu2').className = 'menu_level_1';
document.getElementById('menu3').className = 'menu_level_1';
document.getElementById('menu4').className = 'menu_level_1';
document.getElementById('menu5').className = 'menu_level_1';
document.getElementById(a).className = 'menu_level_1_over';
document.getElementById('menu1sub').className = 'menu_level_2';
document.getElementById('menu2sub').className = 'menu_level_2';
document.getElementById('menu3sub').className = 'menu_level_2';
document.getElementById('menu4sub').className = 'menu_level_2';
document.getElementById('menu5sub').className = 'menu_level_2';
document.getElementById(b).className = 'menu_level_2_over';
}
}
메뉴생성이 안되어 잇는 부분은 삭제 하시고...
하면 정상작동 됩니다. 원하시는 것이 이것인가요.....
class="menu_level_2" ==>1,2 관게 없음...
var b = a+'sub';
if(document.getElementById(a).className == 'menu_level_1') {
document.getElementById('menu1').className = 'menu_level_1';
document.getElementById('menu2').className = 'menu_level_1';
document.getElementById('menu3').className = 'menu_level_1';
document.getElementById('menu4').className = 'menu_level_1';
document.getElementById('menu5').className = 'menu_level_1';
document.getElementById(a).className = 'menu_level_1_over';
document.getElementById('menu1sub').className = 'menu_level_2';
document.getElementById('menu2sub').className = 'menu_level_2';
document.getElementById('menu3sub').className = 'menu_level_2';
document.getElementById('menu4sub').className = 'menu_level_2';
document.getElementById('menu5sub').className = 'menu_level_2';
document.getElementById(b).className = 'menu_level_2_over';
}
}
메뉴생성이 안되어 잇는 부분은 삭제 하시고...
하면 정상작동 됩니다. 원하시는 것이 이것인가요.....
class="menu_level_2" ==>1,2 관게 없음...
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 7730 | 10년 전 | 1313 | ||
| 7729 | 10년 전 | 1171 | ||
| 7728 |
잘살아보자
|
10년 전 | 614 | |
| 7727 |
잘살아보자
|
10년 전 | 510 | |
| 7726 |
잘살아보자
|
10년 전 | 841 | |
| 7725 |
잘살아보자
|
10년 전 | 567 | |
| 7724 |
잘살아보자
|
10년 전 | 483 | |
| 7723 |
잘살아보자
|
10년 전 | 548 | |
| 7722 |
잘살아보자
|
10년 전 | 487 | |
| 7721 |
잘살아보자
|
10년 전 | 518 | |
| 7720 |
잘살아보자
|
10년 전 | 483 | |
| 7719 |
비긴어게인
|
10년 전 | 701 | |
| 7718 |
 JRevirthuum |
10년 전 | 2548 | |
| 7717 |
잘살아보자
|
10년 전 | 668 | |
| 7716 |
잘살아보자
|
10년 전 | 413 | |
| 7715 |
잘살아보자
|
10년 전 | 445 | |
| 7714 |
잘살아보자
|
10년 전 | 509 | |
| 7713 | 10년 전 | 1791 | ||
| 7712 | 10년 전 | 1729 | ||
| 7711 | 10년 전 | 1115 | ||
| 7710 | 10년 전 | 1408 | ||
| 7709 | 10년 전 | 1528 | ||
| 7708 | 10년 전 | 1468 | ||
| 7707 | 10년 전 | 866 | ||
| 7706 |
별지기천사
|
10년 전 | 580 | |
| 7705 | 10년 전 | 1085 | ||
| 7704 |
ICONdesignstudio
|
10년 전 | 636 | |
| 7703 | 10년 전 | 603 | ||
| 7702 |
 foxrain |
10년 전 | 741 | |
| 7701 | 10년 전 | 1429 | ||
| 7700 | 10년 전 | 1116 | ||
| 7699 | 10년 전 | 586 | ||
| 7698 | 10년 전 | 1157 | ||
| 7697 | 10년 전 | 5180 | ||
| 7696 | 10년 전 | 671 | ||
| 7695 | 10년 전 | 1697 | ||
| 7694 | 10년 전 | 1080 | ||
| 7693 | 10년 전 | 1566 | ||
| 7692 | 10년 전 | 1311 | ||
| 7691 | 10년 전 | 836 | ||
| 7690 | 10년 전 | 1398 | ||
| 7689 | 10년 전 | 1027 | ||
| 7688 | 10년 전 | 633 | ||
| 7687 |
파랑새1597
|
10년 전 | 610 | |
| 7686 | 10년 전 | 864 | ||
| 7685 | 10년 전 | 1351 | ||
| 7684 | 10년 전 | 810 | ||
| 7683 | 10년 전 | 1118 | ||
| 7682 | 10년 전 | 1038 | ||
| 7681 | 10년 전 | 681 | ||
| 7680 | 10년 전 | 998 | ||
| 7679 | 10년 전 | 521 | ||
| 7678 | 10년 전 | 749 | ||
| 7677 | 10년 전 | 649 | ||
| 7676 |
JRevirthuum |
10년 전 | 957 | |
| 7675 |
JRevirthuum |
10년 전 | 1189 | |
| 7674 | 10년 전 | 1057 | ||
| 7673 | 10년 전 | 763 | ||
| 7672 | 10년 전 | 1103 | ||
| 7671 | 10년 전 | 914 | ||
| 7670 | 10년 전 | 680 | ||
| 7669 |
mashmellow
|
10년 전 | 1240 | |
| 7668 | 10년 전 | 729 | ||
| 7667 | 10년 전 | 1024 | ||
| 7666 |
senseme
|
10년 전 | 667 | |
| 7665 | 10년 전 | 523 | ||
| 7664 | 10년 전 | 1907 | ||
| 7663 |
mixx애교
|
10년 전 | 988 | |
| 7662 | 10년 전 | 1056 | ||
| 7661 |
hkhkah
|
10년 전 | 801 | |
| 7660 | 10년 전 | 1076 | ||
| 7659 |
커네드커네드
|
10년 전 | 944 | |
| 7658 |
바람돌이팡
|
10년 전 | 686 | |
| 7657 | 10년 전 | 1175 | ||
| 7656 | 10년 전 | 1587 | ||
| 7655 | 10년 전 | 1005 | ||
| 7654 |
개발짜증나
|
10년 전 | 867 | |
| 7653 |
네이비칼라
|
10년 전 | 888 | |
| 7652 |
밥먹고합시다
|
10년 전 | 819 | |
| 7651 |
플라이SINJI
|
10년 전 | 1520 | |
| 7650 |
개발짜증나
|
10년 전 | 1430 | |
| 7649 | 10년 전 | 460 | ||
| 7648 |
이미영ㅇㅇ
|
10년 전 | 879 | |
| 7647 | 10년 전 | 452 | ||
| 7646 | 10년 전 | 822 | ||
| 7645 | 10년 전 | 2333 | ||
| 7644 | 10년 전 | 828 | ||
| 7643 |
 돼지코구뇽 |
10년 전 | 2879 | |
| 7642 | 10년 전 | 1525 | ||
| 7641 | 10년 전 | 1149 | ||
| 7640 |
개발짜증나
|
10년 전 | 479 | |
| 7639 |
 AJFLDKVMEK |
10년 전 | 823 | |
| 7638 |
개발짜증나
|
10년 전 | 1144 | |
| 7637 | 10년 전 | 1563 | ||
| 7636 | 10년 전 | 2921 | ||
| 7635 | 10년 전 | 1711 | ||
| 7634 | 10년 전 | 1899 | ||
| 7633 | 10년 전 | 2357 | ||
| 7632 | 10년 전 | 3962 | ||
| 7631 |
JRevirthuum |
10년 전 | 1554 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기