jQuery如何在悬停时向下移动主导航栏

Question

我正在制作菜单栏。子菜单向上打开。 我想要以下更改

1. 悬停时，主导航栏应向下移动，子链接栏应向上可见。
2. 如果鼠标离开主导航并且主导航应该再次向上移动，子菜单栏应该隐藏。
3. 子链接栏应在页面滚动时隐藏，主导航应向上。

fiddle的链接

HTML 代码是

<div class="nav">
    <div class="table">

        <ul class="select"><li><a href="#nogo"><b>Home</b>
                </a></li></ul>



        <ul class="select"><li><a href="#nogo"><b>Joseph Turner</b><!--[if IE 7]><!-->           </a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <div class="select_sub">
                    <ul class="sub">
                        <li><a href="#nogo">Fishermen at Sea</a></li>
                        <li><a href="#nogo">The Shipwreck</a></li>
                        <li><a href="#nogo">The Vale of Ashburnham</a></li>
                        <li><a href="#nogo">Crossing the Brook</a></li>
                    </ul>
                </div>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
        </ul>

        <ul class="select_sub"><li><a href="#nogo"><b>John Constable</b><!--[if IE        7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <div class="select_sub show">
                    <ul class="sub">
                        <li><a href="#nogo">The Hay Wain</a></li>
                        <li><a href="#nogo">Brighton Beach</a></li>
                        <li><a href="#nogo">Malvern Hall</a></li>
                        <li class="sub_show"><a href="#nogo">Salisbury Cathedral</a></li>
                        <li><a href="#nogo">Weymouth Bay</a></li>
                    </ul>
                </div>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
        </ul>


        <ul class="select"><li><a href="#nogo"><b>Henri Matisse</b><!--[if IE 7]><!-->       </a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <div class="select_sub">
                    <ul class="sub">
                        <li><a href="#nogo">The Girl with Green Eyes</a></li>
                        <li><a href="#nogo">The Dream</a></li>
                        <li><a href="#nogo">Woman in Blue</a></li>
                        <li><a href="#nogo">The Yellow Dress</a></li>
                        <li><a href="#nogo">The Piano Lesson</a></li>
                    </ul>
                </div>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
        </ul>


        <ul class="select"><li><a href="#nogo"><b>Paul Cezanne</b><!--[if IE 7]><!-->              </a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <div class="select_sub">
                    <ul class="sub">
                        <li><a href="#nogo">The Large Bathers</a></li>
                        <li><a href="#nogo">Onions and Bottles</a></li>
                        <li><a href="#nogo">Mardi Gras</a></li>
                        <li><a href="#nogo">Still Life</a></li>
                        <li><a href="#nogo">Boy in a Red Waistcoat</a></li>
                    </ul>
                </div>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
        </ul>

    </div>
</div>

css 是

.nav {
    height:35px; 
    background: #854; 
    position:relative; 
    font-family:arial, verdana, sans-serif; 
    font-size:11px; 
    width:750px; 
    z-index:500;


}

.nav .table {
    display:table; 
    margin:0 auto;
}

.nav .select,
.nav .current {
    margin:0; 
    padding:0; 
    list-style:none; 
    display:table-cell; 
    white-space:nowrap;
}

.nav li {
    margin:0; 
    padding:0; 
    height:auto; 
    float:left;
}

.nav .select a {
    display:block; 
    height:35px; 
    float:left; 
    background: #632; 
    padding:0 30px 0 30px; 
    text-decoration:none; 
    line-height:35px; 
    white-space:nowrap; 
    color:#ddd;
}

.nav .current a {
    display:block; 
    height:35px; 
    float:left; 
    background: #134; 
    padding:0 0 0 15px; 
    text-decoration:none; 
    line-height:35px; 
    white-space:nowrap; 
    color:#fff;
}


.nav .current a b {
    display:block; 
    padding:0 30px 0 15px; 
    background:#542 right top;
}

.nav .select a:hover, 
.nav .select li:hover a {
    background: #653; 
    padding:0 0 0 15px; 
    cursor:pointer; 
    color:#fff;
}

.nav .select a:hover b, 
.nav .select li:hover a b {
    display:block; 
    float:left; 
    padding:0 30px 0 15px; 
    background:url(http://eurekavi.com/pro_line_1.gif) right top; 
    cursor:pointer;
}

.nav .select_sub {
    display:none;
}

/* IE6 only */
.nav table {
    border-collapse:collapse; 
    margin:-1px; 
    font-size:1em; 
    width:0; 
    height:0;
}

.nav .sub {
    display:table; 
    /*margin:0 auto; */
    /*padding:0; */
    list-style:none;
    background:#248;
    margin-top:-70px;
}

.nav .sub_active .current_sub a, 
.nav .sub_active a:hover {
    background:transparent; 
    color:#f00;
}

.nav .select :hover .select_sub, 
.nav .current .show {
    display:block; 
    position:absolute; 
    width:750px; 
    top:35px; 
    background: #412; 
    padding:0; 
    z-index:100; 
    left:0; 
    text-align:center;
}

.nav .current .show {
    z-index:10;
}

.nav .select :hover .sub li a, 
.nav .current .show .sub li a {
    display:block; 
    float:left; 
    background:transparent; 
    padding:0 10px 0 10px; 
    margin:0; 
    white-space:nowrap; 
    border:0; 
    color:#444;
}

.nav .current .sub li.sub_show a {
    color:#088; 
    cursor:default; 
    background:#632;
}

.nav .select :hover .sub li a:hover, 
.nav .current .sub li a:hover {
    visibility:visible; 
    color:#088; 
    background:#743;
}

请回复。 谢谢。

Answer 1

1 .要向下移动主菜单，最初设置top: 0; 那么你可以使用 .css() 或 .animate() jQuery 方法

示例：

$(".nav").animate({top: "30px"}, 500);

2 。在菜单项的 onmouseover 事件中触发上述代码，您可以使用

$(".nav").animate({top: "0px"}, 500); onmouseout 事件

您可以在 HTML 中添加，

<div class="nav" onmouseover="movedown()">....</div>

<script type="text/javascript">
function movedown() {
    $(".nav").animate({top: "30px"}, 500);
}
</script>`

3 .您不需要使用滚动事件，因为 onmouseout 事件会自动隐藏您的子菜单

4 .为防止主菜单隐藏，请在 onmouseout 事件上设置时间延迟并使用标志。

这是更新后的小提琴

http://jsfiddle.net/ExaLM/4/

阅读主题：

http://api.jquery.com/animate/

http://www.w3schools.com/jsref/event_onmouseover.asp

示例如下：

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover