您的位置: 首页  >  技术问答  >  如何使滑动菜单类似于Facebook的移动侧菜单与html，css，jquery？

如何使滑动菜单类似于Facebook的移动侧菜单与html，css，jquery？

分类: 技术问答 • 2022-06-06 20:25:43
问题描述：

我在网站的左侧有一个垂直的按钮列表。我想隐藏他们在一边，所以只有一个标签显示。当菜单被隐藏时，我想让标签说出更多，然后当菜单是可见的，我想标签来说隐藏。

I am making a website and have a vertical list of buttons along the left side of the site. I want to hide them in the side so only a tab show. When the menu is hidden, I want the tab to say something like More, then when the menu is visible, I want the tab to say hide.

所以我有几个问题...如何使菜单，这本质上只是一个div，从屏幕外面滑出来点击，同时还有标签上的文本改变并且href目的地改变，使得当幻灯片功能完成时，标签将说出隐藏，并且当点击它时，它将把div发回屏幕。

So i have a couple questions... How can I make the menu, which is essentially just a div, slide out from outside the screen on click, while also having the text on the tab change and the a href destination change so that when the slide function is complete, the tab will say hide, and when clicking it, it will send the div back out of the screen.

如果你在手机上有Facebook应用，我基本上想在桌面网站上复制它。

If you have the facebook app on your phone, I basically want to replicate that on my desktop website.

答

这是很简单的使用jQuery。这些是你应该采取的步骤。

This is pretty straightforward using jQuery. These are the steps you should take.


  1. 使用固定位置将弹出式视窗固定在萤幕一侧

  2. 添加可点击区域用户通过

    3. 触发幻灯片输入/输出效果。创建jQuery动画，通过负边距滑动内容。
  3. 如何显示触发器（显示/隐藏）

  1. Fix the popout to one side of the screen using fixed positioning
  2. Add a clickable area that user triggers the slide in/out effect with
  3. Create a jQuery animation to slide the content on/off via negative margins
  4. In the animation callback change how you want the trigger displayed (show/hide)

重要 - toggle 事件在jQuery 1.8中已弃用，并在1.9中移除。我的原始答案将不再工作。这个新版本将工作在较旧和较新版本的jQuery。此方法使用点击处理程序和一个名为 hidden 的类来确定弹出窗口是否应该在屏幕上显示/不显示。

Important - toggle event is deprecated in jQuery 1.8 and removed in 1.9. My original answer will no longer work. This new version will work in both older and newer version of jQuery. This method uses a click handler and a class called hidden to determine whether the popout should be animated on/off the screen.

http://jsfiddle.net/tzDjA/

jQuery

jQuery

//when the trigger is clicked we check to see if the popout is currently hidden
//based on the hidden we choose the correct animation
$('#trigger').click( function() {
    if ($('#popout').hasClass('hidden')) {
        $('#popout').removeClass('hidden');
        showPopout();
    }
    else {
        $('#popout').addClass('hidden');
        hidePopout();
    }
});

function showPopout() {
    $('#popout').animate({
        left: 0
    }, 'slow', function () {
        $('#trigger span').html('Close');  //change the trigger text at end of animation
    });
}

function hidePopout() {
    $('#popout').animate({
        left: -40
    }, 'slow', function () {
        $('#trigger span').html('Show');  //change the trigger text at end of animation
    });
}


CSS

/* minimal CSS */
 #popout {
    position: fixed;                /* fix the popout to the left side of the screen */
    top: 50px;
    left: -40px;                    /* use a negative margin to pull the icon area of the popout off the edge of the page */
    width: 75px;
    border: 1px dotted gray;
    color: gray;
}
#trigger {                          /* create a clickable area that triggers the slide in/out effect */
    position: absolute;             /* position clickable area to consume entire right section of popout (add a border if you want to see for yourself) */  
    top: 0;
    bottom: 0;
    right: 0;
    cursor: pointer;   
}



b
$ b

http://jsfiddle.net/WMGXr/1/ 

$('#toggle').toggle( 
    function() {
        $('#popout').animate({ left: 0 }, 'slow', function() {
            $('#toggle').html('Close');
        });
    }, 
    function() {
        $('#popout').animate({ left: -40 }, 'slow', function() {
            $('#toggle').html('Show');
        });
    }
);

<div id="popout">
    <div id="toggle">Show</div>
    <br style="clear: both" />
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>        
    </ul>
</div>

#popout { position: fixed; height: 100px; width: 75px; border: 1px dotted gray; background: darkblue; color: white; top:50px; left: -40px; }
#toggle { float: right; }

相关推荐