SB Admin自带sidebar手机端显示修改


发表于 2018-11-05 08:09


首先看下SB Admin的手机端控制台菜单栏
QQ截图20181105075418.png
本来就地小的手机页面还非要拿出90px放菜单,于是打算优化一下,经过一两个小时的努力,成果如下:
QQ截图20181105075658.png

本来打算直接在SB Admin的sidebar上动手脚的,但是调试了半天也不满意,于是直接重弄了一个新的手机端菜单栏,首先要做的,就是在手机等小屏幕设备上隐藏SB Admin自带的sidebar,这很容易做到,添加如下css即可:

@media ( max-width :768px) {
	.sidebar{
		display:none !important;
	}
	footer.sticky-footer {
		width: 100% !important;
	}
}

然后就是自己画一个导航:

<div id="mobile-nav"
	style="display: none; position: absolute; top: 56px; left: 0px; background: #212529; width: 100%; z-index: 99999999;">
	<div class="row" style="margin: 0px !important">
		<div class="col-3"
			style="text-align: center; padding: 10px; font-size: .65rem">
			<a href="/console/plugin" style="color: rgba(255, 255, 255, .5)"><i
				class="fas fa-fw fa-cogs"></i> <span style="display: block">返回插件</span></a>
		</div>
		<div class="col-3"
			style="text-align: center; padding: 10px; font-size: .65rem">
			<a href="/console/comment" style="color: rgba(255, 255, 255, .5)"><i
				class="far fa-fw fa-comment-alt"></i> <span style="display: block">所有评论</span></a>
		</div>
		<div class="col-3"
			style="text-align: center; padding: 10px; font-size: .65rem">
			<a href="/console/comment/blacklist" style="color: rgba(255, 255, 255, .5)"><i
				class="fas fa-fw fa-th"></i> <span style="display: block">黑名单</span></a>
		</div>
		<div class="col-3"
			style="text-align: center; padding: 10px; font-size: .65rem">
			<a href="/console/comment/config" style="color: rgba(255, 255, 255, .5)"><i
				class="fas fa-fw fa-cog"></i> <span style="display: block">配置</span></a>
		</div>
	</div>
</div>

唯一的难点就是多级菜单,这里可以用bootstrap自带的 https://getbootstrap.com/docs/4.1/components/dropdowns/ 来实现,不过得在它默认的样式上稍加修改,最终html如下:

<div class="btn-group">
    <button type="button" class="btn btn-link dropdown-toggle"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
        style="color: rgba(255, 255, 255, .5); padding: 0px; font-size: .65rem !important">
        <i class="fas fa-fw fa-user"></i> <span style="display: block">模板管理</span>
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="/console/template">导入导出</a>
    </div>
</div>

最后就是自己的菜单的隐藏显示问题,需要修改下SB Admin的js,将sidebarToggle的点击事件改为如下即可:

t("#sidebarToggle").click(
  function(e) {
      if(t(".sidebar").is(":hidden")){
          t("#mobile-nav").toggle();
      }
      e.preventDefault(), t("body").toggleClass("sidebar-toggled"),
              t(".sidebar").toggleClass("toggled")
  })

虽然是一个微不足道的工作,但对前端不擅长的我来说还是挺头疼的,简单记录一下吧


搜索