使用 JQuery 的双悬停菜单?

发布于 2024-12-02 04:27:51 字数 831 浏览 3 评论 0原文

我有一个粗略的滑动菜单,如下所示:

http://www.clients.eirestudio.net/ttt/

它在大多数情况下都有效,但我希望能够将鼠标悬停在列表上,并且列表不会再次隐藏。

有什么想法吗?

我的代码:

/*
    Sliding Main Menu
    */

    $('ul#side_menu_list').hover(function()
    {
        $(this).show();
    });

    $('span#side_menu').hover(function()
    {
        $('ul#side_menu_list').stop().animate
        ({
            left:"-=130px"},150);

        $(this).stop().animate
        ({
            left:"-=92px"},150);
        }, 
        function(){

            $('ul#side_menu_list').stop().delay(400).animate
            ({
                left:"125px"},150);
            $(this).stop().animate
            ({
                left:"45px"},150);
    });

I have a rough sliding menu as shown here:

http://www.clients.eirestudio.net/ttt/

It works for the most part but I want to be able to hover over the list and for the list not to hide away again.

Any ideas?

My code:

/*
    Sliding Main Menu
    */

    $('ul#side_menu_list').hover(function()
    {
        $(this).show();
    });

    $('span#side_menu').hover(function()
    {
        $('ul#side_menu_list').stop().animate
        ({
            left:"-=130px"},150);

        $(this).stop().animate
        ({
            left:"-=92px"},150);
        }, 
        function(){

            $('ul#side_menu_list').stop().delay(400).animate
            ({
                left:"125px"},150);
            $(this).stop().animate
            ({
                left:"45px"},150);
    });

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

心凉 2024-12-09 04:27:51

我会将它们放在包装器中

<div class="popout">
    <span id="side_menu">Click</span>
    <ul id="side_menu_list">
        <li><a href="">bingo reviews</a></li>
        <li><a href="">new bingo sites</a></li>
        <li><a href="">no deposit bingo</a></li>
    </ul>
</div>

,然后在“popuout”类上设置悬停功能

$('.popout').hover(function()
    {
        $(this).stop().animate
        ({
            left:"-=92px"},150);
        });
    }, 
    function(){
        $(this).stop().animate
        ({
            left:"45px"},150);
        });
});

,在这里我将为单个弹出 div 制作动画,并根据布局放置它们。
如果您愿意的话,您当然仍然可以单独为它们设置动画? :P

编辑
然后你就这样做(记住让弹出类足够宽,以便它们在里面动画):

$('.popout').hover(function()
    {
        $('#side_menu_list').stop().animate({
                left:"-=130px"
                },150);

        $('#side_menu').stop().animate({
                left:"-=92px"
                },150);
    }, 
    function(){
        $('#side_menu_list').stop().delay(400).animate({
                left:"125px"
                },150);

        $('#side_menu').stop().animate({
                left:"45px"
                },150);
});

I would put them inside a wrapper

<div class="popout">
    <span id="side_menu">Click</span>
    <ul id="side_menu_list">
        <li><a href="">bingo reviews</a></li>
        <li><a href="">new bingo sites</a></li>
        <li><a href="">no deposit bingo</a></li>
    </ul>
</div>

And then make the hover function on the "popuout" class

$('.popout').hover(function()
    {
        $(this).stop().animate
        ({
            left:"-=92px"},150);
        });
    }, 
    function(){
        $(this).stop().animate
        ({
            left:"45px"},150);
        });
});

Here i would animate the single popout div, and have them placed accordingly to the layout.
You could ofcourse still animate them seperatly if you would want that? :P

EDIT
Then you just do (remember to have the popout class be wide enough for them to animate inside):

$('.popout').hover(function()
    {
        $('#side_menu_list').stop().animate({
                left:"-=130px"
                },150);

        $('#side_menu').stop().animate({
                left:"-=92px"
                },150);
    }, 
    function(){
        $('#side_menu_list').stop().delay(400).animate({
                left:"125px"
                },150);

        $('#side_menu').stop().animate({
                left:"45px"
                },150);
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文