Sliding menu problem_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-12 04:04 出处：网络

I have a navigation menu that has submenus slide down on hover.The menu is structured like so: <ul class=\'nav\'>

相关专题：css jquery

I have a navigation menu that has submenus slide down on hover. The menu is structured like so:

<ul class='nav'>
  <li><a href='#'>About</a></li>
  <ul class='submenu'>
    <li><a href='#'>Stuff</a></li>
  </ul>
</ul>

etc..

What I did to create slideouts was the following:

$('ul.nav li').hover(function(){
  $el = $(this);
  $el.next('.submenu').slideToggle(); # they all have submenus, so this works for now
},function(){
  $el = $(this);
  $el.next('.submenu').slideToggle();
});

However, with this approach, the submenu collapses when you mouse off the main LI. I fixed this by removing the collapse on mouseout, and then created a mouseout event for the submenu (ie: when the mouse leaves the submenu, it collapses). However, in thi开发者_StackOverflow社区s setup, if you happen to mouse onto the main LI, then leave without mousing into the menu, the submenu stays open (obviously).

How should I approach this in a manner that will function properly and also allow me to make it degrade gracefully?

note: i also tried containing the ul inside the li (<li><a href>Stuff</a><ul class='submenu'><li></li></ul>) but I need the submenu to hide behind the main LI image, and that wasn't possible using z-index in that setup).

You should restructure your code a bit to be valid as well, like this:

<ul class='nav'>
  <li><a href='#'>About</a>
    <ul class='submenu'>
      <li><a href='#'>Stuff</a></li>
    </ul>
  </li>
</ul>

The bug with z-indexing you have with this I'm not understanding...you should add that or ask a new question specifically on it, because your HTML should be like this.

This lets you hover inside the same element...and a <ul> can't be a child of a <ul> anyway, it's invalid HTML (even though the browser will usually render it).

Then you can use jQuery like this:

$('ul.nav li').hover(function(){
  $(this).children('.submenu').stop(true, true).slideToggle();
});

You can give it a try here, the .stop() call addition is to prevent animation queue build-up.

here is a an example

<style type="text/css">
    .menucontrol a:link, .menucontrol a:active, .menucontrol a:visited
    {
        border: 1px solid orange;
        color: white;
        background-color: orange;
    }
    .menucontrol a:hover
    {
        background-color: #fff;
        color: #333;
    }
    .menucontrol, .menucontrol ul
    {
        margin: 0;
        padding: 0;
        list-style-type: none;
        list-style-position: outside;
        position: relative;
        line-height: 1.5em;
    }
    .menucontrol a:link, .menucontrol a:active, .menucontrol a:visited
    {
        display: block;
        padding: 0px 5px;
        text-decoration: none;
    }
    .menucontrol li
    {
        float: left;
        position: relative;
    }
    .menucontrol ul
    {
        position: absolute;
        width: 12em;
        top: 1.5em;
        display: none;
    }
    .menucontrol li ul a
    {
        width: 12em;
        float: left;
    }
    .menucontrol ul ul
    {
        top: auto;
    }
    .menucontrol li ul ul
    {
        left: 12em;
        margin: 0px 0 0 10px;
    }
    .menucontrol li:hover ul ul, .menucontrol li:hover ul ul ul, .menucontrol li:hover ul ul ul ul
    {
        display: none;
    }
    .menucontrol li:hover ul, .menucontrol li li:hover ul, .menucontrol li li li:hover ul, .menucontrol li li li li:hover ul
    {
        display: block;
    }
</style>

<body style="font-family: Consolas; font-size: 11px;">
<ul class="menucontrol">
    <li><a href="#">1 HTML</a></li>
    <li><a href="#">2 CSS</a></li>
    <li><a href="#">3 Javascript</a>
        <ul>
            <li><a href="#">3.1 jQuery</a>
                <ul>
                    <li><a href="#">3.1.1 Download</a><ul>
                        <li><a href="#">3.1.1 Download</a><ul>
                            <li><a href="#">3.1.1 Download</a></li>
                            <li><a href="#">3.1.2 Tutorial</a></li>
                        </ul>
                        </li>
                        <li><a href="#">3.1.2 Tutorial</a></li>
                    </ul>
                    </li>
                    <li><a href="#">3.1.2 Tutorial</a></li>
                </ul>
            </li>
            <li><a href="#">3.2 Mootools</a></li>
            <li><a href="#">3.3 Prototype</a></li>
        </ul>
    </li>
</ul>

<script type="text/javascript">
function mainmenu()
{
    $(" .menucontrol ul ").css({ display: "none" }); // Opera Fix
    $(" .menucontrol li").hover(function()
    {
        $(this).find('ul:first').css({ visibility: "visible", display: "none" }).show(400);
    }, function()
    {
        $(this).find('ul:first').css({ visibility: "hidden" });
    });
}

$(document).ready(function()
{
    mainmenu();
});

Sliding menu problem

精彩评论

关注公众号

热门标签

图文推荐

Sliding menu problem

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：