jQueryでHOVERした以外の文字が薄くなる縦型ナビに背景色変更も加味

最近制作した案件にて採用したHOVER以外のボタンが薄くなる縦型ナビについて解説をば。
今回参考にさせていただいたのは、webOpixelさんの記事「jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種」内の「8.マウスオーバー以外のボタンを薄くする。」であります。深謝。

メインナビのみの縦型ナビ

HTML

<ul id="mainNavi">
    <li><a href="#">works</a></li>
    <li><a href="#">projects</a></li>
    <li><a href="#">bibliography</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">about</a></li>
</ul>

※URLは見やすさのために#に置き換えて省略。

CSS

#mainNavi {
    width: 192px;    ・・・・1：必須
    text-transform: uppercase;    ・・・・2：任意
    border-bottom: dotted 1px #BAC3C9;    ・・・・3：任意
}
#mainNavi li {border-top: dotted 1px #BAC3C9;}    ・・・・4：任意
#mainNavi li a {
    display: block;    ・・・・5：必須
    padding: 0.8em 0.5em 0.5em;    ・・・・6：必須
}

CSS指定の留意点：

1. width指定をしないとwidth: 100%;に同じとなり可能な限りの幅になる。
2. 今回のナビではラテン文字全てを大文字に指定したので。
3. 今回は各ナビ上下に境界線を4.にてtop側で指定、これではナビの最後のみbottomの境界線が指定できないのでここで指定。
4. 今回は各ナビ上下に境界線をtop側で指定。
5. この指定で<a>タグをブロック要素にし、ナビの余白を含んだ背景に色が付くようにしている。
   （逆にしないと、<a>タグはインライン要素のままで、リンク文字部分のみに背景色が付くだけで且つ上下パディングが隣接行やボーダーラインに被ってしまう）
6. ワタクシは極力高さ指定しない主義なので、その代わりにパディングにてリンク文字周りの余白を指定している（上記CSSの最終行がそれ）。

jQuery

$(function() {
    var nav = $('#mainNavi li a');
    nav.hover(
        function(){
            nav.not(this).stop().animate({color : '#D1D7DB'},700);
        },
        function () {
            nav.not(this).stop().animate({color : '#3E4051'},700);色
        }
    );
});

※参考：「jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種」
内の「8.マウスオーバー以外のボタンを薄くする。」より

not(this)がミソということらしい。これでHOVERした以外のナビ文字が薄くなる。

HOVER時に背景色も変更させるための改造

この改造のポイントは、背景色の変更はCSSではなく、全てjQueryにて行なうということ。具体的には以下の通り、元の背景色と背景色変更のscriptを上記既出のjQueryに追加。

$(function() {
    $('#mainNavi li a').hover(
        //HOVER時
        function(){
            $('#mainNavi li a').not(this).stop().animate({color : '#D1D7DB', backgroundColor : '#fff'},700);
            //HOVERした以外のナビの文字色と背景色
            $(this).stop().animate({color : '#0099B5', backgroundColor : '#F4F5F6'},700);
            //HOVERしたナビの文字色と背景色
        },
        //HOVERが外れた時
        function () {
            $('#mainNavi li a').not(this).stop().animate({color : '#3E4051', backgroundColor : '#fff'},700);
            //HOVERした以外のナビの文字色と背景色
            $(this).stop().animate({color : '#3E4051', backgroundColor : '#fff'},700);
            //HOVERしたナビの文字色と背景色
        }
    );
});

そして、参考元のjQueryでは「var nav = $('#mainNavi li a');」と変数にしていたのを止めた（ヤメないと上手く作動しなかったので。その理由はワタクシの未熟ゆえ良く解らない…）。

サブナビ追加の縦型ナビ

HTML

<ul id="mainNavi">
    <li><a href="#">works</a>
        <ul class="sbNavi">
            <li><a href="#">web design</a></li>
            <li><a href="#">graphic design</a></li>
            <li><a href="#">goods</a></li>
            <li><a href="#">letter carving</a></li>
        </ul>
    </li>
    <li><a href="#">projects</a>
        <ul class="sbNavi">
            <li><a href="#">event calendar</a></li>
            <li><a href="#">letterpress map</a></li>
            <li><a href="#">line museum</a></li>
            <li><a href="#">moji shop</a></li>
            <li><a href="#">glossary</a></li>
            <li><a href="#">language & writing</a></li>
        </ul>
    </li>
    <li><a href="#">bibliography</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">about</a></li>
</ul>

※URLは見やすさのために#に置き換えて省略。

サブナビ用CSSの追加

#mainNavi {
    width: 192px;
    text-transform: uppercase;
    border-bottom: dotted 1px #BAC3C9;
}
#mainNavi li {border-top: dotted 1px #BAC3C9;}
#mainNavi li a {
    display: block;
    padding: 0.8em 0.5em 0.5em;
}
.sbNavi {
 font-size: 11px;
 padding-left: 3em;
}

追加といっても見栄え調整用のみで、ナビの動作に関与するものではない。

jQuery

…は何もせず。今回のHTMLでのclass指定・id指定の場合、単純にサブナビを追加してもこのjQueryの動作が反映される、というのがもう1つのポイント。

完成、そしてデモの公開

こんな感じで、HOVERした以外の文字が薄くなり且つ背景色変更も加味された縦型ナビの完成。デモは以下のボタンから。

DEMO

---