html - 選択したページでアクティブなリンクが強調表示された、各レベルの画像の上下リンクを含むサブメニューを備えた垂直ナビゲーション

Question

私が行った次のCSS垂直ナビゲーションメニューがあります。ロールオーバー用に親カテゴリの高さ 30px の上下の画像があり、高さ 25px のメニュー ロールオーバーの 2 番目と 3 番目のレベルの個別の上下の画像があります。

レベルごとに、連続するカテゴリがない場合、異なるタイプのアップとダウンのイメージがあります。

私が何日も苦労してきた3つの領域を除いて、問題なく動作し、どこが間違っているのかわからないようです.

1つ目は、各レベルのテキストが何らかの理由でどんどん小さくなっていることです.2つ目は、3番目のレベルでは、すべての画像が連続したカテゴリがあるかのように上下の画像を表示していることです。カテゴリが最初、2番目、または3番目のカテゴリで選択されている場合、それらのリンクを強調表示したままにして、その領域にいることをユーザーに示す方法が見つからないようです。

私は何日も夢中になっているので、誰かがこれを理解できることを願っています. 前もって感謝します。

以下の現在のコードを見つけてください（画像領域では、使用している画像を理解するために画像の目的を説明しました）：

HTML:

        <div id="nav">
            <ul class="menu">
                <li><a href="/" title="">Home</a></li>
                <li>
                    <a href="/" title="">Home</a>
                    <ul class="sub-menu">
                        <li><a href="/" title="">Home</a></li>
                        <li><a href="/" title="">Home</a></li>
                    </ul>
                </li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
                <li>
                    <a href="/" title="">Home</a>
                    <ul class="sub-menu">
                        <li><a href="/" title="">Home</a></li>
                        <li>
                            <a href="/" title="">Home</a>
                            <ul class="sub-sub-menu">
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                            </ul>
                        </li>
                        <li><a href="/" title="">Home</a></li>
                        <li>
                            <a href="/" title="">Home</a>
                            <ul class="sub-sub-menu">
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                            </ul>
                        </li>
                        <li><a href="/" title="">Home</a></li>
                    </ul>
                </li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
                <li>
                    <a href="/" title="">Home</a>
                    <ul class="sub-menu">
                        <li><a href="/" title="">Home</a></li>
                        <li>
                            <a href="/" title="">Home</a>
                            <ul class="sub-sub-menu">
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                            </ul>
                        </li>
                        <li><a href="/" title="">Home</a></li>
                        <li>
                            <a href="/" title="">Home</a>
                            <ul class="sub-sub-menu">
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                            </ul>
                        </li>
                        <li><a href="/" title="">Home</a></li>
                    </ul>
                </li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
                <li>
                    <a href="/" title="">Home</a>
                    <ul class="sub-menu">
                        <li><a href="/" title="">Home</a></li>
                        <li>
                            <a href="/" title="">Home</a>
                            <ul class="sub-sub-menu">
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                            </ul>
                        </li>
                        <li><a href="/" title="">Home</a></li>
                        <li>
                            <a href="/" title="">Home</a>
                            <ul class="sub-sub-menu">
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                            </ul>
                        </li>
                        <li><a href="/" title="">Home</a></li>
                    </ul>
                </li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
            </ul>
        </div>

CSS:

#nav {
    float:left;
    width:200px;
    z-index:1;
}
#nav ul.menu, #nav ul.menu > ul.sub-menu, #nav ul.menu > ul.sub-sub-menu {
    display:block;
    width:200px;
    margin:0;
    padding:0;
    list-style-type: none;
}
#nav ul.menu > li {
    float: left;
    display:block;
    width:200px;
    height:30px;
    font-size:0.9em;
    line-height:2.2em;
    margin-bottom:1px;
}

#nav ul.menu ul.sub-menu > li , #nav ul.menu ul.sub-sub-menu > li {
    float: left;
    display:block;
    width:200px;
    height:25px;
    font-size:0.7em;
    line-height:2.2em;
}

#nav li a {
    display:block;
    width:200px;
    color:#FFF;
    text-decoration:none;
    font-weight:bold;
    text-transform:uppercase;
    list-style-type:none;
}

#nav ul.menu > li > a {
    background: transparent url('../../parent-category-with-submenus.png');
    display:block;
    width:200px;
    height:30px;
    margin-bottom:1px;
}

#nav ul.sub-menu > li > a, #nav ul.sub-sub-menu > li {
    background: transparent url('../../second-third-categories-with-submenus.png');
    display:block;
    width:200px;
    height:25px;
    margin-bottom:3px;
}

#nav ul.sub-menu > li:hover > a:only-child, #nav ul.sub-sub-menu > li:hover > a {
    background: transparent url('../../second-third-categories-with-NO-submenus-ROLLOVER.png');
    display:block;
    width:200px;
    height:25px;
    margin-bottom:3px;
}

