一为导航添加中间功能模块

教程分享3年前 (2022)更新战东海

有不少伙伴想要站长中间的导航模块，因此，站长今日就公开分享一下源码。模块主要包含手机页面的模块，和web页面模块。

话不多说，直接给出代码。首先复制下面的php 代码，粘贴到 onenav 主题的 template/tools-header.php 最下面，的 endif; 这行上面。

   ?>
    <div class="d-none d-lg-block">
        <div class="col-12">
            <div class="slide_2_mk">
                <div class="slide_2_container">
                    <div class="slide_2_mkbox background-default">
                        <div class="uk-grid-uksmls uk-grid">
                            <div class="uk-width-1-5 uk-first-column">
                                <div class="item">
                                    <div class="uk-grid-uksmls uk-grid">
                                        <div class="uk-width-auto uk-first-column">
                                            <img src="https://gogobody.gitee.io/onenav-child/images/icon/linggan-01.svg"
                                                 width="52" height="46" alt="知识星球 GO">
                                        </div>
                                        <div class="uk-width-expand">
                                            <a href="https://www.ixsdh.com/circles/" target="_blank">知识星球<em>
                                                    GO</em></a>
                                            <p>快来挖掘你的灵感</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="uk-width-1-5">
                                <div class="item">
                                    <div class="uk-grid-uksmls uk-grid">
                                        <div class="uk-width-auto uk-first-column">
                                            <img src="https://www.tukuv.com/wp-content/uploads/2022/01/1641039233-ruanjian-01.svg"
                                                 width="52" height="46" alt="软件神器 GO">
                                        </div>
                                        <div class="uk-width-expand">
                                            <a href="https://www.idh.cc/jingpinyingyong" target="_blank">软件神器<em>
                                                    下载</em></a>
                                            <p>好软分享让你更高效</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="uk-width-1-5">
                                <div class="item">
                                    <div class="uk-grid-uksmls uk-grid">
                                        <div class="uk-width-auto uk-first-column">
                                            <img src="https://gogobody.gitee.io/onenav-child/images/icon/ziti-01.svg"
                                                 width="52" height="46" alt="书单分享">
                                        </div>
                                        <div class="uk-width-expand">
                                            <a href="https://www.idh.cc/haoshutuijian" target="_blank">书单分享<em> 收藏</em></a>
                                            <p>书中有颜如玉还有黄金屋</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="uk-width-1-5">
                                <div class="item">
                                    <div class="uk-grid-uksmls uk-grid">
                                        <div class="uk-width-auto uk-first-column">
                                            <img src="https://gogobody.gitee.io/onenav-child/images/icon/meitu.svg"
                                                 width="52" height="46" alt="壁纸美图">
                                        </div>
                                        <div class="uk-width-expand">
                                            <a href="http://blog.8dml.com/" target="_blank">壁纸美图<em> GO</em></a>
                                            <p>免费壁纸美图下载</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="uk-width-1-5">
                                <div class="item">
                                    <div class="uk-grid-uksmls uk-grid">
                                        <div class="uk-width-auto uk-first-column">
                                            <img src="https://gogobody.gitee.io/onenav-child/images/icon/huodong-01.svg"
                                                 width="52" height="46" alt="学术镜像">
                                        </div>
                                        <div class="uk-width-expand">
                                            <a href="http://so.8dml.com/" target="_blank">八度目录<em>
                                                    搜索</em></a>
                                            <p>找文章来这儿试试看</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="d-lg-none container container-fluid customize-width">
        <div class="html-box">
            <div class="mrxu_link">
                <div class="onenav-menu-box-out">
                    <a href="/circles/">
                        <div class="onenav-menu-box">
                            <div class="menu-circle">
                                <div class="menu-circle-icon"></div>
                                <i class="io io-quanzi_quanzi onenav-front"></i>
                            </div>
                            <div class="onenav-menu-title">圈子</div>
                        </div>
                    </a>
                </div>
                <div class="onenav-menu-box-out">
                    <a href="/hotnews/">
                        <div class="onenav-menu-box">
                            <div class="menu-circle">
                                <div class="menu-circle-icon"></div>
                                <i class="io io-kuaixun onenav-front"></i>
                            </div>
                            <div class="onenav-menu-title">快讯</div>
                        </div>
                    </a>
                </div>
                <div class="onenav-menu-box-out">
                    <a href="/blog/">
                        <div class="onenav-menu-box">
                            <div class="menu-circle">
                                <div class="menu-circle-icon"></div>
                                <i class="io io-xuexi onenav-front"></i>
                            </div>
                            <div class="onenav-menu-title">文章</div>
                        </div>
                    </a>
                </div>
                <div class="onenav-menu-box-out">
                    <a href="/rank/">
                        <div class="onenav-menu-box">
                            <div class="menu-circle">
                                <div class="menu-circle-icon"></div>
                                <i class="io io-bangdan onenav-front"></i>
                            </div>
                            <div class="onenav-menu-title">榜单</div>
                        </div>
                    </a>
                </div>
                <div class="onenav-menu-box-out">
                    <a href="/types/readbooks/">
                        <div class="onenav-menu-box">
                            <div class="menu-circle">
                                <div class="menu-circle-icon"></div>
                                <i class="io io-shudanchuangjianshudan onenav-front"></i>
                            </div>
                            <div class="onenav-menu-title">读书</div>
                        </div>
                    </a>
                </div>
                <div class="onenav-menu-box-out">
                    <a href="/types/softwares">
                        <div class="onenav-menu-box">
                            <div class="menu-circle">
                                <div class="menu-circle-icon"></div>
                                <i class="io io-app6 onenav-front"></i>
                            </div>
                            <div class="onenav-menu-title">软件</div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
