인라인 목록 메뉴가 제대로 작동하지 않습니다.

Question

이 JQ 드롭 다운 메뉴가 있는데 제대로 작동하도록하려고합니다. 그것은 아마 HTML CSS 문제입니다. 나는 그것을 올바르게 작동 시키려고 노력하면서 몇 시간 동안 놀고 있었고 나는 그것을 올바르게하지 못했다는 결론에 도달했습니다. 나는 그것을 올바르게 만드는 대신 올바른 방법을 배우고 싶다. 메뉴 slidetoggle을 사용하면 간격이 달라지며 제목이 바운스되어 확장 메뉴를위한 공간을 만듭니다. 내가 높이를 정하고 룸을 만들기 위해 withs를 놓으면 미끄러짐이없는 제목은 바닥에있게됩니다.

뚜렷한 지금까지 내가

<nav> 
    <ul> 
     <li style="display: inline;"><a href="Loggedin/Search.aspx" class="NavTitle ntAlter">Home</a> 
     </li> 
     <li style="display: inline;"><a href="Support.aspx" class="NavTitle ntAlter">Support</a> 
     </li> 
     <li runat="server" id="NavTitle1_wrap" visible="false" class="NavTitle" style="display: inline-block;"> 
     <span id="NavTitle1"> Items </span> 
     <ul style="list-style-type: none;"> 
      <li><a style="display: none;" class="subMenu1">Add</a></li> 
      <li><a style="display: none;" class="subMenu1">Approve</a></li> 
      <li><a style="display: none;" class="subMenu1">Update</a></li> 
      <li><a style="display: none;" class="subMenu1">Delete</a></li> 
     </ul> 
     </li> 
     <li runat="server" id="NavTitle2_wrap" visible="false" class="NavTitle" style="display: inline-block;"> 
     <span id="NavTitle2"> Contacts</span> 
     <ul style="list-style-type: none;"> 
      <li><a style="display: none;" class="subMenu2">Add</a></li> 
      <li><a style="display: none;" class="subMenu2">Approve</a></li> 
      <li><a style="display: none;" class="subMenu2">Update</a></li> 
      <li><a style="display: none;" class="subMenu2">Delete</a></li> 
     </ul> 
     </li> 
    </ul> 
</nav> 

이 스크립트 내가 탐색을위한 중첩 된 목록에 대한 책을 읽은 게 좋을 것

<script type="text/javascript"> 
    $('#NavTitle1').hover(function() { 
     $('.subMenu1').stop(true, true).slideToggle('medium'); 
    }); 

    $('#NavTitle2').hover(function() { 
     $('.subMenu2').stop(true, true).slideToggle('medium'); 
    }); 
</script> 

Answer 1

가 나 관리자

에 대한/숨기기를 표시 할 수 있습니다. 이 주제에 대한 기사가 많이 있습니다. 나는 A List Apart: Suckerfish Dropdowns를 참조했다. http://jsfiddle.net/pHqKC/

<nav> 
    <ul> 
     <li><a href="Loggedin/Search.aspx" class="NavTitle ntAlter">Home</a> 
     </li> 
     <li><a href="Support.aspx" class="NavTitle ntAlter">Support</a> 
     </li> 
     <li runat="server" id="NavTitle1_wrap" visible="false" class="NavTitle"> 
     <span id="NavTitle1" class="menu"> Items 
      <ul class="submenu" style="list-style-type: none;"> 
       <li><a>Add</a></li> 
       <li><a>Approve</a></li> 
       <li><a>Update</a></li> 
       <li><a>Delete</a></li> 
      </ul> 
     </span> 
     </li> 
     <li runat="server" id="NavTitle2_wrap" visible="false" class="NavTitle" style="display: inline-block;"> 
     <span id="NavTitle2" class="menu"> Contacts 
      <ul class="submenu" style="list-style-type: none;"> 
       <li><a>Add</a></li> 
       <li><a>Approve</a></li> 
       <li><a>Update</a></li> 
       <li><a>Delete</a></li> 
      </ul> 
     </span> 
     </li> 
    </ul> 
</nav>​ 

자바 스크립트 :

$(document).ready(function() { 
    $('.menu').hover(
     function() { 
      $(this).find('.submenu').show(); 
     }, 
     function() { 
      $(this).find('.submenu').hide(); 
     } 
    ); 
});​ 

이 일 연결에 CSS 모두보기

은 작업 예입니다. 나는 이것이 당신의 문제를 해결할 지 모르겠지만 간단하게 시작하고 자신의 길을 일할 것을 권합니다. 당신이 기본을 이해할 때까지 멋진 슬라이드에 대해 걱정하지 마십시오.