5

次の機能を備えたメニューを実装しようとしています。

  • 水平;
  • 等幅のメニュー項目。
  • メニュー項目はページ幅全体に広がっています (左側に群がっているだけではありません)。
  • 動的 (css ルールは事前定義された項目数に依存すべきではありません);
  • 項目が縦に並んだドロップダウン 2 番目のレベル。
  • 純粋な CSS (JS なし!)。

これは、私が見ている完璧なメニューを表しているようです。

私は美しいテクニックを使ってそれを作ることにほとんど成功しましたdisplay: table-cell;（簡単にするためにタグは省略されています）：

<ul>
    <li>Menu item</li>
    <li>
        Expandable ↓
        <ul>
            <li>Menu</li>
            <li>Menu item</li>
            <li>Menu item long</li>
        </ul>
    </li>
    <li>Menu item</li>
    <li>Menu item</li>
</ul>

ul {
    display: table;
    table-layout: fixed;
    width: 100%;
}

li {
    display: table-cell;
    text-align: center;    
}

li:nth-child(even){
    background-color: lightblue;    
}

li:nth-child(odd){
    background-color: lightskyblue;    
}

li ul { display: none; }

li:hover ul {
    display: block;
    position: absolute;
}

li:hover ul li {
    display: block;
}

唯一の問題は、サブメニュー項目がページ幅いっぱいに表示され、部分的にブラウザ ウィンドウの外に出て、水平スクロールバーが強制的に表示されることです。

ガッ！StackOverflow で画像を投稿できません。JSFiddle で実際にテストしてみてください: http://jsfiddle.net/6PTpd/9/

float: left; clear: both;に追加することでこれを克服できli:hover ul liます。しかし、そうすると、サブメニュー項目の幅が異なります:

フィドル: http://jsfiddle.net/6PTpd/10/

...または幅width: 15%;: http://jsfiddle.net/6PTpd/12/

どちらの修正も見苦しく、等幅の問題も水平スクロールバーの問題も解決しません。

UPDこの投稿をブラッシュアップしているときに、スクロールバーの問題の解決策を見つけました。li:hover ul幅を 0 に設定します。ただし、これにより、サブメニュー項目の幅を絶対値で指定する必要があります。:( http://jsfiddle.net/6PTpd/13/を参照

また、このソリューションは、最後のメニュー項目が展開されたときにうまくいかない場合があります。画面の幅によっては、ページがウィンドウよりも広く表示される場合があります: http://jsfiddle.net/6PTpd/15/

質問:

  1. 水平スクロールバーを有効にせずに、サブメニュー項目を親と同じ幅で表示するにはどうすればよいですか?
  2. 投稿の冒頭で説明したすべての前提条件を備えたメニューを作成できる別の CSS 手法はありますか?

多くの例を見つけましたが、それらのそれぞれは非伸縮性 (項目を左にフロートさせる) または非動的 (事前定義された数の項目から取得したサイズを使用します。たとえばwidth: 20%、5 つの第 1 レベルの項目のそれぞれに対して、または、さらに悪いことに、絶対サイズを使用しています!)。

4

2 に答える 2

2

これは最善の方法ではありませんが、解決策は次のとおりです: http://jsfiddle.net/6PTpd/17/

CSS の面白いところは、熟練者でさえ、CSS でできる新しいことを常に見つけていることです。そういう意味ではすごい言語です。だからこそ、あなたが間違っていたことを学ぶことができるように、私はあなたにそのフィドルを与えました（それは主に絶対的な位置付けでした.BTW）。しかし、知っておくべきいくつかの抜け穴もあります。

それでは、なぜその JSFiddle のコードを使用すべきではないのかを説明しましょう。最初の問題は、それが使用することdisplay: noneです。スクリーン リーダーは表示されていないテキストを読み上げないため、これは問題です。(詳細はこちら: http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/ )

2 つ目の問題は、ホバー時に表示されることです。タッチスクリーンがますます普及している世界では、ホバーはもはや最良の選択肢ではありません.

必要に応じて引き続き使用できますが、欠点について知っておく必要があると考えました.

TL;DR: スクリーン リーダーとタッチ スクリーンのサポートが問題である場合は、別のオプションを探すことをお勧めします。

于 2012-09-06T14:44:42.663 に答える
0

特に HTML5 と CSS3 を使用している場合は、HTML と CSS コーディングを使用して完璧なメニューを作成する方法がたくさんあり、インターネットを検索すると多くの例を見つけることができます。2 番目の簡単な方法は、Sothink DHTML メニューやhttp://css3menu.comなど、コーディングを容易にするプログラムを使用することです。

于 2012-09-06T23:52:28.930 に答える