DUX主题修改移动端增加底部导航功能-蚂蚁资源

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

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

蚂蚁资源DUX主题修改移动端增加底部导航功能插图

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 .= '<li class=' . $is_current_item . '><a href="' . $url . '">' . $item->title . '</a>';

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

$output .= '</li>';

}
}
//移动菜单
function mobile_the_menu($location = 'mobilenav')
{
echo wp_nav_menu(array('theme_location' => $location,
'container' => '',
'container_class' => '',
'items_wrap' => '<ul> %3$s </ul>',
'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文件,在之前加入如下代码:

//输出内容 https://www.daimadog.com/6247.html
<?php
echo '<nav class="m-menubar">';
mobile_the_menu();
echo '</nav>';
?>

搞定,保存所有文件,主题设置开启移动底部导航,去wordpress后台主题菜单设置导航内容,刷新看看效果吧。菜单加图标这个问题不要问我了,主题作者写过教程 的,自己去看吧。

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"www.antziyuan.com",如遇到无法解压的请联系管理员!

蚂蚁资源 » DUX主题修改移动端增加底部导航功能

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
该资源仅供学习和研究传播,大家请在下载后24小时内删除,一切关于该资源商业行为与我们无关。 请勿将该软件进行商业交易、转载等行为,该软件只为研究、学习所提供,该软件使用后发生的一切问题与本站无关。
提示下载完但解压或打开不了?
最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
找不到素材资源介绍文章里的示例图片?
对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
蚂蚁资源
大家都喜欢的资源网站!
  • 49会员总数(位)
  • 793资源总数(个)
  • 0本周发布(个)
  • 0 今日发布(个)
  • 181稳定运行(天)

提供最优质的资源集合

立即查看 了解详情
升级SVIP尊享更多特权立即升级