如何在php中正确实现结构化菜单
Posted
技术标签:
【中文标题】如何在php中正确实现结构化菜单【英文标题】：How to properly implement a structured menu in php 【发布时间】：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 -->
有什么想法吗？谢谢，
【问题讨论】：
【参考方案1】：我不是 wordpress 开发人员，但在我看来，您需要一种方法来检测活动类别/帖子/页面？你在……看网站很难理解你的数据结构。
<!-- 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 -->
修改了我的答案，让您更好地了解我所指的测试。
【讨论】：
您好。不幸的是（对我来说）重新编写菜单代码非常困难，然后如果这是您的技术建议，那么将html 集成到php 转换。实际上这就是我打开线程的原因，这就是我所需要的......以某种方式将上面提到的html 部分，使用现有菜单中的条件php 函数集成到header.php 文件中。还是谢谢你。
我明白，您能否指出我上面的代码是否至少使您能够检测到用户正在查看的活动部分？一个快速的测试是修改我的包含来为每个案例语句回显一个唯一的数字......然后查看代表数字是否在每个 url 上可见。我认为您在这里唯一的解决方案是首先破解页面检测问题，然后一旦完成 - 菜单结构问题。
我很想试一试，但您能具体说明我应该将该代码放在哪里吗？不仅如此，我没有任何 home.php、portfolio.php、about-us.php 页面。我认为有一个误解，在Wordpress中，一切都是动态生成的。
就在您的头文件中，用于替换您的包含行。哈，我的代码是更多的伪代码来展示如何实现多个 UI。您必须创建 PHP 文件并将您的 和/或 放入其中...
以上代码是检测页面问题的潜在解决方案。一旦你有了一种检测你所在页面的方法，你就可以构建代码来解决自定义导航问题......一次一步！祝你好运以上是关于如何在php中正确实现结构化菜单的主要内容，如果未能解决你的问题，请参考以下文章
在这种情况下，如何在 Flutter 中正确实现 FutureBuilder？