一个简单粗暴让Xiuno移动端导航栏从左划出的方式
Airhelym 12月前

起因很简单,见到无数大佬的博客或论坛的导航是侧滑的,觉得操作方便也美观……就这么多了。

折腾无数最后发现一个比较不错的功能是貌似是Bootstrap5开始才有的,但xiuno使用的是BS4,直接用用不来……

 

这里提供个自己的思路(仅保证移动端导航栏左侧划出,其他美化和语法优化自行处理):在主程序或插件overwrite文件夹中找到header_nav_inc.htm,然后在第一行添加以下代码:

 <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>

【注:比较懒故直接使用在线cdn,也可以下载到本地后引用】

之后大概找到这两处:

<div class="container">
            ……
            <!--{hook header_nav_logo_before.htm}-->

……

<div class="collapse navbar-collapse" id="nav">
                <!-- 左侧:版块 -->

            ……

            </ul>

 

然后利用Bootstrap 5 中的offcanvas功能,把该换的该挪位置的都处理掉

如果各位有更好的方法可以回复
            

最新回复 (12)
全部楼主
  • 481150395
    12月前 2
    0
    我要拿出这帖子奉献给世人赏阅,我要把这个帖子一直往上顶,往上顶!顶到所有人都看到为止! 
  • qiang
    12月前 3
    0
    顶顶顶顶顶顶顶!!!
  • yunxi0723
    12月前 4
    0
    感谢楼主ing!!!
  • 明月清风
    12月前 5
    0
    面对如此强贴,论遇到多大阻力,只要我一息上尚存,就绝不会让它沉沦下去,这一点请楼主放心。 
  • qiang
    12月前 6
    0
    不错的帖子!
  • Tillreetree 版主
    12月前 7
    0

    那为啥不直接用boootstrap 5重做所有部分呢?

  • Airhelym 楼主
    12月前 8
    0

    最开始为了省事,overwrite原版页面文件,然后准备逐一替换语法……

    技术不佳,只敢一点点改

  • 段先森
    11月前 9
    0
    感谢楼主ing!!!
  • dxs
    11月前 10
    0
    面对如此强贴,论遇到多大阻力,只要我一息上尚存,就绝不会让它沉沦下去,这一点请楼主放心。 
  • tt1
    11月前 11
    0
  • zaylei
    7月前 12
    0
    顶顶顶顶顶顶顶!!!
  • yhk
    6月前 13
    0
    沙发我没有,板凳我没有,板也没有,只好站在后面排队支持! 
返回