wordpress调用二级导航怎么实现 100
wordpress调用二级导航怎么实现STORE下拉菜单,的二级分类目录,iPad,Galaxy,GalaxyNote......这些都是二级分类目录。1.问题:我要怎么...
wordpress调用二级导航怎么实现
STORE下拉菜单,的二级分类目录,iPad,Galaxy,Galaxy Note......这些都是二级分类目录。
1.问题:我要怎么在header.php里面使用代码调用,在前台显示出来。
2.问题:还能不能实现分类目录上传图片,两个上传图片框,一个是上传.png,一个是上传.gif的图片,图片名字相同。
下面是二级分类HTML代码: 展开
STORE下拉菜单,的二级分类目录,iPad,Galaxy,Galaxy Note......这些都是二级分类目录。
1.问题:我要怎么在header.php里面使用代码调用,在前台显示出来。
2.问题:还能不能实现分类目录上传图片,两个上传图片框,一个是上传.png,一个是上传.gif的图片,图片名字相同。
下面是二级分类HTML代码: 展开
2个回答
推荐于2016-08-30 · 知道合伙人交通运输行家
关注
展开全部
Wordpress调用二级导航的方法:
1、新建 functions.php 函数文件并添加以下代码:
<?php
//自定义菜单
register_nav_menus(
array(
‘header-menu’ => __( ‘导航自定义菜单’ ),
)
);?>
2、把导航位置的li标签都删除掉,换上调用代码:
<?php wp_nav_menu( array( ‘container’ => ”,’menu_class’ => ‘navigation’,’menu_id’ => ‘nav_sgBhgn’) ); ?>
3、添加一个jquery库,放在body开始和结束的适合的位置即可:
<script type=”text/jscript”>
$(document).ready(function(){
$(‘ul.navigation li’).hover(function(){
$(this).find(‘ul:first’).slideDown(200);//显示二级菜单,括号中的数字表示下拉菜单完全显示出来需要200毫秒。
$(this).addClass(“hover”);
},function(){
$(this).find(‘ul’).css(‘display’,’none’);
$(this).removeClass(“hover”);
});
function hide_submenu(){
$(‘ul.navigation li’).find(‘ul’).css(‘display’,’none’);//红色标注改为当前导航ul的class名称
}
$(‘ul.navigation li li:has(ul)’).find(“a:first”).append(“”);
document.onclick = hide_submenu;
});
</script>
4、使用jquery库文件加载,大家可以测试一下模板打开的速度,哪个快用那个:
谷歌加载:<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js” type=”text/javascript”></script>
百度加载:<script type=”text/javascript” src=”//libs.baidu.com/jquery/2.0.3/jquery.min.js”></script>
新郎加载:<script type=”text/javascript” src=”//lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js”></script>
5、添加CSS样式:
/* 二级菜单 */
.sub-menu{
display:none;/*初始状态下隐藏子目录*/
position:absolute;/*显示最顶层*/
}
.sub-menu li{
width:100%;/*显示子目录宽度/*针对IE6*/
clear:both;/*垂直显示*/
background:#000;/*子目录背景颜色*/
}
1、新建 functions.php 函数文件并添加以下代码:
<?php
//自定义菜单
register_nav_menus(
array(
‘header-menu’ => __( ‘导航自定义菜单’ ),
)
);?>
2、把导航位置的li标签都删除掉,换上调用代码:
<?php wp_nav_menu( array( ‘container’ => ”,’menu_class’ => ‘navigation’,’menu_id’ => ‘nav_sgBhgn’) ); ?>
3、添加一个jquery库,放在body开始和结束的适合的位置即可:
<script type=”text/jscript”>
$(document).ready(function(){
$(‘ul.navigation li’).hover(function(){
$(this).find(‘ul:first’).slideDown(200);//显示二级菜单,括号中的数字表示下拉菜单完全显示出来需要200毫秒。
$(this).addClass(“hover”);
},function(){
$(this).find(‘ul’).css(‘display’,’none’);
$(this).removeClass(“hover”);
});
function hide_submenu(){
$(‘ul.navigation li’).find(‘ul’).css(‘display’,’none’);//红色标注改为当前导航ul的class名称
}
$(‘ul.navigation li li:has(ul)’).find(“a:first”).append(“”);
document.onclick = hide_submenu;
});
</script>
4、使用jquery库文件加载,大家可以测试一下模板打开的速度,哪个快用那个:
谷歌加载:<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js” type=”text/javascript”></script>
百度加载:<script type=”text/javascript” src=”//libs.baidu.com/jquery/2.0.3/jquery.min.js”></script>
新郎加载:<script type=”text/javascript” src=”//lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js”></script>
5、添加CSS样式:
/* 二级菜单 */
.sub-menu{
display:none;/*初始状态下隐藏子目录*/
position:absolute;/*显示最顶层*/
}
.sub-menu li{
width:100%;/*显示子目录宽度/*针对IE6*/
clear:both;/*垂直显示*/
background:#000;/*子目录背景颜色*/
}
AiPPT
2024-09-19 广告
2024-09-19 广告
随着AI技术的飞速发展,如今市面上涌现了许多实用易操作的AI生成工具1、简介:AiPPT: 这款AI工具智能理解用户输入的主题,提供“AI智能生成”和“导入本地大纲”的选项,生成的PPT内容丰富多样,可自由编辑和添加元素,图表类型包括柱状图...
点击进入详情页
本回答由AiPPT提供
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询