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

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


在悬停时，主导航栏应向下移动，子链接栏应向上可见。
如果将鼠标移出主导航，则子菜单栏应隐藏，并且主导航应再次向上移动。
子链接栏应隐藏在页面滚动中，主导航应向上。


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

请回复。
谢谢。

最佳答案

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