如何在带有鼠标悬停和当前页面图像的单个 php 页面中制作导航栏？答案

【问题标题】：How to make a nav bar in a single php page with mouseovers and current page images?如何在带有鼠标悬停和当前页面图像的单个 php 页面中制作导航栏？
【发布时间】：2009-10-27 15:48:31
【问题描述】：

我一直在制作具有三种状态的导航页面：正常、悬停和当前页面。通常我只使用一个简单的鼠标悬停脚本，并在每个页面上包含导航代码，这样我就可以使当前页面的链接处于非活动状态，并使用不同的第三个图像。这是一种草率的做法。

最好的方法是什么，这样我就可以将所有内容写在一个标题页中并为每个页面调用它，但仍然保留停用当前页面链接和切换图像的能力？

【问题讨论】：

标签： php javascript navigation mouseover

【解决方案1】：

把它放在一个单独的头文件中，然后在 PHP 中调用 include("header.php");或无论您的文件名称是什么。然后，您可以使用 $_SERVER["REQUEST_URI"] 获取当前页面，并以此更改行为。

【讨论】：

【解决方案2】：

我在 reddit 上从用户 Grigri 那里得到了很好的回答。

头元素的PHP代码

<?php
if (!isset($selectedItem)) {
    $selectedItem = false;
}
$items = array(
    'home'     => array('title' => 'Home', 'url' => '/'),
    'lookbook' => array('title' => 'Look Book', 'url' => '/lookbook.html'),
    'random'   => array('title' => 'Random Article', 'url' => '/article.php?id=random')
);
$idx = 0;
echo '<ul id="menu">';
foreach($items as $key => $item) {
    echo sprintf('<li class="item%d">, $idx++);
    if ($key == $selectedItem) {
        echo sprintf('<a href="%s">%s</a>', $item['url'], $item['title']);
    }
    else {
        echo sprintf('<b>%s</b>', $item['title']);
    }
    echo '</li>';
}
echo '</ul>';
?>

调用头部元素的PHP代码

<?php $selectedItem = 'home'; include 'menu.php'; ?>

如下布局menu.png

 80px                120px              60px
+---------------+-------------------+-----------------+
| Home (Normal) | Lookbook (Normal) | Random (Normal) | 30px
+---------------+-------------------+-----------------+
| Home (Hot)    | Lookbook (Hot)    | Random (Hot)    | 30px
+---------------+-------------------+-----------------+
| Home (Current)| Lookbook (Current)| Random (Current)| 30px
+---------------+-------------------+-----------------+

CSS

ul#menu {
    overflow: hidden;
    list-style: none;
}

#menu li {
    float: left;
    margin: 0; padding: 0;
}

#menu li a, #menu li b {
    height: 30px;
    overflow: hidden;
    float: left;
    display: block;
    text-indent: -9999px;
    background: url(../img/menu.png) no-repeat 0 0;
}

#menu li.item0 a { background-position:    0px 0; width:  80px; }   
#menu li.item1 a { background-position:  -80px 0; width: 120px; }   
#menu li.item2 a { background-position: -200px 0; width:  60px; }   

#menu li.item0 b { background-position:    0px -60px; width:  80px; }   
#menu li.item1 b { background-position:  -80px -60px; width: 120px; }   
#menu li.item2 b { background-position: -200px -60px; width:  60px; }   

#menu li.item0 a:focus { background-position:    0px -30px; }   
#menu li.item1 a:focus { background-position:  -80px -30px; }   
#menu li.item2 a:focus { background-position: -200px -30px; }   

#menu li.item0 a:hover { background-position:    0px -30px; }   
#menu li.item1 a:hover { background-position:  -80px -30px; }   
#menu li.item2 a:hover { background-position: -200px -30px; }

【讨论】：

【解决方案3】：

我会继续假设你有 jQuery

var check_current = function(itm){
  if(itm.href == window.location.pathname){
    itm.className = 'current_link';
  }
}
jQuery.each($('.nav_link'), check_current);

【讨论】：