CODEWITHSUNDEEP
phpjquerycssmenu
nicorellius
nicorellius

Reputation: 4043

Navigation with CSS and PHP - Image Based Hover Menu (jQuery)

I have a menu that is image based (one yellow and one blue, for example). I designed the buttons in Illustrator and then converted to PNG files. Right now, I'm using CSS for hovering affects.

So when I hover over the image, it changes. So this is good (because it works), but its far from perfect (that's why I'm here)... One of my buttons in CSS looks like this:

.home_menu, .about_menu, .video_menu, .demo_menu, .contact_menu {
    float: left;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: 10px;
    width: 100px;
    height: 34px;
    display: block;
}

.home_menu {        
    background: transparent url('../images/buttons/home_but.png');
}

.home_menu:hover {
    background-image: url('../images/buttons/home_but_hov.png');
}

The HTML is like started out like so:

<div id="main_menu">
    <a href="index.php" class="home_menu" title="Home"></a>
    <a href="index.php/about" class="about_menu" title="About"></a>
    <a href="index.php/videos" class="video_menu" title="Videos"></a>
    <a href="index.php/demo" class="demo_menu" title="Demo"></a>
    <a href="index.php/contact" class="contact_menu" title="Contact"></a>
</div>

So basically I'm changing the CSS background image for each class.

Two questions. First, I'm trying to get each menu to be the blue version when on that page. So I wrote a PHP function to do this (in a class), just in case I want to avoid JavaScript. It looks like this:

// Display table and loop through links and images from array
public function print_navigation($image_dir, $ds, $page_nav, $page_nav_alt, $menu) {

    $current_file = explode('/', $_SERVER['PHP_SELF']);
    $current_page = $current_file[count($current_file) - 1];
    $current_page;
    //$i = 0;

    foreach ($page_nav as $key => $value) {

        $menu_output .= '<a href="';
        $menu_output .= $key;
        $menu_output .= '" id="';
        $menu_output .= $menu[$key];
        $menu_output .= '" style="background: transparent url(';

        if ($current_page == $key) {
            $menu_output .= $image_dir . $ds . $page_nav_alt[$key];
        }
        else {
            $menu_output .= $image_dir . $ds . $page_nav[$key];
        }

        $menu_output .= ');"';
        $menu_output .= '></a>';

        $i++;
    }

    echo $menu_output; 
}

It seems to work for the Home page ($home variable), but not for the others. I have variables like this (arrays and variables in another file, truncated for brevity):

$menu = array(
    $home => 'home_menu',
    ...);

$page_nav_ylw = array(
    $home => $home_but_ylw,
    ...);

$page_nav_blu = array(
    $home => $home_but_blu,
    ...);

Then I have all the images in variables, referenced to in the arrays, eg, $home_but_ylw refers to the PNG for that button.

The PHP function is a bit odd, because I use the $key for two arrays, which I'm sure is bad. But I'm having a hard time getting it to work otherwise.

Second question is: is there any reason I can't add JavaScript (like jQuery) right on top of this to get me the hover effects so that I can remove it from the CSS? Ideally I'd like to display the buttons with a PHP loop that also handles current page and then do the hover affects with jQuery.

Sorry for the long post. Hope it makes sense.

Thanks in advance!

Upvotes: 0

Views: 1535

Answers (2)

nicorellius
nicorellius

Reputation: 4043

Based on this answer, I was able to find a work around to my problem:

PHP menu navigation

Basically, I used the GET method to get the selected class. This worked nicely. I consolidated my CSS, and was able to get this thing working.

Here is what it turned out like, for one link:

<?php $class = $_GET['selected_tab']; ?>
<div id="main_menu">
    <a href="index.php/?selected_tab=home" id="home_menu" title="Home"
        class="<?php if(strcmp($class, 'home') == 0) {echo 'selected';} ?>"></a>

CSS like so:

#home_menu {
    background: transparent url('../images/buttons/home_but.png');
}

#home_menu:hover, #home_menu.selected {
    background-image: url('../images/buttons/home_but_hov.png');
}

Next step is to convert to jQuery.

Thanks Mike GB for your help but it wasn't quite what I was looking for.

Upvotes: 0

Mike GB
Mike GB

Reputation: 178

If you were planning on serving your pages dynamically then I think jQuery would be a much better option. However, if your links are going to separate pages then try something this:

    function printNav($Page = "home"){

    $HTML = "<a href=\"index.php\" class=\"MenuItem HomeMenuItem"; if($Page == "home"){ $HTML .= " ActiveNav"; } $HTML .= "\" title=\"Home\"></a>";
    $HTML .= "<a href=\"#\" class=\"MenuItem"; if($Page == "about"){ $HTML .= " ActiveNav"; } $HTML .= "\" title=\"About\"></a>";
    $HTML .= "<a href=\"#\" class=\"MenuItem"; if($Page == "video"){ $HTML .= " ActiveNav"; } $HTML .= "\" title=\"Videos\"></a>";
    $HTML .= "<a href=\"#\" class=\"MenuItem"; if($Page == "demo"){ $HTML .= " ActiveNav"; } $HTML .= "\" title=\"Demo\"></a>";
    $HTML .= "<a href=\"#\" class=\"MenuItem"; if($Page == "contact"){ $HTML .= " ActiveNav"; } $HTML .= "\" title=\"Contact\"></a>";
     echo $HTML;
}

On each separate page:

<div id="main_menu">
    <?php printNav("home"); ?>
</div>

CSS:

.ActiveNav {
    background-image: url('../images/buttons/blue_bg.png');
}
.MenuItem {
    float: left;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: 10px;
    width: 100px;
    height: 34px;
    display: block;
}

.HomeMenuItem {        
    background: transparent url('../images/buttons/home_but.png');
}

.HomeMenuItem:hover {
    background-image: url('../images/buttons/home_but_hov.png');
}

EDIT: If you wanted a different image for each button - I would suggest using a generic button background and hover and putting the text and icons on top of it.

Upvotes: 1

Related Questions