javascript - スプライトを使用したCSSナビゲーションメニュー:現在のページのタブ/ボタンを強調表示するには?

Question

Apple の Web サイトにあるものと非常によく似た、スプライトを使用して CSS ナビゲーションメニューを作成しました。ホバーとマウスダウン（すべてCSSを使用）で画像上の正しい位置に変更されるように、うまく機能していますが、ボタンをクリックすると強調表示されたままにする方法を理解するのに苦労しています。「クリックされた」外観のスプライトに行がありますが、選択されたものを処理するために知っている CSS がありません。どのボタンがクリックされたかに応じて、ボタンが「クリックされた」バージョンに変わります。jQueryを使用していくつかのjavascriptソリューションを調査しましたが、もっと良い方法があるかもしれないと思いました.

私が使用しているスプライトは、ここにある Apple のものと非常によく似ています。

どんな助けでも大歓迎です。ありがとう。

より詳しい情報：

したがって、現在、私のメニューはhtmlで次のようになっています。

    <ul id="global_nav">
        <li id="home_nav"><a href="<%= Url.Action("Index", "Home") %>"></a></li>
        <li id="systems_nav"><a href="<%= Url.Action("Index", "Home")%>"></a></li>
        <li id="users_nav"><a href="<%= Url.Action("Index", "Home")%>"></a></li>
        <li id="utilities_nav"><a href="<%= Url.Action("Index", "Utilities")%>"></a></li>
        <li id="reference_nav"><a href="<%= Url.Action("Index", "Home")%>"></a></li>
        <li id="metrics_nav"><a href="<%= Url.Action("Index", "Home")%>"></a></li>
        <li id="help_nav"><a href="<%= Url.Action("Index", "Home")%>"></a></li>
        <li id="info_nav"></li>
    </ul>

私のCSSはすべてここにあります（申し訳ありませんが、長いです）：

#global_nav 
{
    background: url("../Images/nav_bar.png");
    height: 38px;
    width: 979px;
    padding: 0;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
}

#global_nav li
{
    float: left;
}

#global_nav a 
{
    height: 38px;
    display: block;
}

#global_nav #home_nav 
{
    width: 118px;
}

#global_nav #home_nav a:hover 
{
    background: url("../Images/nav_bar.png") 0px -37px no-repeat;
}

#global_nav #home_nav a:active
{
    background: url("../Images/nav_bar.png") 0px -74px no-repeat;
}

#global_nav #systems_nav
{
    width: 116px;
}

#global_nav #systems_nav a:hover 
{
    background: url("../Images/nav_bar.png") -118px -37px no-repeat;
}

#global_nav #systems_nav a:active
{
    background: url("../Images/nav_bar.png") -118px -74px no-repeat;
}

#global_nav #users_nav
{
    width: 117px;
}

#global_nav #users_nav a:hover 
{
    background: url("../Images/nav_bar.png") -234px -37px no-repeat;
}

#global_nav #users_nav a:active
{
    background: url("../Images/nav_bar.png") -234px -74px no-repeat;
}

#global_nav #utilities_nav
{
    width: 117px;
}

#global_nav #utilities_nav a:hover 
{
    background: url("../Images/nav_bar.png") -351px -37px no-repeat;
}

#global_nav #utilities_nav a:active
{
    background: url("../Images/nav_bar.png") -351px -74px no-repeat;
}

#global_nav #reference_nav
{
    width: 117px;
}

#global_nav #reference_nav a:hover 
{
    background: url("../Images/nav_bar.png") -468px -37px no-repeat;
}

#global_nav #reference_nav a:active
{
    background: url("../Images/nav_bar.png") -468px -74px no-repeat;
}

#global_nav #metrics_nav
{
    width: 117px;
}

#global_nav #metrics_nav a:hover 
{
    background: url("../Images/nav_bar.png") -585px -37px no-repeat;
}

#global_nav #metrics_nav a:active
{
    background: url("../Images/nav_bar.png") -585px -74px no-repeat;
}

#global_nav #help_nav
{
    width: 117px;
}

#global_nav #help_nav a:hover 
{
    background: url("../Images/nav_bar.png") -702px -37px no-repeat;
}

#global_nav #help_nav a:active
{
    background: url("../Images/nav_bar.png") -702px -74px no-repeat;
}

#global_nav #info_nav
{
    width: 163px;
}

#global_nav #info_nav a:hover 
{
    background: url("../Images/nav_bar.png") -819px -37px no-repeat;
}

