<!-- 左侧：菜单按钮  -->
<span class="fa fa-bars MobilemenuBtn js-sidebar--open MobilemenuBtn-text" aria-label="展开菜单"></span>​

侧边栏弹出菜单

    <!--侧边栏菜单-->
    <aside class="js-sidebar">
        <div class="js-sidebar--container" style="transition: all 0.3s ease 0s; transform: translate(-100%, 0px);">
            <?php if(empty($uid)) { ?>
            <div class="sidebar--title p-4">
                <div class="media">
                    <a class="mr-3" href="user-login.htm"><img class="avatar-3"
                            src="<?php echo $conf['logo_mobile_url'];?>" style="width: 3.5rem;height: 3.5rem;">
                    </a>
                    <div class="media-body">
                        <a href="user-login.htm" class="text-white">
                            <span class="h5">登录/注册</span>
                            <div class="mt-2">
                                <span>登录/注册,发现更多精彩！</span>
                            </div>
                        </a>
                    </div>
                </div>
                </div>
                <?php } else { ?>
                <div class="sidebar--title p-4">
                <div class="media">
                <a class="mr-3" href="my.htm"><img class="avatar-3" src="<?php echo $conf['logo_mobile_url'];?>" style="width: 3.5rem;height: 3.5rem;"> </a>
				<div class="media-body">
				    <span class="h5"><?php echo $user['username'];?></span>
				    <div class="mt-2">
						<a href="my.htm">
							<span class="badge badge-pill badge-primary"><?php echo lang('user_uid');?>:<?php echo $user['uid'];?></span>
							<span class="badge badge-pill badge-info ml-1"><?php echo $user['groupname'];?></span>
						</a>
					</div>  
				</div>
				<div style="position: absolute;top: 10px;right: 10px;"><a class="badge badge-danger badge-pill p-2" href="user-logout.htm"><i class="fa fa-sign-out-alt"></i></a>
				</div>
				</div>
            </div>
                <?php } ?>

            <div class="sidebar_menu p-4">
                <div class="form-group nav-item hidden-lg ">
                    <form action="search.htm" id="search_form">
                        <div class="input-group">
                            <input type="text" class="form-control"
                                style="border-radius: 100px;background-color: var(--light);border: 0;" placeholder="关键词"
                                name="keyword">
                            <div class="input-group-append">
                                <button class="btn btn-light"
                                    style="border-radius: 100px; margin-left: -38px;z-index: 999;" type="submit"><span
                                        class="icon-search"></span></button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">

                    <li class="nav-item home active" data-active="index">
                        <a class="nav-link active" href="./" data-active="index"><i class="iconfont icon-shouye"></i>
                            首页</a>
                    </li>
                    <li class="nav-item collapsed" data-toggle="collapse" data-target="#pages" aria-expanded="false"
                        aria-controls="pages">
                        <a class="nav-link dropdown-toggle"><i class="iconfont icon-dingdan"></i>
                            页面</a>
                    </li>
                    <div class="multi-collapse pl-3 collapse" id="pages" style="">
                        <li class="nav-item links" data-active="links"><a class="nav-link" href="links.htm"><span
                                    class="iconfont icon-lianjie"></span> 邻居</a></li>
                        <li class="nav-item ranklist" data-active="ranklist"><a class="nav-link" href="ranklist.htm"><i
                                    class="iconfont icon-huiyuan1"></i> 排行榜</a></li>
                        <div class="form-group nav-item mb-0 hidden-sm hidden-md ml-4" style="margin-top: 10px;">
                            <form action="search.htm" id="search_form">
                                <div class="input-group ">
                                    <input type="text" class="form-control"
                                        style="border-radius: 100px;width: 200px;background-color: var(--light);border: 0;"
                                        placeholder="关键词" name="keyword">
                                    <div class="input-group-append">
                                        <button class="btn btn-light"
                                            style="border-radius: 100px; margin-left: -38px;z-index: 999;"
                                            type="submit"><span class="iconfont icon-sousuo1"></span></button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <li class="nav-item collapsed" data-toggle="collapse" data-target="#multiCollapseExample2"
                        aria-expanded="false" aria-controls="multiCollapseExample2">
                        <a class="nav-link dropdown-toggle"><i class="iconfont icon-shezhi1"></i>
                            我的</a>
                    </li>
                    <div class="multi-collapse pl-3 collapse" id="multiCollapseExample2" style="">

                        <div class="my_option ">
                            <!-- 管理员 -->
                            <li class="nav-item">
								<a class="nav-link" href="<?php echo url('my');?>"><span class="fa fa-user"
										data-toggle="tooltip" data-placement="top" title="个人中心"></span> <span
										class="hidden-lg"> <?php echo lang('my_profile');?></span></a>
							</li>
							<li class="nav-item usernotice " id="nav-usernotice" data-active="nav-usernotice">
								<a class="nav-link" href="my-notice.htm"><span class="icon-bell"
										data-toggle="tooltip" data-placement="top" title="消息"></span> <span
										class="hidden-lg"> 消息</span>
								</a>
							</li>
								<?php if($gid == 1) { ?>
							<li class="nav-item">
								<a class="nav-link" href="admin/"><span class="fa fa-cog"
										data-toggle="tooltip" data-placement="top"
										title="<?php echo lang('admin_page');?>"></span> <span
										class="hidden-lg"> <?php echo lang('admin_page');?></span></a>
								<?php } ?>
							</li>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dropdown-divider"></div>
            <div class="sidebar_forumList p-4">

                <div class="nav navbar-nav forumlist px-4">
                    <div class="row">
                    <?php foreach($forumlist_show as $_forum) { ?>
                        <li class="nav-item col-6 p-1" fid="<?php echo $_forum['fid'];?>" data-active="fid-<?php echo $_forum['fid'];?>">
                            <a class="nav-link py-2 rounded small forumlist-bg mr-0" href="<?php echo url("forum-$_forum[fid]");?>">
                                <div class="text-center">
                                    <img class="avatar-1 mr-1 rounded" src="<?php echo $_forum['icon_url'];?>">

                                    <span><?php echo $_forum['name'];?></span>
                                </div>
                            </a>
                        </li>
                    <?php } ?>
                    </div>
                </div>
            </div>
        </div>
        <div class="js-sidebar--background"></div>
    </aside>​

