0

画像ベースのメニューがあります（たとえば、1つは黄色でもう1つは青）。Illustratorでボタンをデザインし、PNGファイルに変換しました。現在、エフェクトをホバリングするためにCSSを使用しています。

したがって、画像にカーソルを合わせると、画像が変化します。したがって、これは（機能するため）良いのですが、完璧にはほど遠いです（それが私がここにいる理由です）...CSSのボタンの1つは次のようになります。

.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の背景画像を変更しています。

2つの質問。まず、そのページで各メニューを青色バージョンにしようとしています。そこで、JavaScriptを避けたい場合に備えて、これを（クラスで）行うためのPHP関数を作成しました。次のようになります。

// 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関数は少し奇妙です。なぜなら、私は$key2つの配列にforを使用しているからですが、これは間違いです。しかし、それ以外の方法で機能させるのに苦労しています。

2番目の質問は次のとおりです。CSSから削除できるようにホバー効果を取得するために、この上にJavaScript（jQueryなど）を追加できない理由はありますか？理想的には、現在のページも処理する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を統合し、これを機能させることができました。

1つのリンクについて、次のようになりました。

<?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に変換することです。

マイクGBにご協力いただきありがとうございますが、それは私が探していたものではありませんでした。

于 2012-07-04T05:25:24.120 に答える