#global_nav #info_nav a:active
{
    background: url("../Images/nav_bar.png") -819px -74px no-repeat;
}

score 2 · Accepted Answer

CSSは、それがどのページにあるかを知らないか、気にしません。それを追跡し、関連するマークアップを自分で出力する必要があります。

score 2 · Accepted Answer

自己回答:

これを行うために、私は基本的に Apple がサイトで行っている方法に従いました。スプライトの幅で div を設定し、この div 内に順序付けられていないリストを追加しました。各リスト項目は、ボタンバーに沿ったボタンを表します。各リスト項目内には、ボタンがクリックされたときに移動したいページへの href を示す単一のアンカータグがあります。CSS では、次のように、含まれている div の下のリスト項目の下にあるすべてのアンカータグを参照するクラスがあります。

#globalheader #globalnav li a
{
    float: left;
    height: 0;
    overflow: hidden;
    padding-top: 36px;
    width: 118px;
    background-image: url("../Images/nav/nav_bar.png");
    background-repeat: no-repeat;
}

これにより、各アンカータグの背景画像が定義されます。ここで、アンカータグごとに背景の位置を定義する必要があるため、右のボタンが表示されます。アンカータグごとに CSS があります。そのうちの 1 つの CSS を次に示します。

#globalheader #globalnav li#systems_nav a 
{
    background-position: -118px 0;
}

もちろん、ボタン上のホバー (a:hover) とボタン上のマウスダウン (a:active) を処理するための CSS がありますが、最初の質問では、ボタンの選択された外観を維持する方法を扱いました。あるページのm。CSSから始めます。ボタンが 6 つある場合は、さらに 6 つの CSS クラスを作成し、それぞれが特定のクラスを持つコンテナー div に関連します。コンテナーが持つそのクラスは、現在表示しているページに基づいています (後で説明します)。また、その CSS クラスの定義内で、背景の位置を変更するアンカータグを指定します。例として、ページの「Systems」ボタンをクリックすると、「systems」のコンテナ div にクラスが (javascript を介して) 動的に追加され、結果としてこの CSS が適用されます。

#globalheader.systems #globalnav li#systems_nav a
{
    background-position: -118px -108px !important;
}

背景位置は、ボタンの「クリックされた」外観をカバーする位置です。#globalheader div に「システム」のクラスが必要であることを指定する宣言の .systems 部分に注意してください。この場合、1 つのアンカータグのみの背景位置が変更されます。ご想像のとおり、「systems_nav」li のすぐ下にあります。ボタンバーのボタンごとに、これらのクラスの 1 つを作成しました。2 番目のトリックは、現在のページに応じてクラスを div に動的に追加する処理を行う JavaScript を作成することでした。これを行うには、次のような隠し div を各ページに配置します。

<div id="page_section" title="systems" style="display: none;"></div>

表示されず、これらの各 div がサイトの各ページに持つ一般的な ID があり、現在のページに固有のタイトルがあります。私のjavascriptファイルでは、これを書きました（jqueryを使用しています）：

var $globalheader = $('#globalheader'); // container div to add the class to
var $page_section = $('#page_section'); // div whose title is the current page

$globalheader.addClass($page_section.attr('title'));

出来上がり。「systems」がクラス名として「globalheader」div に追加され、正しい CSS クラスが適用され、Systems ボタンだけがクリックされたように見えます。

Apple の Web サイトを見ると少し手間がかかりましたが、これが彼らのやり方であり、私は彼らを信頼しています。それは私のために働いた。

私と同じ問題を抱えている他の誰かに役立つことを願っています。

score 1 · Accepted Answer

PHP / ASP / JSPのようなサーバー側のプログラミング/スクリプト言語を使用していますか？もしそうなら、CSSクラスを条件付きでレンダリングすることができます。PHPの例を次に示します（$_SERVER変数の1つによってPHPで要求されたページを取得できます）。

<a href="somepage"<?php echo ($currentpage == 'somepage' ? ' class="active"' : ''); ?>>somepage</a>

サーバーサイド言語を使用しない場合、唯一の手段はJS/jQueryです。オンロード中に次のようなことを行います（JSでリクエストされたページを解析することで取得できますwindow.location）：

$('a[href="' + currentpage + '"]').addClass('active');

CSSクラスは、明らかに「アクティブ」になるようa.activeにシフトする必要があります。background-position

javascript - スプライトを使用したCSSナビゲーションメニュー:現在のページのタブ/ボタンを強調表示するには?

3 に答える 3

Related

Reference