我的目标是调整/替换现有的wordpress PHP菜单代码,以codepen中的html / css / js菜单结构为起点：
Home / Portfolio / About并在Portfolio结构中下降,另一页有Home / Portfolio projects.
简而言之,我已经在script-calls.PHP中注册了mynewmenu.js文件,其顺序如下
JS：
// mynewmenu implementation
jQuery(function($){
var height,index,prevIndex
$('nav ul li').mouSEOver(function(e){
//Set the aesthetics (similar to :hover)
$('nav ul li').removeClass('hovered');
$(this).addClass('hovered');
//Gets relevant data required for scrolling of menuRight
height = $("#menuRight").css("height").replace('px','');
index = $(this).index();
//If the category button (from the navlist) has changed
if (index != prevIndex){
$("#menuRight").stop();
$("#menuRight").animate({"scrollTop":height*index},800,'eaSEOutBounce'); //This requires jQuery UI for easing options.
prevIndex = index;
}
});
});
我创建了所需的菜单结构(将不同的菜单分配给不同的页面,你会看到here)我已经确定了管理现有菜单结构的PHP：
<!-- Start Header -->
...
<div class="myrow max_width ">
<div class="small-5 <?PHP if ($header_style == 'style2') { echo 'medium-8'; } else { echo 'medium-4';} ?> columns menu-holder">
<?PHP $full_menu_true = ($menu_mobile_toggle_view == 'style2' && $header_style == 'style2');?>
<?PHP if ($full_menu_true) { ?>
<nav id="full-menu" role="navigation">
<?PHP if ($page_menu) { ?>
<?PHP wp_nav_menu( array( 'menu' => $page_menu,'depth' => 2,'container' => false,'menu_class' => 'full-menu','walker' => new thb_mobileDropdown ) ); ?>
<?PHP } else if(has_nav_menu('nav-menu')) { ?>
<?PHP wp_nav_menu( array( 'theme_location' => 'nav-menu','walker' => new thb_mobileDropdown ) ); ?>
<?PHP } else { ?>
<ul class="full-menu">
<li><a href="<?PHP echo get_admin_url().'nav-menus.PHP'; ?>">Please assign a menu from Appearance -> Menus</a></li>
</ul>
<?PHP } ?>
/* I think that <div id='menuRight'> html sequences *translated*
in *PHP* should begin here in a conditional manner: *if* we find ourself on the
Home page,should be activated Home / Portfolio / About sequence and also if we
are on the Portfolio page,we should receive the menu 2,generated by Home / Portfolio
projects sequence. More details below. */
</nav>
<?PHP } ?>
<?PHP if ($header_search != 'off') { do_action( 'thb_quick_search' ); } ?>
<?PHP if ($header_cart != 'off') { do_action( 'thb_quick_cart' ); } ?>
<a href="#" data-target="open-menu" class="mobile-toggle<?PHP if (!$full_menu_true) { ?> always<?PHP } ?>">
<div>
<span></span><span></span><span></span>
</div>
</a>
</div>
</div>
</header>
<!-- End Header -->
此时,我的问题是,如何在header.PHP中实现以下html序列,这些html序列生成链接到菜单按钮的翻转图像,请记住,有不同的部分,每个菜单的部分如下所示.主页/作品集/关于：
<nav>
<ul>
...
</ul>
<div id='menuRight'>
<div>
Home
<img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'>
</img>
</div>
<div>
Portfolio
<img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
</img>
</div>
<div>
About
<img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'>
</img>
</div>
</div>
</nav>
和菜单2,Home / Portfolio项目：
<nav>
<ul>
...
</ul>
<div id='menuRight'>
<div>
Home
<img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'>
</img>
</div>
<div>
Fiva
<img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
</img>
</div>
<div>
Caterham
<img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'>
</img>
</div>
<div>
Mobile
<img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
</img>
</div>
</div>
</nav>
LE：我必须提到,菜单按钮激活的翻转图像效果足以(并且有意义)使其可用,仅在网站的Home page和Portfolio page上.我认为当我们打开一个项目页面(例如FIVA)并将鼠标放在另一个项目按钮上时,实现相同的效果可能非常棘手.
LE2：关于翻转图像,我不是在寻找一个花哨的PHP代码,它应该抓住最后一个项目的预览;一个PHP代码,允许我预定义图像源链接,就像我们在上面的html菜单部分,将是很好的,考虑到这些图像不会经常被替换的事实.
LE3：纯实验,请纠正我,我只是在思考,使用include PHP function在header.PHP中调用两个单独的html文件(包括在这些上面描述的菜单1和2部分)可能是一个变通方法的开始？
<!-- Start Header -->
...
<div class="myrow max_width ">
...
<ul class="full-menu">
<li><a href="<?PHP echo get_admin_url().'nav-menus.PHP'; ?>">Please assign a menu from Appearance -> Menus</a></li>
</ul>
<?PHP } ?>
<?PHP
/* But there still should be a PHP code,that call the
html sections *if* we are on Homepage or Portfolio page.
Something like:
PHP instructions,if Home page */
include('menu1section.html');
// and also PHP instructions,if Portfolio page
include('menu2section.html');
?>
</nav>
<?PHP } ?>
<?PHP if ($header_search != 'off') { do_action( 'thb_quick_search' ); } ?>
...
</div>
</header>
<!-- End Header -->
有什么想法吗？谢谢,
我不是wordpress dev,但在我看来你需要一种方法来检测活动类别/帖子/页面？你正在…通过查看网站很难理解你的数据结构.
原文链接：https://www.f2er.com/php/136967.html<!-- Start Header -->
...
<div class="myrow max_width ">
...
<ul class="full-menu">
<li><a href="<?PHP echo get_admin_url().'nav-menus.PHP'; ?>">
Please assign a menu from Appearance -> Menus
</a></li>
</ul>
<?PHP } ?>
<?PHP
$thisCat = get_category(get_query_var('cat'));
switch ($thisCat->name) {
case 'Home':
echo "Home test";
break;
case 'Portfolio':
echo "portfolio test";
break;
case 'About Us':
echo "About Us test";
break;
}
?>
....
<!-- End Header -->
修改了我的答案,让你更好地了解我所指的测试.
