【发布时间】：2014-02-16 16:37:53
【问题描述】：
我有一个带有子列表的导航栏。我将此导航栏用作网页顶部的 CSS 导航栏，其中包含主页面的链接和子列表中页面的下拉列表。我想使用相同的结构在我的页面侧面为子列表创建一个导航栏。
我所有的 HTML 页面在创建导航栏的 <BODY> 顶部附近都有以下行：
<?php include('navbar.php'); ?>
此导航栏的 CSS 样式在其他地方处理。
假设我的navbar.php 文件有以下内容：
<nav id="mainnavbar>
<ul id="index">
<li><a href="index.html">Home</a></li>
<li><a href="personal.html">Personal</a>
<ul id="personal">
<li><a href="aboutme.html">About Me</a></li>
<li><a href="contact.html">Contact Info</a></li>
</ul>
</li>
<li><a href="professional.html">Professional</a>
<ul id="professional">
<li><a href="activities.html">Activities</a></li>
<li><a href="resume.html">Resume</a></li>
</ul>
</li>
</ul>
</nav>
我页面顶部的水平导航栏将列出“主页|个人|专业”，并且“个人”和“专业”会有下拉菜单。这个导航栏很容易包含在所有页面上，以获得统一的体验。不是太难。
但是，如果用户实际上导航到主（或“父”）页面之一（例如“主页”、“个人”或“专业”），我希望有第二个，垂直 该页面一侧的导航栏带有指向该页面“子”的链接。
例如，如果用户进入“个人”页面，应该有一个带有“关于我”和“联系信息”链接的侧导航栏。相反，如果用户导航到“专业”，则该侧边栏应该显示指向“活动”和“恢复”的链接。如果用户决定返回“主页”页面，侧边栏应显示“个人”和“专业”。 （虽然如果它也显示“主页”会 100% 没问题——也许那样会更容易？）
虽然我可以为每个页面硬编码一个新的<nav>，但我已经有一个无序列表结构并且想使用它。有什么想法可以做到这一点，或者是否有更好的方法？
也许我想动态生成（通过 PHP 的魔力）<nav> 的第二个实例，它是上面列出的<nav id="mainnavbar"> 的一种部分副本，但包括一个嵌套的无序列表，而不是一切。然后我可以分别定位和风格化每个导航栏。
（请注意，只有主页、个人和专业页面应该有侧边栏导航菜单，因为只有它们有“子”页面。“子”页面不应该有子菜单。）
本质上，我应该有以下几点：
对于index.html，我应该有以下基于navbar.php动态生成的：
<nav id="subnavbar">
<ul id="index">
<li><a href="index.html">Home</a></li>
<li><a href="personal.html">Personal</a> </li
<li><a href="professional.html">Professional</a></li>
</ul>
</nav>
对于personal.html，我应该有以下基于navbar.php动态生成的：
<nav id="subnavbar">
<ul id="professional">
<li><a href="activities.html">Activities</a></li>
<li><a href="resume.html">Resume</a></li>
</ul>
</nav>
对于professional.html，我应该有以下基于navbar.php动态生成的：
<nav id="subnavbar">
<ul id="professional">
<li><a href="activities.html">Activities</a></li>
<li><a href="resume.html">Resume</a></li>
</ul>
</nav>
对于所有其他页面，不应有侧边栏导航。 （或者也许我应该有一些默认导航栏作为占位符？？）
但是，我不确定在两个不同的 <nav> 部分中为无序列表设置相同的 id 是否会有问题。
再次感谢您的帮助！
【问题讨论】：
标签： php css navigation html-lists navbar