Как сделать навигационную панель на одной php-странице с указателями мыши и изображениями текущей страницы?

Question

Я делал страницы с навигацией с тремя состояниями: нормальный, наведение и текущая страница. Обычно я просто использую простой скрипт для наведения мыши и включаю код навигации на каждую страницу, чтобы сделать ссылку на текущую страницу неактивной, а также другое, третье изображение. Это небрежный способ сделать это.

Каков наилучший способ сделать это, чтобы я мог записать все это на одной странице заголовка и вызывать ее для каждой страницы, при этом сохраняя возможность деактивировать ссылку для текущей страницы и переключать изображение?

Answer 1

поместите его в отдельный заголовочный файл, затем в PHP вызовите include ("header.php"); или как там имя вашего файла. затем вы можете использовать $ _SERVER ["REQUEST_URI"], чтобы получить текущую страницу, и изменить поведение при этом.

Answer 2

Я получил отличный ответ от пользователя Grigri на Reddit.

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);