导航栏和无序列表

时间:2014-02-16 16:37:53

标签: php css navigation html-lists navbar

我有一个带有子列表的导航栏。我将此导航栏用于我网页顶部的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>

我页面顶部的水平导航栏会列出“Home | Personal | Professional”,“Personal”和“Professional”会显示下拉菜单。此导航栏可轻松包含在所有页面中,以获得统一的体验。不是太难。

如果用户实际导航到主要(或“父”)页面之一(例如“主页”,“个人”或“专业”),我希望有第二个,垂直该页面一侧的导航栏,其中包含指向该网页“儿童”的链接。

例如,如果用户转到“个人”页面,则应该有一个侧面导航栏,其中包含指向“关于我”和“联系信息”的链接。如果用户导航到“专业”,则该侧栏应显示指向“活动”和“恢复”的链接。如果用户决定返回“主页”页面,则侧栏应显示“个人”和“专业”。 (虽然如果它也显示“Home”将是100%罚款 - 也许这样会更容易吗?)

虽然我可以为每个页面硬编码一个新的<nav>,但我已经有了一个无序的列表结构,并且想要使用它。任何想法如何做到这一点,或者是否有更好的方法来做到这一点?


也许我想动态生成(通过PHP的魔力)<nav>的第二个实例,它是<nav id="mainnavbar">的一种部分副本,如上所列,但包含一个嵌套的无序列表,而不是一切。然后我可以分别定位和风格化每个导航栏。

(请注意,只有Home,Personal和Professional页面应该有侧边栏导航菜单,因为只有他们有“子”页面。“子”页面不应该有子菜单。)

实质上,我应该有以下内容:

对于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>

对于所有其他页面,应该没有侧边栏导航。 (或者我应该有一些默认导航栏作为占位符?)

但是,我不确定在两个不同的id部分中对于无序列表是否具有相同的<nav>会有问题。

再次感谢您的帮助!

1 个答案:

答案 0 :(得分:1)

您可以使用PHP来确定您所在的页面,并为不同的页面打印出不同的HTML。我把你要求的最简单的版本放在一起。使用相同的原则来扩展它。您可以使用$_SERVER超全局查找当前网址。

<?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>与其他导航栏元素内联。您需要扩展它以适应您需要的设计。