【发布时间】：2015-10-29 22:40:00
【问题描述】：
我的目标是调整/替换现有的 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', 'depth' => 2, 'container' => false, 'menu_class' => 'full-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 序列，这些序列生成链接到菜单按钮的翻转图像，记住有不同的部分，每个菜单都有他的部分如下。主页 / 投资组合 / 关于：
<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，主页/投资组合项目：
<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>
我故意将css 排除在讨论之外，因为这是此代码调整的另一章。
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 -->
有什么想法吗？谢谢，
【问题讨论】：