问题描述
我的目标是调整/替换现有的wordpress php 菜单代码，以 html / css / js codepen中的菜单结构：
并在作品集中下载结构，另一个页面上有。
简而言之，我已在 script-calls.php > mynewmenu.js 文件，包含以下顺序：
js ：
// mynewmenu实现
jQuery（function（$）{
var height，index，prevIndex
$（'nav ul li'）。mouseover（function（e）{
//设置美学（类似于：hover）
$（'nav ul li'）。removeClass（'hovered '）;
$（this）.addClass（'hovered'）;
//获取滚动menuRight所需的相关数据
height = $（＃menuRight） .css（height）。replace（'px'，''）;
index = $（this）.index（）;
//如果类别按钮（来自如果（index！= prevIndex）{
$（＃menuRight）。stop（）;
$ b $（＃menuRight）。animate（navlist） {scrollTop：height * index}，800，'easeOutBounce'）; //这需要jQuery UI fo r缓冲选项。
prevIndex = index;
}
}）;
}）;
我创建了所需的菜单结构（为不同的页面分配不同的菜单，一个href =http://goo.gl/xGBMtI =nofollow>这里），我已经确定了管理现有的 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菜单持有者>
<？php $ full_menu_true =（$ menu_mobile_toggle_view =='style2'&&& $ header_style =='style2'）;？>
<？php if（$ full_menu_true）{？>
< nav id =full-menurole =navigation>
<？php if（$ page_menu）{？>
<？php wp_nav_menu（array（'menu'=> $ page_menu，'depth'=> 2，'container'=> false，'menu_class'=>'全菜单' 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'=>'全菜单'，'walker'=> new thb_mobileDropdown））; ？>
<？php} else {？>
< ul class =完整菜单>
< li>< a href =<？php echo get_admin_url（）。'nav-menus.php';？>>请分配外观菜单 - >菜单和LT; / A>< /锂>
< / ul>
<？php}？>
/ *我认为< div id ='menuRight'> HTML序列*翻译*
在* php *应该从这里以条件方式开始：*如果*我们在
主页上找到我们自己，应该激活Home / Portfolio /关于顺序，如果我们
在投资组合页面上，我们应该收到菜单2，由Home / Portfolio
项目序列生成。以下更多细节。 * /
< / 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-menuclass =mobile-toggle<？php if（！$ full_menu_true）{？> always< php}？>> ;
< div>
< span>< / span>< span>< / span>< span>< / span>
< / div>
< / a>
< / div>
< / div>
< / header>
<！ - 结尾标题 - >
此时，我的问题是，我如何实现头.php 下面的 html 序列生成链接到菜单按钮的翻转图像，请记住有不同的部分，每个菜单都带有他部分如下。主页/ Portfolio /关于：
< nav>
< ul>
...
< / ul>
< div id ='menuRight'>
< div>
主页
< img src ='http：//images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'>
< / img>
< / div>
< div>
投资组合
< img src ='http：//www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
< / img>
< / div>
< div>
约
< 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>
主页
< 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：我必须提一下，菜单按钮激活的翻转图像效果就足够了（并且合理）只有在和。我认为，当我们打开一个项目页面时，实现相同效果可能非常棘手（让我们假设）并将鼠标悬停在另一个项目按钮上。
LE2：关于翻转图像，我不想看看应该预览预览的 php 代码最后一个项目什么的;一个 php 代码可以让我预先定义像上面的 html 菜单部分中的图像源链接，很好，考虑到这些图像不会经常被替换的事实。
LE3：纯粹的实验，请纠正我，我只是在想，用来调用两个单独的 html 中的文件（包括上面介绍的菜单1和2部分）可能是解决方法的开始？
<！ - 开始标题 - >
...
< div class =myrow max_width>
...
< ul class =full-menu>
< li>< a href =<？php echo get_admin_url（）。'nav-menus.php';？>>请分配外观菜单 - >菜单和LT; / A>< /锂>
< / ul>
<？php}？>
/ *但是仍然应该有一个php代码，如果我们在主页或投资组合页面上，则会调用
html部分。
例如：
如果主页* /
包含（'menu1section.html'）;
//以及php说明，如果Portfolio页面
包含（'menu2section.html'）;
？>
< / nav>
<？php}？>
<？php if（$ header_search！='off'）{do_action（'thb_quick_search'）; }？>
...
< / div>
< / header>
<！ - 结尾标题 - >
有什么想法？谢谢，
我不是wordpress开发者，但在我看来，您需要一种方法来检测活动类别/后/页？你正在......很难从查看网站来了解你的数据结构。
<！ - Start Header - >
...
< div class =myrow max_width>
...
< ul class =full-menu>
< li>< a href =<？php echo get_admin_url（）。'nav-menus.php';？>>
请从外观 - >指定一个菜单。菜单
< / a>< / li>
< / ul>
<？php}？>
<？php
$ thisCat = get_category（get_query_var（'cat'））;
switch（$ thisCat-> name）{
case'Home'：
echoHome test;
休息;
案例'投资组合'：
回声投资组合测试;
休息;
case'关于我们'：
回声关于我们测试;
休息;
}
？>
....
修正了我的答案，让您更好地了解我所指的测试。
my goal is to tweak/replace the existing wordpress php menu code, having as a start point, this html/css/js menu structure in codepen:
Home / Portfolio / About and going down in Portfolio structure, another page having Home / Portfolio projects.
In a few words, I've registered in script-calls.php the mynewmenu.js file with the following sequence
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;
}
});
});
I've created the desired menu structure (assigning different menus to different pages as u'll see here) and I've identified the php that manage the existing menu structure:
<!-- 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 -->
At this point, my question is, how can I implement into the header.php the following html sequences that generate the rollover images linked to the menu buttons, keeping in mind that there are different sections, each menu with his section as follow. Home / Portfolio / About:
<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>
and menu 2, Home / Portfolio projects:
<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>
I left intentionally the css out of discussion because, that's another chapter of this code tweak.
LE: I have to mention that the rollover image effect activated by the menu buttons, will be enough (and make sense) for it to be available, only on the Home page and Portfolio page of the site. I think that It could be very tricky to achieve the same effect when we have a project page opened (let's say FIVA) and have the mouse over another project button for example.
LE2: regarding the rollover images, I am not looking for a fancy php code that's supposed to grab a preview of the last project or something; a php code that allows me to predefine image source links like we have in the above html menu sections, will be just fine, taking in consideration the fact that these images will not be replaced so often.
LE3: Pure experimental, and please correct me, I was just thinking, using include PHP function to call two separate html files in header.php (including in these the above described menu 1 and 2 sections) could be the beginning of a workaround?
<!-- 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 -->
Any thoughts? Thank you,
I'm not a wordpress dev, but it seems to me you need a way to detect the active category/post/page? you are on... it's difficult to understand your data structures from looking at the website.
<!-- 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 -->
Revised my answer to give you a better idea of what test I'm referring too.
这篇关于如何在php中正确实现结构化菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！