#nav ul.menu ul ul li {
    float: none;
    list-style-type: none;
}
#nav li > ul {
    display: none;
    list-style-type: none;
}
#nav li:hover > ul {
    position: absolute;
    display:block;
    width:200px;
    padding:0;
    margin-top:0px;
    margin-left:192px;
}
#nav li:hover > ul.sub-menu  {
    position: absolute;
    display:block;
    width:200px;
    padding:0;
    margin-top:-40px;
    margin-left:198px;
}
#nav li:hover > ul.sub-sub-menu  {
    position: absolute;
    display:block;
    width:200px;
    padding:0;
    margin-top:-30px;
    margin-left:198px;
}

Answer 1

問題＃1：このルールがあるため、サブメニューでテキストが小さくなります

#nav ul.menu ul.sub-menu > li , #nav ul.menu ul.sub-sub-menu > li {
    ...
    font-size:0.7em;
    ...
}

一方、最初のレベルのアイテムのデフォルトは

#nav ul.menu > li {
    ...
    font-size:0.9em;
    ...
}

サブメニューのフォントサイズ宣言を削除するか、値をinherit

問題＃2

画像がないためテストできませんでした。これが問題の原因かどうかはわかりませんが> a、この CSS ルール セレクターの最後にが欠けているようです。

#nav ul.sub-menu > li > a, #nav ul.sub-sub-menu > li {
    background: transparent url('../../second-third-categories-with-submenus.png');
    ...
}

問題＃3

メニュー項目を強調表示するには、ホバー状態で背景色を設定するだけで、ユーザーがサブメニューを閲覧している間、それらは強調表示されたままになります

#nav ul li:hover{
    background:red;
}

Answer 2

フォントサイズ

sを使用しているため、フォントサイズが小さくなりますem。Anemは相対単位です。ベース フォント サイズが20pxで、使用している場合0.75em、親がベース 20px フォント サイズを使用する子要素のフォント サイズは15px(20x0.75=15) になります。その子の子 (孫) は子のフォント サイズで始まり、その15pxフォント サイズは11.25px(15x0.75=11.25) になります。以下の jsFiddle では、テキストをすべてli16px に設定しています。

アップとダウンの画像

私はこれに関する正確な問題を把握することを気にしませんでしたが、CSSのこの部分には多くのクラフトがあります。liその中にサブメニューがあるクラスをに追加します。のようなもの.has-sub-menu。.menu > .has-sub-menu > a次に、soや などのアンカー タグをターゲットにします.sub-menu > .has-sub-menu > a。以下の jsFiddle も参照してください。

HTML

<div id="nav">
    <ul class="menu">
        <li><a href="/" title="">Home</a></li>
        <li class="has-sub-menu">
            <a href="/" title="">Home</a>
            <ul class="sub-menu">
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
            </ul>
        </li>
     </ul>
</div>

CSS

.menu > .has-sub-menu > a {
     background-image: url(img-one.png);
}
.sub-menu > .has-sub-menu > a {
     background-image: url(img-two.png);
}

ナビゲーションの強調表示

liこれは、各タグまたはアンカー タグにクラスを追加しない限り、CSS では実行できません。ページの名前の行に沿って何かを追加し、各ページに同じまたは類似の名前のボディ クラスを追加します。

HTML

<!-- your code -->
<body class="products">
     <!-- more of your code -->
     <div id="nav">
          <ul class="menu">
               <li class="products"><a href="#">Products</a></li>
               <li class="about"><a href="#">About</a></li>
               <!-- more links -->
          </ul>
          <!-- more links -->
     </div>
     <!-- more of your code -->
</body>

上記の例では、productsページを表示しています。aboutページの body タグのクラスを に置き換えますabout。最終的に、これを body タグに追加する必要はありませんが、他の先祖要素に追加する必要があります。しかし、body タグは適切なクリーンなソリューションであり、クラスが相互にカプセル化されるようにするのに役立ちます。

次に、CSS を使用してそのようにリンクをターゲットにすることができます。

CSS

/* non-active */
#nav li {
     color: white;
     background-color: red;
}

/* active */
.products .products,
.about .about {
     color: red;
     background-color: blue;
}

上記が実行できない場合は、PHP、ASP、または利用可能なサーバー側言語を介して軽いプログラミングを行う必要があると思います. JavaScript を使用することもできます。これに対する答えは、単純な StackOverflow 検索でも見つけることができます。

以下のフィドルは、上記のソリューションの 3 つの問題すべてに対処します。jQuery も少し追加したので、切り替えてナビゲーションの強調表示を試すことができます。

http://jsfiddle.net/u2V8v/