php手机端底部导航演示,DUX主题修改移动端增加底部导航功能

2024-03-05 12:30

本文主要是介绍php手机端底部导航演示,DUX主题修改移动端增加底部导航功能,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

重要:本文最后更新于2020-04-29 08:28:43,某些文章具有时效性,若有错误或已失效,请在下方留言或联系代码狗。

有人跟我说他很喜欢网站在移动端浏览的时候,能像APP一样有个底部导航,这样做移动端用户体验会好很多,让我发一篇给DUX加个移动端底部导航功能的教程。正好之前仿themebetter的官网,做过这个功能,把代码扒出来,送给大家了。

e173f7a67531a93c3a5bc5b9e28d352d.png

DUX主题移动端增加底部导航功能修改

操作步骤

注册菜单

此功能是通过wordpress自带的菜单功能实现的,方便大家在后台修改底部导航内容。

打开functions.php文件,注意:不同主题存放函数集合文件有所不同,DUX主题请打开function-theme.php,DMD主题也是一样。

搜索函数register_nav_menus,增加一个菜单,如下所示,新增的是移动底部导航,就是那一句。

// 注册菜单 https://www.daimadog.com/6247.html

if (function_exists('register_nav_menus')){

register_nav_menus( array(

'nav' => __('网站导航', 'haoui'),

'topmenu' => __('顶部菜单', 'haoui'),

'pagenav' => __('页面左侧导航', 'haoui'),

'mobilenav' => __('移动底部导航', 'haoui')

));

}

增加主题设置

DUX的主题设置是基于option framework框架的,在其配置文件options.php中,加入一个新的配置项信息。

//添加配置项 https://www.daimadog.com/6247.html

$options[] = array(

'name' => '开启移动端底部导航',

'id' => 'is_mobile_menu',

'type' => "checkbox",

'std' => false,

'desc' => '开启后需要到菜单中设置移动底部导航内容!');

新增CSS样式

此样式需要全站加载,所以加在哪里自行决定,这里演示使用DUX的css文件夹中的main.css。在其末尾加入如下样式。

/**底部导航样式 https://www.daimadog.com/6247.html**/

.m-menubar {

display: none;

z-index: 9990;

position: fixed;

bottom: 0;

left: 0;

right: 0;

height: 60px;

background-color: #fff

}

.m-menubar:before {

content: '1';

color: transparent;

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 1px;

background-color: rgba(0, 0, 0, 0.1);

display: block;

overflow: hidden;

-webkit-transform-origin: 50% 0;

transform-origin: 50% 0;

-webkit-transform: scaleY(0.5);

transform: scaleY(0.5)

}

.m-menubar ul {

display: flex;

text-align: center

}

.m-menubar li {

flex: 1;

text-align: center;

font-size: 11px

}

.m-menubar li .iconfont {

margin-bottom: 3px;

display: block;

font-size: 22px;

font-weight: normal

}

.m-menubar li a {

display: block;

height: 60px;

padding-top: 12px;

color: #657fa2

}

.m-menubar li.active a {

color: #01CDB8

}

.m-menubar li.active a .iconfont {

color: #01CDB8

}

@media (max-width: 1024px) {

.moblemenu {

padding-bottom: 60px !important;

}

.m-menubar {

display: block

}

}

添加导航结构函数

此函数控制后台菜单设置的内容输出结构,不喜欢可以自行修改,不清楚可以查看WordPress自定义导航菜单处理类Walker

打开function-theme.php,添加如下内容:

//移动底部导航菜单类 https://www.daimadog.com/6247.html

class Mobile_Menu_Walker extends Walker_Nav_Menu

{

public function start_lvl(&$output, $depth = 0, $args = array())

{

$output .= "";

}

public function end_lvl(&$output, $depth = 0, $args = array())

{

$output .= "";

}

public function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0)

{

$is_current_item = '';

if (in_array('current-menu-item', $item->classes)) {

$is_current_item = 'active';

}

if ($item->url == '/login') {

if (is_user_logged_in()) {

$url = '/member';

} else {

$url = '/login';

}

} else {

$url = $item->url;

}

$output .= '

' . $item->title . '';

}

public function end_el(&$output, $item, $depth = 0, $args = array(), $id = 0)

{

$output .= '

';

}

}

//移动菜单

function mobile_the_menu($location = 'mobilenav')

{

echo wp_nav_menu(array('theme_location' => $location,

'container' => '',

'container_class' => '',

'items_wrap' => '

  • %3$s
',

'echo' => false,

'walker' => new Mobile_Menu_Walker()));

}

为页面添加样式

打开functions-theme.php文件,修改代码。

搜索_bodyclass函数,在很多if结构代码中,添加一个if结构,代码如下:

//php控制样式 https://www.daimadog.com/6247.html

if(_hui('is_mobile_menu')){

$class .=' moblemenu';

}

添加代码输出

修改footer.php文件,在

这篇关于php手机端底部导航演示,DUX主题修改移动端增加底部导航功能的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/776514

相关文章

mysql表操作与查询功能详解

《mysql表操作与查询功能详解》本文系统讲解MySQL表操作与查询,涵盖创建、修改、复制表语法,基本查询结构及WHERE、GROUPBY等子句,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随... 目录01.表的操作1.1表操作概览1.2创建表1.3修改表1.4复制表02.基本查询操作2.1 SE

Golang如何用gorm实现分页的功能

《Golang如何用gorm实现分页的功能》:本文主要介绍Golang如何用gorm实现分页的功能方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录背景go库下载初始化数据【1】建表【2】插入数据【3】查看数据4、代码示例【1】gorm结构体定义【2】分页结构体

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

springboot下载接口限速功能实现

《springboot下载接口限速功能实现》通过Redis统计并发数动态调整每个用户带宽,核心逻辑为每秒读取并发送限定数据量,防止单用户占用过多资源,确保整体下载均衡且高效,本文给大家介绍spring... 目录 一、整体目标 二、涉及的主要类/方法✅ 三、核心流程图解(简化) 四、关键代码详解1️⃣ 设置

SQL Server修改数据库名及物理数据文件名操作步骤

《SQLServer修改数据库名及物理数据文件名操作步骤》在SQLServer中重命名数据库是一个常见的操作,但需要确保用户具有足够的权限来执行此操作,:本文主要介绍SQLServer修改数据... 目录一、背景介绍二、操作步骤2.1 设置为单用户模式(断开连接)2.2 修改数据库名称2.3 查找逻辑文件名

苹果macOS 26 Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色

《苹果macOS26Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色》在整体系统设计方面,macOS26采用了全新的玻璃质感视觉风格,应用于Dock栏、应用图标以及桌面小部件等多个界面... 科技媒体 MACRumors 昨日(6 月 13 日)发布博文,报道称在 macOS 26 Tahoe 中

Java使用HttpClient实现图片下载与本地保存功能

《Java使用HttpClient实现图片下载与本地保存功能》在当今数字化时代,网络资源的获取与处理已成为软件开发中的常见需求,其中,图片作为网络上最常见的资源之一,其下载与保存功能在许多应用场景中都... 目录引言一、Apache HttpClient简介二、技术栈与环境准备三、实现图片下载与保存功能1.

MybatisPlus service接口功能介绍

《MybatisPlusservice接口功能介绍》:本文主要介绍MybatisPlusservice接口功能介绍,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友... 目录Service接口基本用法进阶用法总结:Lambda方法Service接口基本用法MyBATisP