微信公众号里做菜单滑入滑出_微信公众号下拉框-优快云博客

本文链接：https://blog.youkuaiyun.com/holhing/article/details/75219286

本文介绍了一种基于HTML和CSS的侧边菜单设计方法，并详细解释了如何通过jQuery实现菜单的显示与隐藏动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

过程：1.菜单入口 2. 菜单隐藏 3. 菜单出现 4. 菜单退出

1.菜单入口
思路：页面上做一个虚浮按钮，位置固定（不随页面滚动而滚动）
按钮样式如下：

<style>
    .mine_label{
        position:fixed;
        left:15px;
        top:15px;
        width:50px;
        height:50px;
        z-index:998;
        border-radius:25px;
        opacity:0.8;
        text-align:center;
        background:#fff;
        box-shadow:1px 1px 1px #aaa;
    }
</style>
<div class="mine_label" id="mine_label">
    <img src="./icon/people.png" width="40px" height="40px" style="margin-top:3px;">
</div>

效果：
这里写图片描述

菜单隐藏
此次设计中菜单从左滑出，所以让菜单的左边距=-菜单的width
样式：

<style>
    .nav{
        background:#fff;
        width:180px;
        height:100%;
        position:fixed;
        z-index:9999;
        top:0;
        left:0;
        margin-left:-180px;
        box-shadow:2px 0px 3px #aaa;
    }
</style>

菜单 css

<div class="nav" id="nav">
    <div style="padding:30px 0;text-align:center">
        <img src="${normal_info.ico }" style="width:60px;height:60px;border-radius:30px;">
        <div style="margin-top:5px;font-size:16px;">${normal_info.nick }</div>
        <div style="margin-top:5px;font-size:16px;">余额：${normal_info.loose_change }</div>
        <div style="margin-top:5px;font-size:10px;color:#aaa">（余额提现请登录新牙行app）</div>
    </div>
    <a href="mine?action=shop_member">
    <div class="item">
        <div class="head">
            <img src="./icon/nav/card.png">
        </div>
        <div class="content">会员卡</div>
    </div>
    </a>
    <a href="agentApply?action=myOrder&shopId=${shopInfo.id }">
    <div class="item">
        <div class="head">
            <img src="./icon/nav/ticket.png">
        </div>
        <div class="content">商品券</div>
    </div>
    </a>
    <a href="mine?action=consumes">
    <div class="item">
        <div class="head">
            <img src="./icon/nav/consume.png">
        </div>
        <div class="content">消费详情</div>
    </div>
    </a>
    <a href="tel:02867878860">
    <div class="item">
        <div class="head">
            <img src="./icon/nav/contact.png">
        </div>
        <div class="content">联系我们</div>
    </div>
    </a>
</div>

效果：
这里写图片描述

4.进入和退出

    //显示导航栏
    $("#mine_label").click(function(){
        $("#total_cover").show();
        $("#nav").animate({marginLeft:"0px"},"normal");
    })
    //隐藏导航栏
    $("#total_cover").click(function(){
        $(this).hide();
        $("#nav").animate({marginLeft:"-180px"},"normal");
    })

PS:
导航栏的出现和隐藏都是通过操作左边距(margin-left）来实现的, 加上动画，会让导航栏的隐藏和出现没那么突兀

笔记：
1. position: fixed 可以使得div位置固定，不随页面滚动，当需要做div固定时可以使用这个属性；fixed与absolute的区别，两者都可以任意位置固定一个div, fixed固定后div的位置不会随页面滚动；absolute固定后，会随页面位置滚动，absolute一般多与relative结合使用
2. height:inherit; 子块继承父块的高度
3. clear:both; 消除float效果
4. animate：自定义动画效果，
$(selector).animate(styles,speed,easing,callback)
$(selector).animate(styles,options)
可以通过设置speed(slow,normal,fast）来设置动画的过度时间，会使得变化平滑