导航栏和无序列表



我有一个带子列表的导航栏。我在网页顶部使用这个导航栏作为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>

我页面顶部的水平导航栏会列出"主页|个人|专业","个人"one_answers"专业"上会有下拉菜单。这个导航栏很容易包含在所有页面上,以获得统一的体验。不太难。

然而,如果用户实际导航到某个主(或"父")页面(例如"主页"、"个人"或"专业"),我希望在该页面的一侧有第二个垂直导航栏,并链接到该页面的"子">

例如,如果用户转到"个人"页面,应该有一个侧导航栏,链接到"关于我"one_answers"联系信息"。如果用户导航到"专业",侧边栏应该显示"活动"one_answers"简历"的链接。如果用户决定返回"主页"页面,侧边栏应显示"个人"one_answers"专业"。(尽管如果它也显示"主页",那将是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来确定您所在的页面,并为不同的页面打印出不同的HTML。我把你要求的最简单的版本放在一起。使用相同的原理对此进行扩展。您可以使用$_SERVER超全局查找当前URL。

<?php
// See if current URL ends with "personal.html"
$personal = preg_match('/personal.html$/',$_SERVER['REQUEST_URI']);
?>

<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="personal.html">Personal</a>
<?php if (!$personal) print '<ul>'; ?>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="contact.html">Contact Info</a></li>
<?php if (!$personal) print '</ul>'; ?>
</li>
<li><a href="professional.html">Professional</a>
<ul>
<li><a href="activities.html">Activities</a></li>
<li><a href="resume.html">Resume</a></li>
</ul>
</li>
</ul>
</nav>

我在这里所做的只是删除个人页面的<ul>标记,这将使两个嵌套的<li>与其他导航栏元素内联。你需要对此进行扩展以适应你需要的设计。

相关内容

  • 没有找到相关文章

最新更新