header_nav.inc.htm文件，标签</header>之前添加如下代码：
左侧：点击菜单按钮
<!-- 左侧：菜单按钮 -->
<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);
收费内容
本帖含有隐藏内容，请您向作者支付
5枚 金币 后再查看,或提升vip等级免积分查看
