메뉴바 도움 부탁드립니다.
메뉴에서 서브메뉴를 누르면 상단메뉴 그라이데이션이 유지 되지 않습니다.
'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 관게 없음...
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 5930 | 12년 전 | 4634 | ||
| 5929 | 12년 전 | 7830 | ||
| 5928 | 12년 전 | 779 | ||
| 5927 | 12년 전 | 1408 | ||
| 5926 | 12년 전 | 1826 | ||
| 5925 |
김준수사랑
|
12년 전 | 1237 | |
| 5924 |
 darllim |
12년 전 | 2743 | |
| 5923 | 12년 전 | 945 | ||
| 5922 | 12년 전 | 1153 | ||
| 5921 | 12년 전 | 641 | ||
| 5920 | 12년 전 | 1177 | ||
| 5919 |
 슬픈외로움 |
12년 전 | 1365 | |
| 5918 | 12년 전 | 12580 | ||
| 5917 |
프로프리랜서
|
12년 전 | 1086 | |
| 5916 |
프로프리랜서
|
12년 전 | 4610 | |
| 5915 |
프로프리랜서
|
12년 전 | 1588 | |
| 5914 |
프로프리랜서
|
12년 전 | 642 | |
| 5913 |
프로프리랜서
|
12년 전 | 926 | |
| 5912 |
프로프리랜서
|
12년 전 | 3744 | |
| 5911 |
프로프리랜서
|
12년 전 | 917 | |
| 5910 |
 돼지코구뇽 |
12년 전 | 4571 | |
| 5909 |
수야3019
|
12년 전 | 656 | |
| 5908 | 12년 전 | 824 | ||
| 5907 | 12년 전 | 1220 | ||
| 5906 | 12년 전 | 8744 | ||
| 5905 |
프로프리랜서
|
12년 전 | 1467 | |
| 5904 | 12년 전 | 2491 | ||
| 5903 | 12년 전 | 1646 | ||
| 5902 | 12년 전 | 1920 | ||
| 5901 | 12년 전 | 2002 | ||
| 5900 |
프로프리랜서
|
12년 전 | 1076 | |
| 5899 |
프로프리랜서
|
12년 전 | 1273 | |
| 5898 | 12년 전 | 17670 | ||
| 5897 | 12년 전 | 2326 | ||
| 5896 | 12년 전 | 4352 | ||
| 5895 | 12년 전 | 1679 | ||
| 5894 | 12년 전 | 2093 | ||
| 5893 |
프로프리랜서
|
12년 전 | 2150 | |
| 5892 | 12년 전 | 16035 | ||
| 5891 |
bitmaster
|
12년 전 | 1072 | |
| 5890 |
프로프리랜서
|
12년 전 | 927 | |
| 5889 |
 AKASIA |
12년 전 | 713 | |
| 5888 | 12년 전 | 1604 | ||
| 5887 |
 ppogul |
12년 전 | 3189 | |
| 5886 | 12년 전 | 3444 | ||
| 5885 | 12년 전 | 2107 | ||
| 5884 | 12년 전 | 5646 | ||
| 5883 | 12년 전 | 2805 | ||
| 5882 | 12년 전 | 6017 | ||
| 5881 | 12년 전 | 1628 | ||
| 5880 | 12년 전 | 20707 | ||
| 5879 | 12년 전 | 896 | ||
| 5878 |
나의라임토마토
|
12년 전 | 1393 | |
| 5877 | 12년 전 | 16747 | ||
| 5876 |
maniAc
|
12년 전 | 2786 | |
| 5875 | 13년 전 | 1024 | ||
| 5874 | 13년 전 | 3727 | ||
| 5873 |
lainfox
|
13년 전 | 1180 | |
| 5872 | 13년 전 | 1340 | ||
| 5871 | 13년 전 | 786 | ||
| 5870 | 13년 전 | 2525 | ||
| 5869 |
AMDbest
|
13년 전 | 1506 | |
| 5868 |
한번잘해보자
|
13년 전 | 651 | |
| 5867 |
 byfun |
13년 전 | 901 | |
| 5866 | 13년 전 | 7470 | ||
| 5865 | 13년 전 | 2398 | ||
| 5864 | 13년 전 | 931 | ||
| 5863 | 13년 전 | 1305 | ||
| 5862 | 13년 전 | 2873 | ||
| 5861 | 13년 전 | 1025 | ||
| 5860 | 13년 전 | 19327 | ||
| 5859 | 13년 전 | 2932 | ||
| 5858 | 13년 전 | 2650 | ||
| 5857 | 13년 전 | 4817 | ||
| 5856 |
ppogul |
13년 전 | 1944 | |
| 5855 | 13년 전 | 816 | ||
| 5854 | 13년 전 | 1003 | ||
| 5853 | 13년 전 | 16098 | ||
| 5852 | 13년 전 | 820 | ||
| 5851 | 13년 전 | 2219 | ||
| 5850 | 13년 전 | 1771 | ||
| 5849 |
AMDbest
|
13년 전 | 1298 | |
| 5848 |
 직화오리팡야 |
13년 전 | 1159 | |
| 5847 |
SeanLee
|
13년 전 | 1299 | |
| 5846 | 13년 전 | 23459 | ||
| 5845 | 13년 전 | 2636 | ||
| 5844 | 13년 전 | 28787 | ||
| 5843 |
 카카오툴즈 |
13년 전 | 2195 | |
| 5842 | 13년 전 | 22507 | ||
| 5841 | 13년 전 | 5736 | ||
| 5840 |
Quincy
|
13년 전 | 929 | |
| 5839 | 13년 전 | 953 | ||
| 5838 | 13년 전 | 2807 | ||
| 5837 | 13년 전 | 1083 | ||
| 5836 | 13년 전 | 2309 | ||
| 5835 | 13년 전 | 1513 | ||
| 5834 | 13년 전 | 1497 | ||
| 5833 | 13년 전 | 6668 | ||
| 5832 | 13년 전 | 5206 | ||
| 5831 | 13년 전 | 1065 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기