<?php

然后是相关的 css 。可以放到主题的：添加代码 -> 自定义样式css代码


// header content
/* ========================================================================
Component: Grid
========================================================================== */
/*
 * 1. Allow cells to wrap into the next line
 * 2. Reset list
 */
.uk-grid {
    display: flex;
    /* 1 */
    flex-wrap: wrap;
    /* 2 */
    margin: 0;
    padding: 0;
    list-style: none;
    justify-content: space-between;
}
/*
 * Grid cell
 * Note: Space is allocated solely based on content dimensions, but shrinks: 0 1 auto
 * Reset margin for e.g. paragraphs
 */
.uk-grid > * {
    margin: 0;
}
/*
 * Remove margin from the last-child
 */
.uk-grid > * > :last-child {
    margin-bottom: 0;
}
/* Gutter
 ========================================================================== */
/*
 * Default
 */
/* Horizontal */
.uk-grid {
    margin-left: -30px;
}
.uk-grid > * {
    padding-left: 30px;
}
/* Vertical */
.uk-grid + .uk-grid,
.uk-grid > .uk-grid-margin,
* + .uk-grid-margin {
    margin-top: 30px;
}
/* Desktop and bigger */
@media (min-width: 1200px) {
    /* Horizontal */
    .uk-grid {
        margin-left: -40px;
    }
    .uk-grid > * {
        padding-left: 40px;
    }
    /* Vertical */
    .uk-grid + .uk-grid,
    .uk-grid > .uk-grid-margin,
    * + .uk-grid-margin {
        margin-top: 40px;
    }
}
/*
 * Small
 */
/* Horizontal */
.uk-grid-small,
.uk-grid-column-small {
    margin-left: -15px;
}
.uk-grid-small > *,
.uk-grid-column-small > * {
    padding-left: 15px;
}
/* Vertical */
.uk-grid + .uk-grid-small,
.uk-grid + .uk-grid-row-small,
.uk-grid-small > .uk-grid-margin,
.uk-grid-row-small > .uk-grid-margin,
* + .uk-grid-margin-small {
    margin-top: 15px;
}
/*
 * Medium
 */
/* Horizontal */
.uk-grid-medium,
.uk-grid-column-medium {
    margin-left: -30px;
}
.uk-grid-medium > *,
.uk-grid-column-medium > * {
    padding-left: 30px;
}
/* Vertical */
.uk-grid + .uk-grid-medium,
.uk-grid + .uk-grid-row-medium,
.uk-grid-medium > .uk-grid-margin,
.uk-grid-row-medium > .uk-grid-margin,
* + .uk-grid-margin-medium {
    margin-top: 30px;
}
/*
 * Large
 */
/* Horizontal */
.uk-grid-large,
.uk-grid-column-large {
    margin-left: -40px;
}
.uk-grid-large > *,
.uk-grid-column-large > * {
    padding-left: 40px;
}
/* Vertical */
.uk-grid + .uk-grid-large,
.uk-grid + .uk-grid-row-large,
.uk-grid-large > .uk-grid-margin,
.uk-grid-row-large > .uk-grid-margin,
* + .uk-grid-margin-large {
    margin-top: 40px;
}
/* Desktop and bigger */
@media (min-width: 1200px) {
    /* Horizontal */
    .uk-grid-large,
    .uk-grid-column-large {
        margin-left: -70px;
    }
    .uk-grid-large > *,
    .uk-grid-column-large > * {
        padding-left: 70px;
    }
    /* Vertical */
    .uk-grid + .uk-grid-large,
    .uk-grid + .uk-grid-row-large,
    .uk-grid-large > .uk-grid-margin,
    .uk-grid-row-large > .uk-grid-margin,
    * + .uk-grid-margin-large {
        margin-top: 70px;
    }
}
/*
 * Collapse
 */
