jquery - 创建一个 Jquery 幻灯片菜单

Question

早上好，我想使用 Jquery 做一个类似于这个网站的浮动幻灯片菜单（右下角：https ://www.casumo.com/ ）

有人可以告诉我如何正确地做到这一点吗？这是我第一次做这样的事情。

Answer 1

最简单的方法是使用position: fixed;将菜单定位在您希望它出现的位置，并在您单击菜单的某些元素时切换控制菜单高度的类。例如：

$(document).on('click', '.menu h4', function() {
    $(this).parent().toggleClass('expanded');
});

http://jsfiddle.net/UZFuT/

Answer 2

这是我在 Casumo.com 上的菜单的快速变化，我为你扔了一起:)

http://jsfiddle.net/q8X2d/5/

您也可以在滑入菜单之前进行一些计算：

$(".menu-wrapper").hover(function() {
    var $menu = $(this).find(".menu");
    var menuHeight = $menu.outerHeight();
$menu.stop().animate({ top: -menuHeight }, 200);
}, function() {
    var $menu = $(this).find(".menu");
    $menu.stop().animate({ top: 0 }, 200);
});

如果您需要更多定制帮助，请前往我们位于 Ta'Xbiex 的办公室；）