드롭 다운 메뉴를 표시하고 숨기는 방법?

-2

나는, 아래에있는 내 HTML 구조 jQuery를하고 CSS를 사용하여 드롭 다운 메뉴에서 질문했습니다드롭 다운 메뉴를 표시하고 숨기는 방법?

<table cellpadding="0" cellspacing="0" border="0"> 
    <tr> 
     <td> 
      <img src="images/Icons.png" alt="a"/> 
      <div class="menu" id="a"> 
       <ul> 
        <li><a href="#">link 1</a></li> 
        <li><a href="#">link 2</a></li> 
       </ul> 
      </div> 
     </td> 
     <td> 
      <img src="images/Icons.png" alt="b"/> 
      <div class="menu" id="b"> 
       <ul> 
        <li><a href="#">link 3</a></li> 
        <li><a href="#">link 4</a></li> 
       </ul> 
      </div> 
     </td> 
     <td> 
      <img src="images/Icons.png" alt="c"/> 
      <div class="menu" id="c"> 
       <ul> 
        <li><a href="#">link 5</a></li> 
        <li><a href="#">link 6</a></li> 
       </ul> 
      </div> 
     </td> 
    </tr> 
</table>

내가 이미지를 통해 마우스, 사업부 메뉴를 표시하고 표시됩니다 때 달성하기 위해 원하는 메뉴 링크입니다 클릭 할 수있는 동안, 이미지에서 마우스가 멀어지면 div가 숨겨 지거나 사용자가 마우스로 메뉴를 떠납니다.

감사합니다. 다음과 같이

출처

2013-06-06 sams5817

나는 두 CSS 클래스를 추가하여이 접근 것 :

.hidden 
{ 
display: none; 
width: 0px; 
height: 0px; 
} 

.show 
{ 
/*add any styling desired when showing*/ 
}

을 그런 다음 마우스 효과 이상 :

window.onload = function(){ 
    document.getElementById('imageId').onmouseover = function() { 
      document.getElementById('menuId').classname = 'show'; 
    } 

    document.getElementById('imageId').onmouseout = function() { 
      document.getElementById('menuId').classname = 'hidden'; 
    } 
}

그럼 그냥 숨겨진에 메뉴의 기본 CSS 클래스를 설정 너는 괜찮을거야.

<nav id="main-nav"> 
    <ul> 
     <li> 
      <a href="#"> 
       <img src="whatever.jpg" alt="" /> 
      </a> 
      <ul class="dropdown"> 
       <li><a href="#">Lorem ipsum dolor sit amet consecteur</a></li> 
       <li><a href="#">Lorem ipsum dolor sit amet consecteur</a></li> 
       <li><a href="#">Lorem ipsum dolor sit amet consecteur</a></li> 
       <li><a href="#">Lorem ipsum dolor sit amet consecteur</a></li> 
      </ul> 
     </li> 
    </ul> 
</nav>

그리고 당신의 스타일 : 당신은이 HTML/CSS를 사용할 수 있습니다

#main-nav > ul {} 
#main-nav > ul > li {} 
#main-nav > ul > li > a {} 
#main-nav > ul > li:hover > ul { display:block; } 
#main-nav > ul > li > ul { display:none; } 
#main-nav > ul > li > ul > li {} 
#main-nav > ul > li > ul > li > a {}

출처

2013-06-06 16:56:11 StMotorSpark

답장을 보내 주셔서 감사합니다, 문제는 메뉴가 일단 이미지 밖으로 마우스가 사라집니다 – sams5817

남자 난 정말 대신 테이블의 정렬되지 않은 목록을 사용하는 것이 좋습니다, 귀하의 HTML은 다음과 같을 것 당신이 일하고자하는 것을 만들기 위해

출처

2013-06-07 22:42:49 ggonzalez

드롭 다운 메뉴를 표시하고 숨기는 방법?

답변

관련 문제