크롬에서 네비게이션메뉴 display:none 가 구현이 안되네요..; > 개발자팁

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

크롬에서 네비게이션메뉴 display:none 가 구현이 안되네요..; 정보

JavaScript 크롬에서 네비게이션메뉴 display:none 가 구현이 안되네요..;

본문

마우스 오버시에만 서브 메뉴가 표시되는 네비게이션인데요..

보시면 두번째 상위메뉴의 하위메뉴가 계속해서 떠 있습니다. 
다른 상위 메뉴의 하위메뉴들은 마우스 오버시에만 뜨는데요..

익스플로러에선 제 의도대로 전부 마우스 오버시에만 하위메뉴가 뜹니다.

사이트 주소구요. 네비게이션php 파일 내용은아래와 같습니다.
제가 직접 짠 것이 아니라 인터넷에서 코딩 주워와서 수정한 것이라서 
의심가는 것들을 들여다 봐도 제 실력으론 뭐가 문제인지 모르겠습니다. 제로보드랑 충돌하는 것일까요?
고수분 도와주세요.(__)


<script>
<!--


function fncClick( obj )
{
    var fm  = document.frm;
    var img = fm.menu;


    for( var i=0; i<img.length; i++ )
    {
        if( img[i] === obj )
        {
            if( img[i].src.indexOf('_on') == -1 )
            {
                img[i].src = img[i].src.replace('_off.jpg','_on.jpg');
                document.getElementById(img[i].id+'_sub').style.display = '';
            }
        }
        else
        {
            img[i].src = img[i].src.replace('_on','_off');
            document.getElementById(img[i].id+'_sub').style.display = 'none';
        }
    }
}


//-->
</script>
 
<form name='frm'>


<table width='576' cellpadding='0' cellspacing='0' border='0' align="right">
<!---- 상위 메뉴--->
    <tr>
        <td>
            <img id='menu1' name='menu' src='/myimg/mn1_off.jpg' style='cursor:hand;' onmouseover='javascript_:fncClick(this);'>
            <img id='menu2' name='menu' src='/myimg/mn2_off.jpg' style='cursor:hand;' onmouseover='javascript_:fncClick(this);'>
            <img id='menu3' name='menu' src='/myimg/mn3_off.jpg' style='cursor:hand;' onmouseover='javascript_:fncClick(this);'>
            <img id='menu4' name='menu' src='/myimg/mn4_off.jpg' style='cursor:hand;' onmouseover='javascript_:fncClick(this);'>
        </td>
    </tr>
<!---- 하위 메뉴--->
    <tr>
        <td>
            <span id='menu1_sub' style='display:none'>
                <a href="/introduce.php"><img src="/myimg/smn11.gif" alt="인사말" /></a>&nbsp
                <a href="/bbs/board.php?bo_table=notice"><img src="/myimg/smn12.gif"</a>&nbsp
                <a href="/location.php"><img src="/myimg/smn13.gif"</a>
            </span>
            <span id='menu2_sub' style='display:none; margin-left:30px'>
                <a href="/lecture.php"><img src="/myimg/smn21.gif"</a>&nbsp
                <a href="/bbs/board.php?bo_table=column"><img src="/myimg/smn22.gif" /></a>&nbsp
                <a href="/bbs/board.php?bo_table=archives"><img src="/myimg/smn23.gif" /></a>&nbsp
                <a href="/bbs/board.php?bo_table=instances"><img src="/myimg/smn24.gif" /></a>
            </span>
            <span id='menu3_sub' style='display:none; margin-left:50px'>
                <a href="/changework.php"><img src="/myimg/smn31.gif" /></a>&nbsp
                <a href="/change_body.php"><img src="/myimg/smn32.gif" /></a>&nbsp
                <a href="/change_heart.php"><img src="/myimg/smn33.gif" /></a>&nbsp
                <a href="/change_life.php"><img src="/myimg/smn34.gif" /></a>&nbsp
                <a href="/change_world.php"><img src="/myimg/smn35.gif" /></a>
            </span>
            <span id='menu4_sub' style='display:none; margin-left:270px'>
                <a href="/bbs/board.php?bo_table=QNA"><img src="/myimg/smn41.gif" /></a>&nbsp
                <a href="/bbs/board.php?bo_table=afternote"><img src="/myimg/smn42.gif" /></a>&nbsp
                <a href="/bbs/board.php?bo_table=reserve"><img src="/myimg/smn43.gif" /></a>
            </span>
        </td>
    </tr>
</table>

</form>

추천
0
  • 복사

댓글 2개

아.. 고생중이십니까? ㅎㅎ 제대로 태그를 처리하지 않아서 그래요. @.@

<a href="/lecture.php"><img src="/myimg/smn21.gif"</a>

여기서 img 태그가 닫지 않고 </a>가 왔고요.. 브라우저에서 menu2_sub span을 닫지 못해서 밖에 있게 됩니다.

style="cursor:hand" -> style="cursor:pointer"로 onhover에 "javascript_:"는  필요없습니다.
용자 aequum님 감사합니다. 덕분에 말끔히 해결되었습니다. (__)
기초적인 실수를 저질였는데도 안목이 부족하지 보지 못했네요 ㅋ
모르는 스크립트 부분에서의 오류일까 하고 끙끙대고 있었다는..

그런데
onhover  이런 부분은 없는 것 같은데..
onmouseover='javascript_:fncClick(this);' 이거 말씀이신가요? 통째로 지워도 된다는 뜻입니까?

통째로 지웠더니 안되네요. javascript_: 이것만 지웠더니 정상작동하네요 :)
© SIRSOFT
현재 페이지 제일 처음으로