/* Horizontal */
.uk-grid-collapse,
.uk-grid-column-collapse {
    margin-left: 0;
}
.uk-grid-collapse > *,
.uk-grid-column-collapse > * {
    padding-left: 0;
}
/* Vertical */
.uk-grid + .uk-grid-collapse,
.uk-grid + .uk-grid-row-collapse,
.uk-grid-collapse > .uk-grid-margin,
.uk-grid-row-collapse > .uk-grid-margin {
    margin-top: 0;
}
/* Divider
 ========================================================================== */
.uk-grid-divider > * {
    position: relative;
}
.uk-grid-divider > :not(.uk-first-column)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px solid #e5e5e5;
}
/* Vertical */
.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid #e5e5e5;
}
/*
 * Default
 */
/* Horizontal */
.uk-grid-divider {
    margin-left: -60px;
}
.uk-grid-divider > * {
    padding-left: 60px;
}
.uk-grid-divider > :not(.uk-first-column)::before {
    left: 30px;
}
/* Vertical */
.uk-grid-divider.uk-grid-stack > .uk-grid-margin {
    margin-top: 60px;
}
.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
    top: -30px;
    left: 60px;
}
/* Desktop and bigger */
@media (min-width: 1200px) {
    /* Horizontal */
    .uk-grid-divider {
        margin-left: -80px;
    }
    .uk-grid-divider > * {
        padding-left: 80px;
    }
    .uk-grid-divider > :not(.uk-first-column)::before {
        left: 40px;
    }
    /* Vertical */
    .uk-grid-divider.uk-grid-stack > .uk-grid-margin {
        margin-top: 80px;
    }
    .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
        top: -40px;
        left: 80px;
    }
}
/*
 * Small
 */
/* Horizontal */
.uk-grid-divider.uk-grid-small,
.uk-grid-divider.uk-grid-column-small {
    margin-left: -30px;
}
.uk-grid-divider.uk-grid-small > *,
.uk-grid-divider.uk-grid-column-small > * {
    padding-left: 30px;
}
.uk-grid-divider.uk-grid-small > :not(.uk-first-column)::before,
.uk-grid-divider.uk-grid-column-small > :not(.uk-first-column)::before {
    left: 15px;
}
/* Vertical */
.uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin,
.uk-grid-divider.uk-grid-row-small.uk-grid-stack > .uk-grid-margin {
    margin-top: 30px;
}
.uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin::before {
    top: -15px;
    left: 30px;
}
.uk-grid-divider.uk-grid-row-small.uk-grid-stack > .uk-grid-margin::before {
    top: -15px;
}
.uk-grid-divider.uk-grid-column-small.uk-grid-stack > .uk-grid-margin::before {
    left: 30px;
}
/*
 * Medium
 */
/* Horizontal */
.uk-grid-divider.uk-grid-medium,
.uk-grid-divider.uk-grid-column-medium {
    margin-left: -60px;
}
.uk-grid-divider.uk-grid-medium > *,
.uk-grid-divider.uk-grid-column-medium > * {
    padding-left: 60px;
}
.uk-grid-divider.uk-grid-medium > :not(.uk-first-column)::before,
.uk-grid-divider.uk-grid-column-medium > :not(.uk-first-column)::before {
    left: 30px;
}
/* Vertical */
.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin,
.uk-grid-divider.uk-grid-row-medium.uk-grid-stack > .uk-grid-margin {
    margin-top: 60px;
}
.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin::before {
    top: -30px;
    left: 60px;
}
.uk-grid-divider.uk-grid-row-medium.uk-grid-stack > .uk-grid-margin::before {
    top: -30px;
}
.uk-grid-divider.uk-grid-column-medium.uk-grid-stack > .uk-grid-margin::before {
    left: 60px;
}
/*
 * Large
 */
/* Horizontal */
.uk-grid-divider.uk-grid-large,
.uk-grid-divider.uk-grid-column-large {
    margin-left: -80px;
}
.uk-grid-divider.uk-grid-large > *,
.uk-grid-divider.uk-grid-column-large > * {
    padding-left: 80px;
}
.uk-grid-divider.uk-grid-large > :not(.uk-first-column)::before,
.uk-grid-divider.uk-grid-column-large > :not(.uk-first-column)::before {
    left: 40px;
}
/* Vertical */
.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin,
.uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin {
    margin-top: 80px;
}
.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before {
    top: -40px;
    left: 80px;
}
.uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin::before {
    top: -40px;
}
.uk-grid-divider.uk-grid-column-large.uk-grid-stack > .uk-grid-margin::before {
    left: 80px;
}
/* Desktop and bigger */
@media (min-width: 1200px) {
    /* Horizontal */
    .uk-grid-divider.uk-grid-large,
    .uk-grid-divider.uk-grid-column-large {
        margin-left: -140px;
    }
    .uk-grid-divider.uk-grid-large > *,
    .uk-grid-divider.uk-grid-column-large > * {
        padding-left: 140px;
    }
    .uk-grid-divider.uk-grid-large > :not(.uk-first-column)::before,
    .uk-grid-divider.uk-grid-column-large > :not(.uk-first-column)::before {
        left: 70px;
    }
    /* Vertical */
    .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin,
    .uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin {
        margin-top: 140px;
    }
    .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before {
        top: -70px;
        left: 140px;
    }
    .uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin::before {
        top: -70px;
    }
    .uk-grid-divider.uk-grid-column-large.uk-grid-stack > .uk-grid-margin::before {
        left: 140px;
    }
}
/* Match child of a grid cell
 ========================================================================== */
