TypechoJoeTheme
JOE主题移动端侧边栏导航超过设定个数显示更多
统计
登录
用户名
密码

JOE主题移动端侧边栏导航超过设定个数显示更多

2020-12-10
/
0 评论
/
285 阅读
/
正在检测是否收录...
12/10

JOE主题非常强大,不得不夸一下。
但每个人的需求不一样,比如这个移动端的侧边栏导航,新建的页面多了,就显示很长,所以就差强人意了。
但也无可奈何,作者没闲工夫,只能自己动手做了一个手风琴风格的更多展开效果。
这里就不上图,直接上代码了。

涉及的文件就是 public/header.php 一个
修改 header.php 文件

1、打开 header.php 文件,搜索 <?php $this->widget('Widget_Contents_Page_List')->to($pages); ?> ,文件中共有三行这个代码,找到第三行,我们要修改的内容就在它的下面。

2、将下面这段代码

<?php while ($pages->next()) : ?>
    <li <?php if ($this->is('page', $pages->slug)) : ?>active<?php endif; ?>>
        <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <path d="M325.31499999 764.323l1e-8-508.83099999c0-28.16 22.598-50.934 50.757-50.93400001 13.09300001 0 24.932 5.024 33.901 13.092l335.755 251.633c22.24 16.859 26.905 48.607 10.044 71.024-2.87099999 3.947-6.281 7.355-10.045 10.045l-339.338 254.51c-22.241 16.676-54.16 12.193-70.844-10.225-6.996-9.15-10.225-19.73-10.225-30.31v0z" p-id="6117"></path>
        </svg>
        <a href="<?php $pages->permalink(); ?>"><?php $pages->title(); ?></a>
    </li>
<?php endwhile; ?>

修改为

<?php $i = 0; ?>
<?php while ($pages->next()) : ?>
    <?php $i++; ?>
    <?php if ($i <= $this->options->JNavMaxNum) : ?>
        <li <?php if ($this->is('page', $pages->slug)) : ?>active<?php endif; ?>>
            <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <path d="M325.31499999 764.323l1e-8-508.83099999c0-28.16 22.598-50.934 50.757-50.93400001 13.09300001 0 24.932 5.024 33.901 13.092l335.755 251.633c22.24 16.859 26.905 48.607 10.044 71.024-2.87099999 3.947-6.281 7.355-10.045 10.045l-339.338 254.51c-22.241 16.676-54.16 12.193-70.844-10.225-6.996-9.15-10.225-19.73-10.225-30.31v0z" p-id="6117"></path>
            </svg>
            <a href="<?php $pages->permalink(); ?>"><?php $pages->title(); ?></a>
        </li>
    <?php endif; ?>
<?php endwhile; ?>
<?php if ($i > $this->options->JNavMaxNum) : ?>
    <li class="nav-item">
        <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <path d="M325.31499999 764.323l1e-8-508.83099999c0-28.16 22.598-50.934 50.757-50.93400001 13.09300001 0 24.932 5.024 33.901 13.092l335.755 251.633c22.24 16.859 26.905 48.607 10.044 71.024-2.87099999 3.947-6.281 7.355-10.045 10.045l-339.338 254.51c-22.241 16.676-54.16 12.193-70.844-10.225-6.996-9.15-10.225-19.73-10.225-30.31v0z" p-id="6117"></path>
        </svg>
        <span>更多</span>
        <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M381.57809 345.996199c-2.908236 4.233418-4.614088 9.380648-4.614088 14.892175s1.705851 10.658757 4.614088 14.922874L544.443411 539.42256c10.32209 10.324136 10.32209 27.042913 0 37.381375L385.842207 735.921909c-5.376451 4.843308-8.771781 11.818163-8.771781 19.61371 0 14.602579 11.83249 26.433022 26.434046 26.433022 5.953595 0 11.420097-1.979074 15.835663-5.298679l5.300726-5.299703 175.866427-175.884846c20.650319-20.647249 20.650319-54.114478 0-74.763774L422.95036 343.132988l-1.811252-1.794879c-4.690836-4.264117-10.903328-6.884804-17.740036-6.884804C394.339742 334.453305 386.34465 339.02339 381.57809 345.996199z" p-id="10713"></path></svg>
    </li>
    <div class="subnav">
        <?php $current = 0 ?>
        <?php while ($pages->next()) : ?>
            <?php $current++; ?>
            <?php if ($current > $this->options->JNavMaxNum) : ?>
                <div class="subnav-item">
                    <a class="<?php if ($this->is('page', $pages->slug)) : ?>active<?php endif; ?>" href="<?php $pages->permalink(); ?>"><?php $pages->title(); ?></a>
                </div>
            <?php endif; ?>
        <?php endwhile; ?>
    </div>
