Question

I have this JQ drop down menu and i am trying to get it to behave properly. it is probably a html css issue. I been playing with it for hours trying to get it to work right and have come to the conclusion i am not doing it right. I want to learn the correct way instead of just making it work. The menu slidetoggle causes the spacing to go haywire and the titles will bounce to make room for the extended menu. When I set heights and withs to make room the titles that dont have the slidetoggle will be on the bottom.

the visable allows me to show/hide for admins

so far i have

<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>

this script

<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

I’d suggest reading about nested lists for navigation. There are a number of articles on this topic. I referenced A List Apart: Suckerfish Dropdowns.

Here is a working example: 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>​

JavaScript:

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

See the CSS on the working link. I’m not sure if this solves your issues but I’d recommend starting simple and working your way up. Don’t worry about fancy slides until you figure out the basics.