网站首页添加五格导航按钮模块
效果演示
模块主要包含手机页面的模块，和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 class="external" rel="nofollow" target="_blank" href="https://nav.huliku.com/go/?url=aHR0cHM6Ly93d3cuaXhzZGguY29tL2NpcmNsZXMv" 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 class="external" rel="nofollow" target="_blank" href="https://nav.huliku.com/go/?url=aHR0cHM6Ly93d3cuOGRtbC5jb20vamluZ3Bpbnlpbmd5b25n" 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 class="external" rel="nofollow" target="_blank" href="https://nav.huliku.com/go/?url=aHR0cHM6Ly93d3cuOGRtbC5jb20vaGFvc2h1dHVpamlhbg==" 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 class="external" rel="nofollow" target="_blank" href="https://nav.huliku.com/go/?url=aHR0cDovL2Jsb2cuOGRtbC5jb20v" 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 class="external" rel="nofollow" target="_blank" href="https://nav.huliku.com/go/?url=aHR0cDovL3NvLjhkbWwuY29tLw==" 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
图标伙计们自己修改。基本应该就能用了，有问题可以留言。
暂无评论...