在悬停时，Jquery菜单从屏幕底部向上滑动

Question

我想只显示固定在屏幕底部的菜单短语“music，newsletter，contact”。在悬停时，我希望它们向上滑动并显示隐藏的内容。这就是我的意思：

http://sorendahljeppesen.dk/

请参阅屏幕底部。有谁知道如何实现这一目标？谢谢。

P.S。还有，谁会知道什么类型的MP3播放器呢？

Answer 1

将隐藏的内容放入div中，例如;

<div class="hiddenContent">...</div>

然后在页面底部给出链接，例如;

<a href="#" class="bottomLink">Music</a>

然后告诉Jquery在您将鼠标悬停在链接上时显示隐藏的内容;

$('.bottomLink').hover(
    function () {
        // Show hidden content IF it is not already showing
        if($('.hiddenContent').css('display') == 'none') {
            $('.hiddenContent').slideUp('slow');
        }
    },
    function () {
        // Do nothing when mouse leaves the link
        $.noop(); // Do Nothing
    }
);

// Close menu when mouse leaves Hidden Content
$('.hiddenContent').mouseleave(function () {
        $('.hiddenContent').slideDown('slow');
});

Answer 2

试试这段代码：

ASPX部分，

           <div id="categories-menu" class="hover-menu">
             <h2>Categories</h2>
                <ul class="actions no-style" style="display: none">
                   <li>//Place your content here that should show up on mouse over</li>                       
               </ul>
            </div>

JQuery部分，

            <script type="text/javascript">
           $(document).ready(function() {

            function show() {
              var menu = $(this);
               menu.children(".actions").slideUp();
            }

            function hide() { 
                 var menu = $(this);
                 menu.children(".actions").slideDown();
           }

           $(".hover-menu").hoverIntent({
              sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)
               interval: 50,   // number = milliseconds for onMouseOver polling       interval
                over: show,     // function = onMouseOver callback (required)
                 timeout: 300,   // number = milliseconds delay before onMouseOut
                    out: hide       // function = onMouseOut callback (required)
             });

       });
    </script>

希望这会有所帮助......

Answer 3

我找到了this great article下载的实时演示和源代码，文章展示了如何从底部制作幻灯片菜单。