css样式

.MobilemenuBtn {
 padding:1rem;
 font-size:1.25rem;
 line-height:1;
 background-color:transparent;
 border:1px solid transparent;
 border-radius:.25rem;
}
.postInfo {
 font-size:5px !important
}
.forumlist-bg {
 background-color:var(--light) !important
}
.forumBrief {
 cursor:pointer;
 display:-webkit-box;
 text-overflow:ellipsis;
 overflow:hidden;
 -webkit-box-orient:vertical;
 -webkit-line-clamp:2
}
.js-sidebar, .js-sidebar--background {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.js-sidebar--background {
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.js-sidebar {
  position: fixed;
  z-index: 9999;
  -moz-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
  -moz-transition: -moz-transform 0s ease 0.3s;
  -o-transition: -o-transform 0s ease 0.3s;
  -webkit-transition: -webkit-transform 0s ease;
  -webkit-transition-delay: 0.3s;
  transition: transform 0s ease 0.3s;
}
.js-sidebar--background {
  position: absolute;
  background: transparent;
}
.js-sidebar--container {
  position: relative;
  z-index: 1;
  width: 80%;
  max-width: 300px;
  height: 100%;
  background: #FFF;
  display: -webkit-flex;
  -webkit-flex-direction: column;
  display: flex;
  flex-direction: column;
  -moz-box-shadow: 2px 0 20px rgba(0, 0, 0, 0.2), 1px 0 10px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 2px 0 20px rgba(0, 0, 0, 0.2), 1px 0 10px rgba(0, 0, 0, 0.1);
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.2), 1px 0 10px rgba(0, 0, 0, 0.1);
  -moz-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}
.js-sidebar--container .sidebar--title {
  height: 100px;
  min-height: 100px;
  background: linear-gradient(to left, #0f2027, #203a43, #2c5364);
  color: white;
  line-height: 100%;
  display: -webkit-flex;
  -webkit-align-items: flex-end;
  display: flex;
  align-items: flex-end;
}
.js-sidebar.is-visible {
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  -moz-transition: -moz-transform 0s ease 0s;
  -o-transition: -o-transform 0s ease 0s;
  -webkit-transition: -webkit-transform 0s ease;
  -webkit-transition-delay: 0s;
  transition: transform 0s ease 0s;
}
.js-sidebar.is-visible .js-sidebar--background { background: rgba(0, 0, 0, 0.2); }

.sidebar_forumList{
  overflow: auto;
}

sidebar.js文件代码

window.SidebarJS = (function(window, document) {
    'use strict';
  
    const IS_VISIBLE = 'is-visible';
    const TRANSITION = 'transition: all';
    const TRANSLATE = 'transform: translate';
  
    class SidebarJS {
      constructor(config) {
        this.$component = document.querySelector(config ? config.component : '.js-sidebar');
        this.$container = document.querySelector(config ? config.container : '.js-sidebar--container');
        this.$background = document.querySelector(config ? config.background : '.js-sidebar--background');
        this.$open = document.querySelector(config ? config.showElement : '.js-sidebar--open');
  
        this.$container.addEventListener('touchstart', _onTouchStart.bind(this));
        this.$container.addEventListener('touchmove', _onTouchMove.bind(this));
        this.$container.addEventListener('touchend', _onTouchEnd.bind(this));
        this.$background.addEventListener('click', this.close.bind(this));
        this.$open.addEventListener('click', this.open.bind(this));
      }
  
      open() {
        _element(this.$container, [TRANSITION + '.3s ease', TRANSLATE + '(0, 0)']);
        if(!this.$component.classList.contains(IS_VISIBLE)) {
          this.$component.classList.add(IS_VISIBLE);
        }
      }
  
      close() {
        _element(this.$container, [TRANSITION + '.3s ease', TRANSLATE + '(-100%, 0)']);
        this.$component.classList.remove(IS_VISIBLE);
      }
    }
  
    function _vendorify(el, prop, val) {
      const Prop = prop.charAt(0).toUpperCase() + prop.slice(1);
      const prefs = ['Moz', 'Webkit', 'O', 'ms'];
      el.style.prop = val;
      for(let i = 0; i < prefs.length; i++ ) {
        el.style[prefs[i] + Prop] = val;
      }
      return el;
    }
  
    function _element(el, props) {
      for(let i = 0; i < props.length; i++) {
        let prop = props[i].split(':')[0];
        let val = props[i].split(':')[1];
        _vendorify(el, prop, val);
      }
      return el;
    }
  
    function _onTouchStart(e) {
      _element(this.$container, [TRANSITION + '0s']).touchStart = e.touches[0].pageX;
    }
  
    function _onTouchMove(e) {
      this.$container.touchMove = this.$container.touchStart - e.touches[0].pageX;
      if(this.$container.touchMove > 0) {
        _element(this.$container, [TRANSLATE + '(' + -this.$container.touchMove + 'px, 0)']);
      }
    }
  
    function _onTouchEnd() {
      this.$container.touchMove > (this.$container.clientWidth/4) ? this.close() : this.open();
    }
  
    return SidebarJS;
  
  })(window, document);