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

Question

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

执行此操作的最佳方法是什么，以便我可以将其全部写入单个标题页并为每个页面调用它，但仍保留停用当前页面链接和切换图像的能力？

Answer 1

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

Answer 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; }

Answer 3

我会继续假设你有 jQuery

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