<?php endif; ?>

3、引入 CSS 文件

<style>
    .nav-item {list-style-type:none;cursor:pointer;}
    .subnav-item a {line-height:40px;display:block;border-bottom: 1px solid var(--classB);}
    .nav-item svg.icon {margin:auto;}
    .nav-item:hover:before {height:100%;}
    .subnav {display:none;text-indent:2em;}
    .subnav-item:hover {background-color:#f0f0f0;}
</style>
可以将上述内容单独保存后导入,也可以直接放在 header.php 文件中

4、引入 jQuery.js 文件

<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
$(document).ready(function(){
    var isTrue = false;
    $(".nav-item").click(function () {
        $(this).next(".subnav").slideToggle();
        if (isTrue) { 
            $(this).find("svg:eq(1)").css("transform", "rotate(0deg)");  
            isTrue = false;
        }else {
            $(this).find("svg:eq(1)").css("transform", "rotate(90deg)");
            isTrue = true;
        }
    }); 
});
</script>
直接在 header.php 文件的内容末加上即可

以上就是为JOE主题实现移动端侧边栏导航超过设定个数显示更多的方法,设置方式与PC端的一致,主题设置中公共部分有选项。分类部分也可以套用二级分类样式,不需要判断后端设置,直接输出有二级的即可。直接替换掉 ul 标签下的内容,代码如下:

<ul>
    <?php while ($categorys->next()) : ?>
        <?php if ($categorys->levels === 0) : ?>
            <?php $children = $categorys->getAllChildren($categorys->mid); ?>
            <?php if (empty($children)) { ?>
                <li <?php if ($this->is('category', $categorys->slug)) : ?>active<?php endif; ?>>
                    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                        <path d="M325.31499999 764.323l1e-8-508.83099999c0-28.16 22.598-50.934 50.757-50.93400001 13.09300001 0 24.932 5.024 33.901 13.092l335.755 251.633c22.24 16.859 26.905 48.607 10.044 71.024-2.87099999 3.947-6.281 7.355-10.045 10.045l-339.338 254.51c-22.241 16.676-54.16 12.193-70.844-10.225-6.996-9.15-10.225-19.73-10.225-30.31v0z" p-id="6117"></path>
                    </svg>
                    <a href="<?php $categorys->permalink(); ?>"><?php $categorys->name(); ?></a>
                </li>
            <?php } else { ?>
                <li class="nav-item">
                    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                        <path d="M325.31499999 764.323l1e-8-508.83099999c0-28.16 22.598-50.934 50.757-50.93400001 13.09300001 0 24.932 5.024 33.901 13.092l335.755 251.633c22.24 16.859 26.905 48.607 10.044 71.024-2.87099999 3.947-6.281 7.355-10.045 10.045l-339.338 254.51c-22.241 16.676-54.16 12.193-70.844-10.225-6.996-9.15-10.225-19.73-10.225-30.31v0z" p-id="6117"></path>
                    </svg>
                    <span><a href="<?php $categorys->permalink(); ?>"><?php $categorys->name(); ?></a></span>
                    <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M381.57809 345.996199c-2.908236 4.233418-4.614088 9.380648-4.614088 14.892175s1.705851 10.658757 4.614088 14.922874L544.443411 539.42256c10.32209 10.324136 10.32209 27.042913 0 37.381375L385.842207 735.921909c-5.376451 4.843308-8.771781 11.818163-8.771781 19.61371 0 14.602579 11.83249 26.433022 26.434046 26.433022 5.953595 0 11.420097-1.979074 15.835663-5.298679l5.300726-5.299703 175.866427-175.884846c20.650319-20.647249 20.650319-54.114478 0-74.763774L422.95036 343.132988l-1.811252-1.794879c-4.690836-4.264117-10.903328-6.884804-17.740036-6.884804C394.339742 334.453305 386.34465 339.02339 381.57809 345.996199z" p-id="10713"></path></svg>
                </li>
                <div class="subnav">
                    <?php foreach ($children as $mid) { ?>
                        <?php $child = $categorys->getCategory($mid); ?>
                        <div class="subnav-item">
                            <a <?php if ($this->is('category', $child['slug'])) : ?>class="active" <?php endif; ?> href="<?php echo $child['permalink'] ?>" title="<?php echo $child['name']; ?>"><?php echo $child['name']; ?></a>
                        </div>
                    <?php } ?>
                </div>
            <?php } ?>
        <?php endif; ?>
    <?php endwhile; ?>
</ul>
朗读
赞 · 0
版权属于:

小王先森

本文链接:

https://xwsir.cn/2640.html(转载时请注明本文出处及文章链接)

评论 (0)