1

更新: 水平方向の配置は解決されましたが、メニューが消えないという問題がまだあります。

更新された JSFiddle: http://jsfiddle.net/trevoray/CrPdK/7/

ナビに関して、乗り越えられない 2 つの問題に遭遇しました。誰でも見て、私を助けることができますか？

  1. 水平位。ページは中央に配置されているため、正確な位置はわかりません。私はそれを絶対にして、その親要素に基づいて絶対になると思っていましたが、機能していません。ユーザーのブラウザーの幅に関係なく、水平位置を常に同じにする必要があります。

  2. onmouseout 後にメニューが「非表示」にならない。メニューを常に非表示にする方法がわかりません。

jsFiddle は次のとおりです。

http://jsfiddle.net/trevoray/CrPdK/2/

 #nav-about { z-index:4000; position:absolute; left:186px;  display:none;}
 #nav-meetings { z-index:4000; position:absolute; left:357px; display:none;}
 #nav-journal { z-index:4000; position:absolute; left:528px;  display:none;}
 #nav-goodstuff { z-index:4000; position:absolute; left:699px; display:none;}
 #nav-members { z-index:4000; position:absolute; left:819px; display:none;}

ここに画像の説明を入力

4

2 に答える 2

0
  1. 要素をその親に対して絶対的に配置すること。親要素が必要position: relative
<div class="parent">
  <div class="absolute">
  </div>
</div>

.parent { position: relative; }
.absolute { position: absolute; top: 10px; right; 20px }

2.onmouseoutハンドラをサブメニューに配置しました。そのため、マウスでメニュー ポイントを離れると何も起こりません。サブメニューを離れると、サブメニューは非表示になります。

アップデート

私は今、実際の例を作成しました: http://jsfiddle.net/VZ7qD/1

注意事項:

  1. 実際には JavaScript は必要ありません。コメントアウトされた最後の CSS ステートメントを参照してください。これで十分ですが、CSS では表示時にアニメーションがありません。(私は個人的にslideDown/ところでslideUpデフォルトのアニメーションよりもいいと思います.)show
  2. JavaScript は、サブメニューを保持する上部のナビゲーション要素にmouseenter/mouseleaveハンドラーをバインドしています。liサブメニューはこのliアイテムの子です。
  3. すべての要素に 1 つの灰色のグラデーションを適用して背景色とグラデーションを適用し、実際には 1 つの無地の色であるグラデーション領域を追加する代わりに、目的の色の境界線のみをリンク要素に追加しました。
  4. ID を使用して、すべてのサブメニューのリンクのカスタム背景色を定義します (トップ メニュー項目の太い下枠に似ています)。
于 2013-04-01T13:29:21.510 に答える
0

あなたのフィドルを更新しました：

デモ: http://jsfiddle.net/CrPdK/3/

mouseenterおよびのmouseleave機能を参照し、他のすべての機能#Meetingsを#nav-meetings複製します。

最初の要件を理解していませんでした。

于 2013-04-01T13:26:29.107 に答える