排行榜 统计
  • 建站日期:2020/07/11
  • 文章总数:151 篇
  • 评论总数:377 条
  • 分类总数:5 个
  • 最后更新:1月17日

主题添加移动端下边栏

本文阅读 1 分钟
首页 typecho 正文

本文最后更新于2022年12月23日, 已超过462天没有更新。 如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!

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

1.首先在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>

2.然后在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);

3.在 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 + "%"
        })
    }

4.以下代码为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;
        }

    }
本文来自投稿,不代表本站立场,如若转载,请注明出处:
-- 展开阅读全文 --
主题 添加author page
« 上一篇 01-04
主题移动端,样式下添加二级分类
下一篇 » 01-04
V注册会员 L评论等级
R5 条回复
  1. * * * 🎁 GET FREE iPhone 15: http://bizandbyte.com/uploads/go.php 🎁 * * * hs=b9c33e904b1176f43ac0fc91f62b588b* :
    2024-02-11     Win 10 /    FireFox

    n0ytsa

  2. jhCnbdVKlQkHGep :
    2024-02-11     Win 10 /    Chrome

    KWUNAPXzM

  3. jhCnbdVKlQkHGep :
    2024-02-11     Win 10 /    Chrome

    KWUNAPXzM

  4. jhCnbdVKlQkHGep :
    2024-02-11     Win 10 /    Chrome

    ZGxtwJEa

  5. jhCnbdVKlQkHGep :
    2024-02-11     Win 10 /    Chrome

    ZGxtwJEa

没有更多评论了