Question

我有一个基于图像的菜单（例如，一个黄色和一个蓝色）。我在Illustrator中设计了按钮，然后转换为PNG文件。现在，我正在使用CSS来悬停影响。

因此，当我将鼠标悬停在图像上时，它会发生变化。所以这很好（因为它有效），但它远非完美（这就是为什么我在这里）......我在CSS中的一个按钮看起来像这样：

.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');
}

HTML就像是这样开始的：

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

所以基本上我正在改变每个班级的CSS背景图片。

两个问题。首先，我试图让每个菜单在该页面上成为蓝色版本。所以我写了一个PHP函数（在一个类中），以防万一我想避免使用JavaScript。它看起来像这样：

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

它似乎适用于主页（$home变量），但不适用于其他主页。我有这样的变量（另一个文件中的数组和变量，为简洁而截断）：

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

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

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

然后我将所有图像都放在变量中，在数组中引用，例如，$home_but_ylw指的是该按钮的PNG。

PHP函数有点奇怪，因为我将$key用于两个数组，我肯定是坏的。但是我很难让它继续工作。

第二个问题是：是否有任何理由我无法在此基础上添加JavaScript（如jQuery）来获取悬停效果以便我可以将其从CSS中删除？理想情况下，我想显示带有PHP循环的按钮，该循环也处理当前页面，然后悬停影响jQuery。

对不起，很长的帖子。希望它有意义。

提前致谢！

Answer 1

如果你打算动态地提供你的页面，那么我认为jQuery会是一个更好的选择。但是，如果你的链接要分开页面，那么试试这个：

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

在每个单独的页面上：

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

编辑：如果你想为每个按钮添加不同的图像 - 我建议使用通用按钮背景并悬停并将文本和图标放在其上。

Answer 2

基于这个答案，我找到了解决问题的方法：

PHP menu navigation

基本上，我使用GET方法来获取所选的类。这很好用。我整合了我的CSS，并且能够让这件事工作。

以下是一个链接的结果：

<?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：

#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');
}

下一步是转换为jQuery。

感谢Mike GB的帮助，但这并不是我想要的。

使用CSS和PHP导航 - 基于图像的悬停菜单（jQuery）

2 个答案: