0

我有一个基于图像的菜单（例如，一个黄色和一个蓝色）。我在 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 函数有点奇怪，因为我使用$keyfor 两个数组，我敢肯定这是不好的。但是我很难让它正常工作。

第二个问题是：有什么理由我不能在此之上添加 JavaScript（如 jQuery）来获得悬停效果，以便我可以将其从 CSS 中删除？理想情况下，我想用一个 PHP 循环显示按钮，该循环也处理当前页面，然后使用 jQuery 进行悬停影响。

对不起，很长的帖子。希望这是有道理的。

提前致谢！

4

2 回答 2

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

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

于 2012-07-04T01:26:03.887 回答
0

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

PHP 菜单导航

基本上，我使用 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 的帮助，但这并不是我想要的。

于 2012-07-04T05:25:24.120 回答