How to make a nav bar in a single php page with mouseovers and current page images?

Question

I've been making pages with navigation with three states: normal, hover, and current page. Normally I just use a simple mouseover script, and I include the navigation code on every page so that I can make the link for the current page inactive, and a different, third image. This is a sloppy way of doing it.

What's the best way to do this so I can write it all in a single header page and call that for every page, yet still retain the ability to deactivate the link for the current page, and switching the image?

Answer 1

put it in a seperate header file, then in PHP, call include("header.php"); or whatever the name of your file is. you can then use $_SERVER["REQUEST_URI"] to get the current page, and change behavior with that.

Answer 2

I got a great answer from user Grigri on reddit.

PHP Code For Header Element

<?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 Code for calling the header element

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

Lay out menu.png as follows

 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

i'm going to go ahead and assume you have jQuery

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