1

最初はメガドロップダウンナビゲーションを作成する方法を検討していたので、ネットを調べて、各ドロップダウンの幅と位置を定義するのが最適であることに気付きました。理解できなかった場合は申し訳ありませんが、js.fiddleも見つかりました。

ドロップダウンナビゲーション用のJSフィドル：http：//jsfiddle.net/Pnn6V/9/。

ただし、ナビゲーションの見出し（たとえば、ホーム、5列など）は、固定ピクセルで分散されているため、均等に分散されていないことに気付きました。そのため、どうすれば見出しを均等に広げることができるかを調査しました。それから私は実際にCSS表示を使用することによって見つけました：テキストとインラインで正当化することで私はトリックを行うことができます。混乱してすみません。しかし、私もこれのためのjsフィドルを見つけました。

cssを使用してナビゲーションを均等に分散するためのJSフィドル：http：//jsfiddle.net/NGLN/dqBNr/3/

spanタグとjustifyプロパティを追加してそれらを組み合わせるのに疲れました。また、表示をインラインとインラインブロックに変更しましたが、すべてが台無しになりました。

この2セットのコーディングを組み合わせるために私が何ができるか誰かが何か考えを持っているかどうか疑問に思いましたか？どうもありがとう。私が話していることに疑問がある場合は、言い換えることができるように、私に知らせてください。ありがとう。

4

2 に答える 2

1

したがって、見出しは完全に広がっています。変更すると、ドロップダウンが奇妙にずれることについて話していると思います。この問題は、次のルールが原因で発生しています。

#menu li:hover .dropdown_1column
{
    left:-841px;
    top:auto;
}
#menu li:hover .dropdown_2columns
{
    left:-2px;
    top:auto;
} 
#menu li:hover .dropdown_3columns
{
    left:-736px;
    top:auto;
}
#menu li:hover .dropdown_4columns
{
    left:-248px;
    top:auto;
}  
#menu li:hover .dropdown_5columns {  
    left:-110px;  
    top:auto;  
}

これを修正するには、いくつかの方法があります。1 つは、JavaScript/jQuery を使用して onhover イベントにアタッチし、左を正しい位置 (#menu の左) に設定することです。

もう 1 つの優れた方法は、CSS の position プロパティを最大限に活用することです。このjsfiddleが正常に動作するようになりました。次の変更を加えました。

  • position:relative;に追加#menu
  • position:relative;から削除#menu li
  • position:absolute;に追加.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns
  • 特定のピクセル値を持っていleft:0px;たすべてのホバー ルール (例: ) に を設定します。#menu li:hover .dropdown_1column

これはposition:absolute;、ドロップダウンの が、以前のようにメニュー項目に対してではなく、メニューの位置に配置されるためです。

于 2012-08-21T01:39:34.717 に答える
0

の要素width: 100%は、正当化されたインラインブロックの兄弟である必要があります。あなたの場合、それはの中になければなりませんul。ここでそれを見てください：http：//jsfiddle.net/dqBNr/21/

于 2012-08-21T02:25:16.183 に答える