Question

我正在尝试制作一个在悬停时从页面底部滑动的菜单。我已经实现了滑动效果，我的div已经位于屏幕的底部，顶部40px显示，因此您可以将鼠标悬停在其上以激活滑动效果。问题是div不是“固定”的，它不会随页面滚动。我认为有点JS是最好的解决方案

这是我的HTML：

<div id="floatingmenu">
    <div id="listcontainer">
        <ul class="floatingcolumn">
            <li>Link 1</li>
        </ul>
        <ul class="floatingcolumn">
            <li>Link 2</li>
        </ul>
        <ul class="floatingcolumn">
            <li>Link 3</li>
        </ul>
    </div>
</div>

这是CSS：

#floatingmenu {
    width:100%;
    height:320px;
    position:absolute;
    bottom:-300px;
    z-index:99999;
    background:#000;
    -webkit-transition: all 700ms ease;
    -moz-transition: all 700ms ease;
    -ms-transition: all 700ms ease;
    -o-transition: all 700ms ease;
    transition: all 700ms ease;
}

#floatingmenu:hover {
    bottom:0px;
    -webkit-transition: all 700ms ease;
    -moz-transition: all 700ms ease;
    -ms-transition: all 700ms ease;
    -o-transition: all 700ms ease;
    transition: all 700ms ease;
}

#listcontainer {
    position:relative;
    width:900px;
    margin-left:auto;
    margin-right: auto;
}

#listcontainer ul {
    width:290px;
    float:left;
    color:FFF;
}

你可以在这里看到它：

http://jsfiddle.net/fn6t7/

非常感谢任何帮助。

谢谢！

Answer 1

您应该在position:absolute; CSS类中更改position:fixed;到#floatingmenu：

#floatingmenu {
   width:100%;
   height:320px;
   position:fixed;
   bottom:-300px;
   z-index:99999;
   background:#000;
   -webkit-transition: all 700ms ease;
   -moz-transition: all 700ms ease;
   -ms-transition: all 700ms ease;
   -o-transition: all 700ms ease;
   transition: all 700ms ease;
}

通过HTML，CSS和JS滑动底部面板

1 个答案: