Question

我想在我的页面上做这个（photoshop图片）：

enter image description here

在悬停（在ACTORS链接上）我希望黄色下拉列表（Fotis J.Colakides等所在的位置）缓慢显示。从上到下。

我不知道在我的页面上执行此操作的最佳方式是什么。

当然我必须使用这样的unorder list（）：

    <ul id="showInfoNav">
        <li><a class="slideBtn" href="#">MEDIA</a>
            <ul class="slideShow">
                <li>assa</li>
            </ul>
        </li>
        <li><a class="slideBtn" href="#">ACTORS</a>
            <ul class="slideShow">
                <li><a href="#" onclick="javascript:getSummary(1)">ACTOR1</a></li>
                <li><a href="#" onclick="javascript:getSummary(2)">ACTOR2</a></li>
            </ul>
        </li>
    </ul>

[更新]

现在我已经这样做了：（http://jsfiddle.net/bMGhC/）

enter image description here

但我是从css做的。我有左：-9999px;在悬停时我正在做左：0px;

我想做它slideDown。但它没有用。

这是我的css：

ul#showInfoNav 
    {
        list-style:none;
        float:left;
        width:100%;
    }

    ul#showInfoNav li
    {
        float:left;
        margin-right:50px;
        position:relative;
    }

    ul#showInfoNav a.slideBtn
    {
        padding:5px;
        display:block;
        text-decoration:none; 
    }
    ul#showInfoNav ul a:hover{
        color:#898989;
    }
    /*--- DROPDOWN ---*/
    ul#showInfoNav ul
    {
        background-color:#F4F9B6;
        padding:50px 10px 10px 10px;
        list-style:none;
        left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
        position: absolute;
        top:-20px;
        /*z-index:-1;*/
    }
    ul#showInfoNav ul li
    {

        float:none;
    }
    ul#showInfoNav ul a{
        white-space:nowrap; 
    }

    ul#showInfoNav li:hover ul{ /* Display the dropdown on hover */
        left:0; /* Bring back on-screen when needed */
    }

我也有这个z-index问题。如果我将它设置为-1，它也会隐藏在图像后面。

Answer 1

查看jQuery UI效果，特别是slide（）：

http://docs.jquery.com/UI/Effects/Slide

Answer 2

您还可以查看jQuery提供的slideToggle()方法。

查看示例 here 。

类似的功能是slideUp()，slideDown()，而且更通用，animate()

Answer 3

查看.hover()和.slideUp/Down()。如果您想要更“永久”的状态，也可以在以下代码中将.hover替换为.toggle。两者的关键是利用他们的回调函数。

HTML

<a href="#">Click to see a list</a>
<ul>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
</ul>

的jQuery

$('ul').hide(); // doing this rather than via CSS for a fail-safe for JS
$('a').hover(function() {
    $('ul').slideDown('fast');
    }, function() {
    $('ul').slideUp('slow')
})

Answer 4

使用jQuery fadeIn（）时，您也可以指定持续时间。一些简单的样本将是：

给li一些id或class（<li id="actor1">soemthing</li>）
在JS文件或脚本标记中使用：

$（“＃actor1）.hover（function（）{$（this）.slideDown（'slow'）}，function（）{$（this）.slideUp（'slow'）}）;

编辑：我发现你想要一个滑动效果，我将fadeIn()和fadeOut()更改为slideDown()和slideUp()。您可以阅读他们的文档here

Answer 5

这是我找到的解决方案，我使用了这个，因为当我在他的<ul>标签中导航时，我不希望<li>滑动。

    $('ul.slideShow').hide();
    $("#showInfoNav li").click(function () {
        $(this).find('ul.slideShow').slideDown('fast').show();
        $(this).hover(function () {   // PARENT

        }, function () {
            $(this).parent().find("ul.slideShow").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up 
        });

    });

下拉菜单中的slideDown

5 个答案: