풀다운 메뉴 소스 좀 봐주세요.. 마우스 아웃시 하위메뉴가 안 사라져서요.. 정보
풀다운 메뉴 소스 좀 봐주세요.. 마우스 아웃시 하위메뉴가 안 사라져서요..
본문
phpschool에 옥휘님께서 만드신 풀다운 메뉴 인데요.
쓸려고 좀 고쳐놓고 보니 불편한 점이 있어서요..
메뉴에 마우스 올리면 하위메뉴가 나타나는데
하위메뉴가 마우스 아웃시에도 사라지지 않고 계속 남아 있네요..
마우스 아웃시 하위메뉴 사라지게끔 소스를 좀 고치고 싶습니다.
일단 제 생각엔
function m_over(m) --> 이 부분을 수정해서
function m_out(m) 라는 function을 만들어서
하위메뉴 div에 onmouseout 을 걸어주면 될 듯합니다만..
그게 잘 안되네요. 고수님들 도움 좀..
아래는 풀다운 소스입니다.
<script>
//제작 : PHPschool 옥휘님
var delay = 3; // 메뉴 스피드(낮을수록 빠름)
var m_length = 30; // 메뉴 간격
var sel_l_length = 30; // 선택한 메뉴와 이전 메뉴 간격
var sel_r_length = 60; // 선택한 메뉴와 다음 메뉴 간격
var m_sel = 0; // 메뉴 선택 상태
var m_max = 0; // 메인메뉴 갯수
var sm_alpha = 0; // 서브메뉴 투명도
var id = new Array(); // 메인메뉴 ID
var sid = new Array(); // 서브메뉴 ID
var m_top = 0; // 메인메뉴 y 위치
function on_load(){
while(document.getElementById("menu"+(m_max+1)) != null){
m_max++;
id[m_max] = document.getElementById("menu"+m_max);
sid[m_max] = document.getElementById("smenu"+m_max);
};
m_top = id[1].offsetTop;
m_act();
}
function m_over(m){
m_sel = m;
for(i=1;i<=m_max;i++){
if(sid[i] != null){
if(m_sel == i){
//id[i].style.fontWeight = 'bold';
id[i].style.fontWeight = 'normal';
sid[i].style.display = "";
sm_alpha = 0;
if ((navigator.appName.indexOf('Microsoft')+1)) {
sid[i].filters.alpha.opacity = sm_alpha;
}else{
sid[i].style.opacity = (sm_alpha/100);
}
sid[i].style.top = id[i].offsetTop + id[i].offsetHeight + 40;
}else{
id[i].style.fontWeight = '';
sid[i].style.display = "none";
}
}
}
}
function m_act(){
var goy = 0;
for(i=1;i<=m_max;i++){
// 메인메뉴 좌우 이동
if(i>1)
temp = id[i-1].offsetWidth + id[i-1].offsetLeft;
if(i==1){
gox=id[i].offsetLeft;
}else if(m_sel == i){
gox = temp + sel_l_length;
}else if(m_sel+1 == i){
gox =temp + sel_r_length;
}else{
gox = temp + m_length;
}
id[i].style.left = Math.ceil(id[i].offsetLeft - (id[i].offsetLeft - (gox))/delay)+"px";
// 메인메뉴 상하 이동
if(m_sel == i){
id[i].style.top = Math.ceil(id[i].offsetTop - (id[i].offsetTop - (m_top + 7))/delay)+"px";
}else if(m_sel!=0){
id[i].style.top = Math.ceil(id[i].offsetTop - (id[i].offsetTop - (m_top - 5))/delay)+"px";
}
// 서브메뉴
if(m_sel == i && sid[i] != null){
// 서브메뉴 투명도
if(sm_alpha < 100){
sm_alpha += 5;
if ((navigator.appName.indexOf('Microsoft')+1)) {
sid[i].filters.alpha.opacity = sm_alpha;
}else{
sid[i].style.opacity = (sm_alpha/100);
}
}
// 서브메뉴 아래서부터 위로 나타남
goy = id[i].offsetTop + id[i].offsetHeight;
sid[i].style.top = (sid[i].offsetTop - (sid[i].offsetTop - goy)/delay)+"px";
}
}
setTimeout('m_act()',20);
}
</script>
<style>
.sm_a{color: #666666; text-decoration:none; padding:0px 3px 0px 2px}
.sm_a:hover {color: #FFFFFF; text-decoration:none; background:#666666; padding:0px 3px 0px 2px}
.smenu{top:60px; position:absolute; filter:alpha(opacity=0); color:#DDDDDD;font-size:12px;}
.mmenu{top:20px; position:absolute; cursor:pointer; padding-right:2px; color:#666666;font-size:13px;}
</style>
<body onload='on_load()'>
<table width=900 style='position:relative' align=center><td>
<div class=mmenu style='left:200px;' id=menu1 onMouseOver='m_over(1)'>
ABOUT US<br>
</div>
<div id='smenu1' class=smenu style='left:200px; display:none'><a href='' class=sm_a>menu1</a><BR> <a href='' class=sm_a>menu2</a><BR> <a href='' class=sm_a>menu3</a></div>
<div class=mmenu style='left:300px;' id=menu2 onMouseOver='m_over(2)'>
PRODUCT<br>
</div>
<div id='smenu2' class=smenu style='left:300px; display:none'><a href='' class=sm_a>menu4</a><BR> <a href='' class=sm_a>menu5</a><BR> <a href='' class=sm_a>menu6</a></div>
<div class=mmenu style='left:400px;' id=menu3 onMouseOver='m_over(3)'>
STORY<br>
</div>
<div id='smenu3' class=smenu style='left:400px; display:none'><a href='' class=sm_a>menu7</a><BR> <a href='' class=sm_a>menu8</a><BR> <a href='' class=sm_a>menu9</a></div>
</td></table>
쓸려고 좀 고쳐놓고 보니 불편한 점이 있어서요..
메뉴에 마우스 올리면 하위메뉴가 나타나는데
하위메뉴가 마우스 아웃시에도 사라지지 않고 계속 남아 있네요..
마우스 아웃시 하위메뉴 사라지게끔 소스를 좀 고치고 싶습니다.
일단 제 생각엔
function m_over(m) --> 이 부분을 수정해서
function m_out(m) 라는 function을 만들어서
하위메뉴 div에 onmouseout 을 걸어주면 될 듯합니다만..
그게 잘 안되네요. 고수님들 도움 좀..
아래는 풀다운 소스입니다.
<script>
//제작 : PHPschool 옥휘님
var delay = 3; // 메뉴 스피드(낮을수록 빠름)
var m_length = 30; // 메뉴 간격
var sel_l_length = 30; // 선택한 메뉴와 이전 메뉴 간격
var sel_r_length = 60; // 선택한 메뉴와 다음 메뉴 간격
var m_sel = 0; // 메뉴 선택 상태
var m_max = 0; // 메인메뉴 갯수
var sm_alpha = 0; // 서브메뉴 투명도
var id = new Array(); // 메인메뉴 ID
var sid = new Array(); // 서브메뉴 ID
var m_top = 0; // 메인메뉴 y 위치
function on_load(){
while(document.getElementById("menu"+(m_max+1)) != null){
m_max++;
id[m_max] = document.getElementById("menu"+m_max);
sid[m_max] = document.getElementById("smenu"+m_max);
};
m_top = id[1].offsetTop;
m_act();
}
function m_over(m){
m_sel = m;
for(i=1;i<=m_max;i++){
if(sid[i] != null){
if(m_sel == i){
//id[i].style.fontWeight = 'bold';
id[i].style.fontWeight = 'normal';
sid[i].style.display = "";
sm_alpha = 0;
if ((navigator.appName.indexOf('Microsoft')+1)) {
sid[i].filters.alpha.opacity = sm_alpha;
}else{
sid[i].style.opacity = (sm_alpha/100);
}
sid[i].style.top = id[i].offsetTop + id[i].offsetHeight + 40;
}else{
id[i].style.fontWeight = '';
sid[i].style.display = "none";
}
}
}
}
function m_act(){
var goy = 0;
for(i=1;i<=m_max;i++){
// 메인메뉴 좌우 이동
if(i>1)
temp = id[i-1].offsetWidth + id[i-1].offsetLeft;
if(i==1){
gox=id[i].offsetLeft;
}else if(m_sel == i){
gox = temp + sel_l_length;
}else if(m_sel+1 == i){
gox =temp + sel_r_length;
}else{
gox = temp + m_length;
}
id[i].style.left = Math.ceil(id[i].offsetLeft - (id[i].offsetLeft - (gox))/delay)+"px";
// 메인메뉴 상하 이동
if(m_sel == i){
id[i].style.top = Math.ceil(id[i].offsetTop - (id[i].offsetTop - (m_top + 7))/delay)+"px";
}else if(m_sel!=0){
id[i].style.top = Math.ceil(id[i].offsetTop - (id[i].offsetTop - (m_top - 5))/delay)+"px";
}
// 서브메뉴
if(m_sel == i && sid[i] != null){
// 서브메뉴 투명도
if(sm_alpha < 100){
sm_alpha += 5;
if ((navigator.appName.indexOf('Microsoft')+1)) {
sid[i].filters.alpha.opacity = sm_alpha;
}else{
sid[i].style.opacity = (sm_alpha/100);
}
}
// 서브메뉴 아래서부터 위로 나타남
goy = id[i].offsetTop + id[i].offsetHeight;
sid[i].style.top = (sid[i].offsetTop - (sid[i].offsetTop - goy)/delay)+"px";
}
}
setTimeout('m_act()',20);
}
</script>
<style>
.sm_a{color: #666666; text-decoration:none; padding:0px 3px 0px 2px}
.sm_a:hover {color: #FFFFFF; text-decoration:none; background:#666666; padding:0px 3px 0px 2px}
.smenu{top:60px; position:absolute; filter:alpha(opacity=0); color:#DDDDDD;font-size:12px;}
.mmenu{top:20px; position:absolute; cursor:pointer; padding-right:2px; color:#666666;font-size:13px;}
</style>
<body onload='on_load()'>
<table width=900 style='position:relative' align=center><td>
<div class=mmenu style='left:200px;' id=menu1 onMouseOver='m_over(1)'>
ABOUT US<br>
</div>
<div id='smenu1' class=smenu style='left:200px; display:none'><a href='' class=sm_a>menu1</a><BR> <a href='' class=sm_a>menu2</a><BR> <a href='' class=sm_a>menu3</a></div>
<div class=mmenu style='left:300px;' id=menu2 onMouseOver='m_over(2)'>
PRODUCT<br>
</div>
<div id='smenu2' class=smenu style='left:300px; display:none'><a href='' class=sm_a>menu4</a><BR> <a href='' class=sm_a>menu5</a><BR> <a href='' class=sm_a>menu6</a></div>
<div class=mmenu style='left:400px;' id=menu3 onMouseOver='m_over(3)'>
STORY<br>
</div>
<div id='smenu3' class=smenu style='left:400px; display:none'><a href='' class=sm_a>menu7</a><BR> <a href='' class=sm_a>menu8</a><BR> <a href='' class=sm_a>menu9</a></div>
</td></table>
댓글 전체
<div class=mmenu style='display:none;' id=menu9></div>
추가 후 아웃할 곳에 추가 하면 땡.
onMouseOut='m_over(9)'
추가 후 아웃할 곳에 추가 하면 땡.
onMouseOut='m_over(9)'
답변 감사해요..
해봤는데요.. 그렇게 하니깐
메인메뉴에서 마우스가 하위메뉴로 가는 순간
떠 있는 하위메뉴가 사라져 버립니다.
하위메뉴에서 마우스아웃시 사라져야 하는데요..
좀 더 고쳐보겠습니다. 감사감사
해봤는데요.. 그렇게 하니깐
메인메뉴에서 마우스가 하위메뉴로 가는 순간
떠 있는 하위메뉴가 사라져 버립니다.
하위메뉴에서 마우스아웃시 사라져야 하는데요..
좀 더 고쳐보겠습니다. 감사감사
해결했습니다.
스크립트에서 서브메뉴 부분에 아래 부분을 추가하니 잘 됩니다.
// 서브메뉴
if(m_sel == i && sid[i] != null){
//////////////////// 서브메뉴 마우스아웃시 사라지게 추가된 부분 ////////////////////////
sid[i].mmenu = sid[i];
sid[i].onmouseover = new Function("this.mmenu.style.display='block'");
sid[i].onmouseout = new Function("this.mmenu.style.display='none'");
///////////////////////////////////////////////////// /////////////////////////////////
// 서브메뉴 투명도
if(sm_alpha < 100){
sm_alpha += 5;
if ((navigator.appName.indexOf('Microsoft')+1)) {
sid[i].filters.alpha.opacity = sm_alpha;
}else{
sid[i].style.opacity = (sm_alpha/100);
}
}
// 서브메뉴 아래서부터 위로 나타남
goy = id[i].offsetTop + id[i].offsetHeight;
sid[i].style.top = (sid[i].offsetTop - (sid[i].offsetTop - goy)/delay)+"px";
}
}
setTimeout('m_act()',20);
}
스크립트에서 서브메뉴 부분에 아래 부분을 추가하니 잘 됩니다.
// 서브메뉴
if(m_sel == i && sid[i] != null){
//////////////////// 서브메뉴 마우스아웃시 사라지게 추가된 부분 ////////////////////////
sid[i].mmenu = sid[i];
sid[i].onmouseover = new Function("this.mmenu.style.display='block'");
sid[i].onmouseout = new Function("this.mmenu.style.display='none'");
///////////////////////////////////////////////////// /////////////////////////////////
// 서브메뉴 투명도
if(sm_alpha < 100){
sm_alpha += 5;
if ((navigator.appName.indexOf('Microsoft')+1)) {
sid[i].filters.alpha.opacity = sm_alpha;
}else{
sid[i].style.opacity = (sm_alpha/100);
}
}
// 서브메뉴 아래서부터 위로 나타남
goy = id[i].offsetTop + id[i].offsetHeight;
sid[i].style.top = (sid[i].offsetTop - (sid[i].offsetTop - goy)/delay)+"px";
}
}
setTimeout('m_act()',20);
}