4

私の会社は、仕事をテストしなければならないブラウザーとして iPad を追加する方向に動き始めています。これは考えさせられました...

タッチベースのクライアントには :hover 状態がないため、純粋な CSS ドロップダウンはなくなりますか?

次に、クリックするとメニューがポップアップするようにJavaScriptを追加しても...メニュー項目（別のメニューに展開される）がリンクでもあるとどうなりますか。クリックしてメニューを表示するか、クリックしてそのリンクに移動するかをどのように区別しますか?

タッチ ベースのクライアントが普及した場合、ドロップダウン メニューはどうなりますか? まだ回避策はありますか？

4

3 に答える 3

7

:target pseudo-class のおかげで、純粋な CSS ドロップダウンがタッチ デバイスで可能になります。基本的に、疑似クラスは、現在の URL フラグメントと一致する ID を持つオブジェクトに対してアクティブです。これは、URI フラグメントを使用して状態を保存し、CSS と共有できることを意味します。たとえば、次の HTML と CSS を持つhttp://example.com/にいるとします。

<style>
    #menu {
        display: none;
    }
    #menu:target {
        display: block;
    }
</style>

<a href="#menu">Show the Menu!</a>
<div id="menu"> ... </div>

メニューはデフォルトで非表示になっています。リンクをクリックまたはタップすると、URL フラグメントが「メニュー」に変わります (完全な URI: http://example.com/#menu )。URI フラグメント (「メニュー」) と等しい id を持つ要素が存在するため、:target 疑似クラスが適用され、表示プロパティが変更されます。

参考文献：

于 2013-08-10T13:50:40.020 に答える
4

これは、技術的な問題によって強制される一種の設計上の問題です。私はおそらく、コンテンツを次の3つの方法のいずれかに再設計/再編成します。

1-クリックしてアクティブ化されたメガメニュー（例）。ここでの落とし穴は、あなたが不動産の問題を抱えているかもしれないということです。

2-ナビゲーションページにつながるトップレベルカテゴリリンク。ここでの欠点は、コンテンツにアクセスするために追加のページ読み込みが必要になることです。

3-各メニュー項目を2つのボタンで構成します。1つはページ（テキスト）に移動し、もう1つは子メニュー（矢印）を展開します。ただし、子ナビゲーションを提供する必要があります（存在する場合）。ユーザーがメニュー項目をクリックしたときに移動するページ。

于 2010-05-04T17:47:54.357 に答える
0

私のナビゲーション バーには、この機能 ( collins.class401.com/nav ) があります。TJK_DropDownMenu の修正バージョンが必要です。 :hover の可視性 バージョンも <a> をメニュー項目としてのみサポートしていますが、私のものは <span> もサポートしています (ただし、スパンを使用するとキーボード ナビゲーションが壊れます) フォームやメニューのボタンのようなものが必要な場合、私が彼らのバージョンを持っているように、あなたが「空白」をクリックする限り、通常はiPod touchでホバーするために機能します。

または、ホバーできず、javascript がオフの場合は、php セッションを設定してページをリロードし、ページの最後にあるスタイル タグにスタイルを挿入します。これにより、クリックされたかどうかに応じて可視性と表示が上書きされます。表示または非表示

于 2010-07-23T23:11:16.947 に答える