메뉴바 도움 부탁드립니다.
메뉴에서 서브메뉴를 누르면 상단메뉴 그라이데이션이 유지 되지 않습니다.
'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 관게 없음...
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 6030 | 12년 전 | 2821 | ||
| 6029 | 12년 전 | 2849 | ||
| 6028 | 12년 전 | 1475 | ||
| 6027 | 12년 전 | 889 | ||
| 6026 |
kiplayer
|
12년 전 | 800 | |
| 6025 | 12년 전 | 586 | ||
| 6024 | 12년 전 | 2808 | ||
| 6023 | 12년 전 | 2947 | ||
| 6022 |
 울랄라커뮤니케이션스 |
12년 전 | 2102 | |
| 6021 |
Holyreign
|
12년 전 | 1335 | |
| 6020 | 12년 전 | 785 | ||
| 6019 | 12년 전 | 2862 | ||
| 6018 | 12년 전 | 3189 | ||
| 6017 | 12년 전 | 1236 | ||
| 6016 |
kiplayer
|
12년 전 | 10566 | |
| 6015 |
itlang
|
12년 전 | 1415 | |
| 6014 | 12년 전 | 424 | ||
| 6013 |
senseme
|
12년 전 | 1361 | |
| 6012 | 12년 전 | 3109 | ||
| 6011 | 12년 전 | 7121 | ||
| 6010 | 12년 전 | 8959 | ||
| 6009 | 12년 전 | 2863 | ||
| 6008 | 12년 전 | 2989 | ||
| 6007 | 12년 전 | 6670 | ||
| 6006 | 12년 전 | 10513 | ||
| 6005 | 12년 전 | 4046 | ||
| 6004 |
 byfun |
12년 전 | 576 | |
| 6003 | 12년 전 | 881 | ||
| 6002 | 12년 전 | 2352 | ||
| 6001 | 12년 전 | 685 | ||
| 6000 |
kiplayer
|
12년 전 | 3735 | |
| 5999 | 12년 전 | 428 | ||
| 5998 |
울랄라커뮤니케이션스 |
12년 전 | 2940 | |
| 5997 |
울랄라커뮤니케이션스 |
12년 전 | 3435 | |
| 5996 | 12년 전 | 2094 | ||
| 5995 |
kiplayer
|
12년 전 | 2167 | |
| 5994 |
울랄라커뮤니케이션스 |
12년 전 | 3263 | |
| 5993 |
windowhan
|
12년 전 | 675 | |
| 5992 | 12년 전 | 2898 | ||
| 5991 | 12년 전 | 5226 | ||
| 5990 | 12년 전 | 1637 | ||
| 5989 |
AMDbest
|
12년 전 | 1344 | |
| 5988 | 12년 전 | 1210 | ||
| 5987 |
kiplayer
|
12년 전 | 1135 | |
| 5986 |
한번잘해보자
|
12년 전 | 924 | |
| 5985 |
kiplayer
|
12년 전 | 3137 | |
| 5984 |
dsv421
|
12년 전 | 802 | |
| 5983 |
dsv421
|
12년 전 | 1507 | |
| 5982 |
dsv421
|
12년 전 | 5835 | |
| 5981 | 12년 전 | 3210 | ||
| 5980 |
MFBob
|
12년 전 | 2611 | |
| 5979 | 12년 전 | 3096 | ||
| 5978 |
AMDbest
|
12년 전 | 1460 | |
| 5977 | 12년 전 | 785 | ||
| 5976 | 12년 전 | 1202 | ||
| 5975 | 12년 전 | 1264 | ||
| 5974 | 12년 전 | 607 | ||
| 5973 |
kiplayer
|
12년 전 | 3539 | |
| 5972 |
kiplayer
|
12년 전 | 3962 | |
| 5971 |
kiplayer
|
12년 전 | 2292 | |
| 5970 |
kiplayer
|
12년 전 | 8288 | |
| 5969 |
kiplayer
|
12년 전 | 944 | |
| 5968 | 12년 전 | 8737 | ||
| 5967 |
 돼지코구뇽 |
12년 전 | 16899 | |
| 5966 | 12년 전 | 1223 | ||
| 5965 | 12년 전 | 701 | ||
| 5964 | 12년 전 | 6242 | ||
| 5963 | 12년 전 | 694 | ||
| 5962 | 12년 전 | 882 | ||
| 5961 | 12년 전 | 634 | ||
| 5960 | 12년 전 | 781 | ||
| 5959 |
 AKASIA |
12년 전 | 1123 | |
| 5958 | 12년 전 | 976 | ||
| 5957 |
웹디자인되고파
|
12년 전 | 1082 | |
| 5956 | 12년 전 | 3653 | ||
| 5955 | 12년 전 | 2133 | ||
| 5954 | 12년 전 | 4383 | ||
| 5953 | 12년 전 | 3071 | ||
| 5952 | 12년 전 | 4259 | ||
| 5951 | 12년 전 | 2069 | ||
| 5950 | 12년 전 | 1271 | ||
| 5949 | 12년 전 | 923 | ||
| 5948 | 12년 전 | 2070 | ||
| 5947 | 12년 전 | 4997 | ||
| 5946 |
dsv421
|
12년 전 | 1269 | |
| 5945 |
dsv421
|
12년 전 | 4114 | |
| 5944 |
dsv421
|
12년 전 | 5636 | |
| 5943 | 12년 전 | 1271 | ||
| 5942 | 12년 전 | 2532 | ||
| 5941 |
프로프리랜서
|
12년 전 | 1638 | |
| 5940 |
atria
|
12년 전 | 605 | |
| 5939 | 12년 전 | 2322 | ||
| 5938 | 12년 전 | 2069 | ||
| 5937 |
프로프리랜서
|
12년 전 | 759 | |
| 5936 |
프로프리랜서
|
12년 전 | 710 | |
| 5935 |
프로프리랜서
|
12년 전 | 3204 | |
| 5934 |
프로프리랜서
|
12년 전 | 1620 | |
| 5933 |
AMDbest
|
12년 전 | 637 | |
| 5932 |
AMDbest
|
12년 전 | 497 | |
| 5931 | 12년 전 | 8136 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기