/*
 * Behave like a block element
 * 1. Wrap into the next line
 * 2. Take the full width, at least 100%. Only if no class from the Width component is set.
 * 3. Expand width even if larger than 100%, e.g. because of negative margin (Needed for nested grids)
 */
.uk-grid-match > *,
.uk-grid-item-match {
    display: flex;
    /* 1 */
    flex-wrap: wrap;
}
.uk-grid-match > * > :not([class*='uk-width']),
.uk-grid-item-match > :not([class*='uk-width']) {
    /* 2 */
    box-sizing: border-box;
    width: 100%;
    /* 3 */
    flex: auto;
}
.uk-grid-uksmls, .uk-grid-column-uksmls {
    margin-left: -20px;
}
.uk-grid-uksmls > *, .uk-grid-column-uksmls > * {
    padding-left: 20px;
}
.uk-grid + .uk-grid-uksmls, .uk-grid + .uk-grid-row-uksmls, .uk-grid-uksmls > .uk-grid-margin, .uk-grid-row-uksmls > .uk-grid-margin, * + .uk-grid-margin-uksmls {
    margin-top: 20px;
}
.uk-grid-uksmls.uk-grid {
    overflow: hidden;
    height: 50px;
}
@media (max-width: 1400px ) and (min-width: 1024px) {
    .uk-grid-uksmls > * {
        padding-left: 10px;
    }
    .uk-grid-uksmls > .uk-width-1-5 {
        padding-left: 20px;
    }
}
.slide_2_mk {
    margin-top: -80px;
    position: relative;
    padding-bottom: 25px;
}
.slide_2_mkbox {
    box-shadow: 0px 0px 29px 0px rgba(185, 185, 185, 0.28);
    padding: 35px;
    background-color: #fff;
    border-radius: 15px;
}
.slide_2_container {
    overflow: visible;
    max-width: 1500px;
    margin: auto;
}
.slide_2_mkbox .item a {
    font-size: 20px;
    font-weight: bold;
    color: #333333;
    line-height: 16px;
}
.slide_2_mkbox .item a em {
    color: #4285f4;
    font-style: normal;
}
.slide_2_mkbox .item img {
    width: 52px;
    height: 46px;
}
.slide_2_mkbox .item p {
    font-size: 12px;
    font-weight: 500;
    color: #8C8D9E;
    line-height: 12px;
    margin-top: 13px;
}
/*  <=786 */
.html-box {
    margin-top: -100px;
    position: relative;
    padding-bottom: 25px;
}
.mrxu_link {
    padding: 5px;
    box-shadow: 0 0 29px 0 rgba(185,185,185,40%);
    background-color: rgb(245, 245, 245);
    border-radius: 15px;
    display: flex;
    flex-wrap: wrap;
}
.onenav-menu-box-out {
    width: 33.33333%;
    text-align: center;
    box-sizing: border-box;
    padding: 3px;
}
.onenav-menu-box {
    justify-content: center;
    display: flex;
    align-items: center;
    height: 70px;
    flex-flow: column;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.menu-circle {
    position: relative;
    border-radius: 100%;
}
.menu-circle-icon {
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: rgba(25, 133, 255, .26);
    border-radius: 100%;
    z-index: 1;
    right: -1px;
    top: -1px;
}
.onenav-front {
    font-size: 25px !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    position: relative;
    z-index: 2;
}
.menu-circle-icon .onenav-front {
    font-size: 25px;
}
.onenav-menu-title {
    font-size: 15px;
}
@media (max-width: 768.99px) {
    .html-box {
        margin-top: -88px;
        position: relative;
        padding-bottom: 15px;
    }
}
.io-black-mode{
    .slide_2_mkbox{
        background-color: #2c2e2f;
    }
    .slide_2_mkbox .item a{
        color: #aeb1b6;
    }
    .mrxu_link{
        background-color: #2c2e2f;
    }
    .onenav-menu-box{
        background: #303334;
    }
}
// header content end

图标伙计们自己修改。基本应该就能用了，有问题可以留言。