0

ホバーしたタブと現在のタブで色が変わるように、多層背景を使用してこのナビゲーション バー メニューをセットアップしました。ただし、これまでの配色はほとんどが緑で、同じリスト内で、タブの次の「ブロック」を青、3 番目のブロックを赤にしたいと考えています。多層化する準備ができている画像が他にもありますが、主なものはol自体にコーディングされているため、各liエントリの背景を上書きすることはできません。実際には、「ol#vin a {」および「ol#vin span {」に画像をロードしているだけです。残りのオプション (ホバー、現在など) は背景の位置のみを変更するため、多層画像は適切な状態に変換されます。

それが役立つ場合、私はこれに基づいています: http://blixt.org/articles/tabbed-navigation-using-css#section=bonus彼はタブ付きリストを持っていますが、私はそれを私の左側に垂直に下げています自分のバックグラウンド。

E: リクエストに応じて、コード スニペット:

<table width="100%" border="0" cellpadding=0 cellspacing=0><tr valign="top">
<td width="260px">
    <ol id="vin">
        <li class="au"><a href="#sc-aaaa"><span>Section A</span></a></li>
        <li class="au"><a href="#sc-bbbb"><span>Section B</span></a></li>
        <li class="au"><a href="#sc-cccc"><span>Section C</span></a></li>
        <li class="au"><a href="#sc-dddd"><span>Section D</span></a></li>
        <li class="au"><a href="#sc-eeee"><span>Section E</span></a></li>
        <li class="au"><a href="#sc-ffff"><span>Section F</span></a></li>
    </ol>
</td><td style="background:#ccc">
    <div class="content" id="sc-aaaa">
        <h2>Section A</h2>
          Content goes here!
    </div>
    <div class="content" id="sc-bbbb">
        <h2>Section B</h2>
          Content goes here!
    </div>
    <div class="content" id="sc-cccc">
        <h2>Section C</h2>
          Content goes here!
    </div>
    <div class="content" id="sc-dddd">
        <h2>Section D</h2>
          Content goes here!
    </div>
    <div class="content" id="sc-eeee">
        <h2>Section E</h2>
          Content goes here!
    </div>
    <div class="content" id="sc-ffff">
        <h2>Section F</h2>
          Content goes here!
    </div>
</td></tr></table>
activatables('section', ['sc-aaaa', 'sc-bbbb', 'sc-cccc', 'sc-dddd', 'sc-eeee', 'sc-ffff']);
</script>
</body>
</html>

そしてCSS：

ol#vin {
    list-style: none;
    margin: 0;
    padding: 0;
    font: 16px Verdana, sans-serif;
}

ol#vin li {
    margin: 0 0 0 0;
}

ol#vin a {
    color: #ccc;
    display: block;
    height: 25px;
    padding-left: 30px;
    text-decoration: none;
}

ol #vin #au a {background: url(vtabs.png) no-repeat;}
ol #vin #ma a {background: url(vtabs2.png) no-repeat;}

ol#vin a:hover {
    background-position: 0 -52px;
    color: #000;
}

ol#vin a:hover span {
    background-position: 100% -52px;
}

ol#vin li a.active {
    background-position: 0 -26px;
    color: #fff;
    font-weight: bold;
}

ol#vin li a.active span {
    background-position: 100% -26px;
}

ol#vin span {
    display: block;
    line-height: 25px;
    padding-right: 30px;
}

ol#vin #au span {background: url(vtabs2.png) 100% 0;}
ol#vin #ma span {background: url(vtabs2m.png) 100% 0;}
4

2 に答える 2

0

要素に特定のIDまたはクラスを定義すると、各IDまたはクラスの背景画像を指定できます。

オリジナル

リンクされたサンプルから：http：//blixt.org/articles/tabbed-navigation-using-css#section=bonus

<ol id="toc">
    <li><a href="#introduction" class=" inactive"><span>Introduction</span></a></li>
    <li><a href="#step-1" class=" inactive"><span>Step 1: The structure</span></a></li>
    <!-- more ... -->
</ol>

解決

HTML

<ol id="toc">
    <li id="first_li"><a href="#introduction" class=" inactive"><span>Introduction</span></a></li>
    <li id="second_li"><a href="#step-1" class=" inactive"><span>Step 1: The structure</span></a></li>
    <!-- more ... -->
</ol>

CSS

/* Usual states */
#toc li#first_li {
    background-image: url('/img/first_background.jpg');
}

#toc li#second_li {
    background-image: url('/img/second_background.jpg');
}

/* Hover states */
#toc li#first_li:hover {
    background-image: url('/img/first_background_highlight.jpg');
}

#toc li#second_li:hover {
    background-image: url('/img/second_background_highlight.jpg');
}
于 2011-11-05T19:44:42.537 に答える
0

うーん、CSS 仕様では親要素のスタイルを設定できないため、JavaScript ソリューションを使用してのみ実現できます。jQuery を使用した例:

<ul id="nav">
    <li data-color="#00f"><a href="#">Link</a></li>
    <li data-color="#0f0"><a href="#">Link</a></li>
    <li data-color="#f00"><a href="#">Link</a></li>
</ul>

そしてスクリプト：

var $nav = $("#nav");
$nav.find("li").hover(function () {
    $nav.css("backgroundColor", $(this).attr("data-color"));
}, function () {
    $nav.css("backgroundColor", "");
});
于 2011-11-05T19:46:47.297 に答える