5

キーボードでアクセス可能なメニューを探しているときに、この質問に出くわしました。その答えとして、CSS ドロップダウン メニューhttp://jsfiddle.net/cfWpE/があります。Javascriptなしでサブメニューを表示するため:hoverに、アイテムではなくメニューのアンカーでスタイリングを使用しているようですが、方法がわかりません。<ul>

CSS で私よりも優れている誰かが、これがどのように機能するかを説明できますか? これを 3 レベルのメニューに拡張したいのですが、2 レベルの仕組みを理解していないと難しいでしょう。

明確にするために編集：

実際に私を混乱させているのはキーボード部分ではありません。現在のフォーカス リンクの更新をタブで移動することは理解しています:focusが、これらの要素に適用されていると思われる唯一の CSS ルールは次のとおりです。

ul.menu li.list a.category:hover,
ul.menu li.list a.category:focus,
ul.menu li.list a.category:active {
    margin-right:1px;
    background: black;
}

margin-right を 1 ピクセルに設定すると親が表示される仕組みがわかりません<li>。

4

1 に答える 1

16

これは、ドロップダウンメニューを実現するための興味深いテクニックです。

リストアイテム.listのネガティブは非常に高くmargin-top、幅は250px。です。これにより、コンテンツがブラウザのビューポートの外に配置されます。子アンカーa.categoryは、まったく同じ値の正のマージントップを持っているため、通常の位置にあるかのようにユーザーに表示されます。a.categoryこれで、との両方ul.submenuがfloat:left適用されました。そのため、サブメニューはアンカーの下ではなく、アンカーの横に表示されます。（ただし、マージントップがないため、「非表示」のままです）両方の要素（a.categoryおよびul.submenu）には幅があり、幅が。125pxの親に完全に適合します。ホバーすると、アンカーが追加されますli250px1pxマージン。これにより、両方の要素が幅が広すぎて親コンテナに左右に収まらないため、フロートされたサブメニューが改行に分割され、アンカーの下に突然表示されます-TADA：-D

私の説明に従っていただければ幸いです。そうでない場合は、どの部分を明確にする必要があるかを尋ねてください;）

これを第3レベルに拡張することはできません。通常のcss-menuでとを使用しdisplay:block;ますhide。ただし、絶対測位を使用して、top値を非常に高い負の値から0ホバリング時に切り替えることができます。これにより、同じ効果が得られます。

一般的に、私はこれを注意して使用します。一部の検索エンジンは、負の余白またはテキストインデントによって隠されているテキストをブラックハットSEOと見なし、そのためにペナルティを課す場合があります。Googleがこれを通常のドロップダウンメニューとして認識するのに十分賢い可能性はありますが

于 2012-10-01T16:22:48.220 に答える