0

シンプルな水平 1 レベルのトップ メニューのシンプルなモバイル バージョンを作成しようとしています。水平上部のナビゲーションを、最初は非表示になっているが、ユーザーが画面の右上にあるシンプルなメニュー リンクをクリックすると表示される垂直メニューに置き換えたいと思います。

実際、ウィンドウを 768px 未満に絞ると、 http: //www.janparker.co.ukでこれまでに作成したものを見ることができます。

それはほとんど美しく単純な純粋な CSS の結果です。

メニューは完全に機能しますが、ユーザーが最初に「メニュー」をクリックしてメニューをアクティブにし、次にメニューを使用せずに、メニューの外側のページ上の他のリンクをクリックすると、問題が発生します。

外部リンクは機能しません。さらに悪いことに、メニューも閉じてページがスクロールするため (自然な動作であり、望ましくない動作ではありません)、ページをずっと下にスクロールすると、この組み合わせによってユーザーの方向感覚が完全に失われます。

コードは次のとおりです。

<a id="menu-invoker" tabindex="0">Menu</a> <nav><ul><li>First menu item</li><li>second menu item</li></ul></nav> <p><a href="http://www.google.com">Some other link</a></p>

#menu-invoker:focus ~ nav {display: block;} nav {display:none;} ul:focus, ul:active, ul:hover {display: block;}

またはフィドルを参照してください：http://jsfiddle.net/YNxVs/1/

解決策はありますか？これを達成する最も簡単な方法は何ですか? ジョナサン

4

1 に答える 1

0

問題は、#menu-invokerもはや持っていないこと:focusです。解決策の 1 つposition: absolute;は、他のコンテンツの上に浮いているようにナビを使用することです。そうすれば、スクロールの高さは決して変わりません。

(メニュー外のリンクは Firefox では機能しますが、IE や Webkit では機能しません。どちらが「間違っている」のかわかりません)

于 2013-02-20T12:53:03.173 に答える