如何正确构建突出当前页面的导航菜单

Posted 2023-04-13

【中文标题】如何正确构建突出当前页面的导航菜单

【英文标题】：How to properly build a navigation menu that highlights the current page

【发布时间】：2010-12-05 11:45:48

【问题描述】：

我已经为一个基于icant.co.uk 的相当简单的网站设置了一个菜单。这很简单，可能只有 5 页。小站点主要是mysql浏览器，几个表使用MATE。有一个 common.php 文件，其中包含页眉和页脚 html，所以我把代码放在下面。

下面的代码突出显示菜单上的当前页面。它很难看，我相信一定有更好的方法来做到这一点。

感谢您的帮助，谢谢！

这是我的代码

<?php
        $currentFile = Explode('/', $_SERVER["PHP_SELF"]);
        $currentFile = $currentFile[count($currentFile) - 1];

        if ($currentFile == "orders.php")
                echo '<li id="active"><a href="orders.php" id="current">Orders</a></li>';
        
        else
                echo '<li><a href="orders.php">Orders</a></li>';
        

        if ($currentFile == "customers.php")
                echo '<li id="active"><a href="customers.php" id="current">Customer List</a></li>';
        
        else
                echo '<li><a href="customers.php">Customer List</a></li>';
        

        if ($currentFile == "order_details.php")
                echo '<li id="active"><a href="order_details.php" id="current">Order Details</a></li>';
        
        else
                echo '<li><a href="order_details.php">Order Details</a></li>';
        
?>

更新 对于那些好奇的人，下面是工作代码！

<?php
    $currentFile = Explode('/', $_SERVER["PHP_SELF"]);
    $currentFile = $currentFile[count($currentFile) - 1];

    // easier to manage in case you want more pages later
    $pages = array(
        array("file" => "orders.php", "title" => "Orders"),
        array("file" => "order_details.php", "title" => "Order Details"),
        array("file" => "customers.php", "title" => "Customer List")
    );
    $menuOutput = '<ul>';
    foreach ($pages as $page) 
       $activeAppend = ($page['file'] == $currentFile) ? ' id="active"' : "";
       $currentAppend = ($page['file'] == $currentFile) ? ' id="current' : "";
       $menuOutput .= '<li' . $activeAppend . '>'
                   .  '<a href="' . $page['file'] . '"' . $currentAppend . '">' . $page['title'] .'</a>'
                   .  '</li>'; 
               
    $menuOutput .= '</ul>';

    echo $menuOutput;

?>

【参考方案1】：

我通常做的是（对于所有元素...）：

<li class="<?php if (condition) echo 'selected'; ?>">content part, links, etc.</li>

【讨论】：

+1，肯定比呼应大量（大部分）冗余标记更有用。

我同意 karim79，我不是专业人士。关于在 1 行中获取当前页面的任何建议？

@shaiss - 我没有反对你的解决方案 - 我是在称赞答案 :) 不要误会我的意思。

我明白了。我也推荐答案！

@shaiss ：我认为您获取当前页面的方式很好，并且由于您的链接是硬编码的，我看不出您可以在那里获得什么。除非您将链接和链接文本放在数组或对象中并循环访问它们，将循环中的每个链接与 $currentFile 进行比较。

【参考方案2】：

不确定这是否是您的意思，但这样您就可以摆脱这个丑陋的 if-else：

$currentFile = Explode('/', $_SERVER["PHP_SELF"]);
$currentFile = $currentFile[count($currentFile) - 1];

// easier to manage in case you want more pages later
$pages = array(
    array("file" => "orders.php", "title" => "Orders"), 
    array("file" => "customers.php", "title" => "Customer List")
);
$menuOutput = '<ul>';
foreach ($pages as $page) 
   $activeAppend = ($page['file'] == $currentFile) ? ' id="active"' : "";
   $menuOutput .= '<li' . $activeAppend . '>'
               .  '<a href="' . $page['file'] . '">' . $page['title'] .'</a>'
               .  '</li>'; 
           
$menuOutput .= '</ul>';

echo $menuOutput;

【讨论】：

这就是我一直在寻找的东西，现在正在测试它。出于某种原因，我在 for ($pages as $page) Parse error: syntax error, unexpected T_AS, expecting ';'

上遇到语法错误

酷，成功了。我必须添加 id="current" 部分。感谢您的帮助！

【参考方案3】：

一种更简洁的方法（如果您启用了短标签）是：

<li class="<?= $test=="your_page_name" ? 'selected' : 'not_selected'?>">Link Name</li>

它执行与第一个答案相同的功能，只是更简洁。

【讨论】：

BraedenP，这很有趣，但我有点迷茫。我的服务器确实支持短标签，但我不理解 $test 或 'selected' : 'not_selected' 部分。感谢您的帮助！

基本上，它检查变量 $test 是否等于“your_page_name”值。如果是这样，它会回显问号后面的文本（或您选择的函数）。如果 $test 不等于“your_page_name”，则回显文本或运行位于冒号后面的函数。它被称为“三元运算符”ca3.php.net/ternary#language.operators.comparison.ternary

感谢您的澄清，我会再调查一下。

【参考方案4】：

这是我的一个项目中的一个 sn-p。它是旧的丑陋代码，并使用表格，但您可以轻松地将这个想法用于 div 和更清晰的标记。诀窍是如果当前页面与它的 url 匹配，则使导航使用不同的类。

    <td><a class='LeftSubNavLink<?php if($_SERVER["SCRIPT_NAME"] == "/admin/billing_home.php")print("Current");?>' href='<?php print(MAIN_URL); ?>admin/billing_home.php'>Billing Home</a></td></tr>
    <td><a class='LeftSubNavLink<?php if($_SERVER["SCRIPT_NAME"] == "/admin/billing_schedules.php")print("Current");?>' href='<?php print(MAIN_URL); ?>admin/billing_schedules.php'>Billing Schedules</a></td></tr>
    <td><a class='LeftSubNavLink<?php if($_SERVER["SCRIPT_NAME"] == "/admin/billing_outstanding.php")print("Current");?>' href='<?php print(MAIN_URL); ?>admin/billing_outstanding.php'>Outstanding</a></td></tr>
    <td><a class='LeftSubNavLink<?php if($_SERVER["SCRIPT_NAME"] == "/admin/billing_list.php")print("Current");?>' href='<?php print(MAIN_URL); ?>admin/billing_list.php'>List All</a></td></tr>
    <td><a class='LeftSubNavLink<?php if($_SERVER["SCRIPT_NAME"] == "/admin/billing_history.php")print("Current");?>' href='<?php print(MAIN_URL); ?>admin/billing_history.php'>Billing History</a></td></tr>
    <td><a class='LeftSubNavLink<?php if($_SERVER["SCRIPT_NAME"] == "/admin/billing_statement_history.php")print("Current");?>' href='<?php print(MAIN_URL); ?>admin/billing_statement_history.php'>Statement History</a></td></tr>