joe主题美化五: 添加移动下边栏

今天发现 joe 主题移动样式下面无法登录,所以索性给 joe 主题加上下边栏

show me the code

首先在component文件夹里新建一个footer.navimobi.php,其中JNavigation是我自己之前美化加的,你可以换成自己的链接。

<?php
/**
 * 手机底部列表菜单
 */
if (!Helper::options()->JMobiset) return;
//$settings = Helper::options()->JNavmobi;
$all = Typecho_Plugin::export();
$loginUrl = $this->options->loginUrl;

if (array_key_exists('TePass', $all['activated'])){
    if ($this->user->hasLogin()) $loginUrl = $this->options->index.'/admin/extending.php?panel=TePass/theme/ucenter/profile.php';
    else $loginUrl = $this->options->index.'/tepass/signin';
}
?>
<nav class="navigation-tab">
<!--    --><?php
//    $navtops_list = array();
//    if (strpos($settings,'||')) {
//        //解析关键词数组
//        $kwsets = array_filter(preg_split("/(\r|\n|\r\n)/",$settings));
//        foreach ($kwsets as $kwset) {
//            $navtops_list[] = explode('||',trim($kwset));
//        }
//    }
//    ?>
    <div class="navigation-tab-item"><a href="<?php echo $this->options->index ?>" target="_self"><span class="navigation-tab__icon"><i class="iconfont icon-iconfont icon-zhuye"></i></span></a></div>
    <div class="navigation-tab-item"><a href="<?php echo $loginUrl ?>" target="_blank"><span class="navigation-tab__icon"><i class="iconfont icon-iconfont icon-denglu"></i></span></a></div>
    <div class="navigation-tab-item <?php if ($this->is('page')) _e('active'); ?>" id="load_mobinav"><a href="<?php echo $this->options->JNavigation ?>" target="_self"><span class="navigation-tab__icon"><i class="iconfont icon-iconfont icon-paihangbang"></i></span></a></div>
    <div class="navigation-tab-item" id="mob_goTop"><a><span class="navigation-tab__icon"><i class="iconfont icon-iconfont icon-gotop"></i></span></a></div>
    <div class="navigation-tab-overlay"></div>
</nav>

然后在functions.php里面加上一个开关

    // 手机底部导航栏样式
    $JMobiset = new Typecho_Widget_Helper_Form_Element_Select('JMobiset',array(0=>'不开启',1=>'开启'),0,'<h2>移动设置 Info</h2><hr>移动底部菜单设置','移动端页脚底部菜单');
    $JMobiset->setAttribute('class', 'j-setting-content j-setting-index');
    $form->addInput($JMobiset);

public/config.php 里面(顶部)引入我们刚刚的文件
<?php $this->need('component/footer.navmobi.php'); ?>

最后加上控制js和 样式css

$(".navigation-tab-item").bind('click',function() {
    $(".navigation-tab-item").removeClass("active");
    $(this).addClass("active");
    $(".navigation-tab-overlay").css({
        left: 25 * $(this).prevAll().length + "%"
    })
})
$("#mob_goTop").click(function () {
    $("#backToTop").click()
})
let load_mobi = $('#load_mobinav')
if (load_mobi.hasClass('active')){
    $(".navigation-tab-overlay").css({
        left: 25 * load_mobi.prevAll().length + "%"
    })
}

以下代码为scss ,自己手动转css

@media (max-width: 768px) {
    .navigation-tab {
        display: flex !important;
    }
}
/* navigation-tab */
.navigation-tab{
    height: 60px;
    width: 100%;
    line-height: 1;
    background-color: #fff;
    box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22);
    overflow: hidden;
    border: 10px solid #fff;
    display: none;
    flex-shrink: 0;
    position: fixed;
    bottom: 0;
    z-index: 40;
    .navigation-tab-item{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 25%;
        flex-shrink: 0;
        line-height: 1;
        cursor: pointer;
        transition: 0.3s;
        position: relative;
        z-index: 2;

        &.active {
            width: 25%;
        }
        .navigation-tab__icon {
            display: block;
            color: #4298e7;
            transition-duration: 0.3s;
            line-height: 1;
            svg{
                width: 24px;
                height: 24px;
                fill:#4298e7;
            }
            i{
                font-size: 24px;
            }
        }
    }
    .navigation-tab-overlay {
        border-radius: 20px;
        background-color: #e4f2ff;
        height: 100%;
        width: 25%;
        position: absolute;
        left: 0;
        top: 0;
        transition: 0.3s;
    }

}

大功告成~赶紧来试试吧~

给TA打赏
共{{data.count}}人
人已打赏
建站教程技术活

还在为typecho不能实现自定义页面和路由烦恼吗?快来看看吧

2020-12-18 22:59:00

建站教程技术活

简单!来!给你的Typecho 加上CDN优化选项(一)!

2020-12-21 21:48:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索