我的目标是调整/替换现有的wordpress php菜单代码，以codepen中的html / css / js菜单结构作为起点：
Home / Portfolio / About并进入投放组合结构，另一页有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，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>
我故意将css退出讨论，因为这是此代码调整的另一章。
LE：我必须提到，菜单按钮激活的翻转图像效果足够（并且有意义）才能使其可用，仅在Home page和Portfolio page的现场。我认为当我们打开一个项目页面（例如FIVA）并将鼠标悬停在另一个项目按钮上时，实现相同的效果可能非常棘手。
LE2：关于翻转图像，我不是在寻找一个花哨的php代码，它应该抓住最后一个项目的预览;一个php代码允许我像上面html菜单部分中那样预定义图像源链接，这将很好，考虑到这些图像不会经常被替换的事实。 / p>
LE3：纯粹是实验性的，请纠正我，我只是在思考，使用include PHP function在html中调用两个单独的header.php文件（包括上述菜单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 -->
有什么想法？谢谢，