CSSモバイル上のドロップダウンメニュー。周りを取得する方法：私は、検索を持っていた

置いて、私は何&を見つけることができませんでしたまた、それは、サイトので、それを頼まれていない希望を使用して初めてです。CSSモバイル上のドロップダウンメニュー。周りを取得する方法：私は、検索を持っていた

私は状況に遭遇しました。私は決して経験豊富なウェブサイトメーカーではありません。私が行くように私は学んでいます。デスクトップブラウザーでうまく動作するCSSドロップダウンメニューがあります。私がモバイルの領域に入ると、問題が発生します。すなわち、:hoverは動作しません（明らかに）。

私はこれを見つけました：http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendlyしかし、私はうまくいかないように働くことができません。

私はそれをここに適用しています：http://www.inkslinger.co.uk/calibre/index.html私は本当にこれを動作させることはできませんし、そのドライブは絶対にバットです。どんな助けでも本当に感謝しています。

出典

2013-11-24 ikillbears

私たちは、この問題を抱えていたし、クリックにホバーを変更しました。

出典

2013-11-24 22:29:42 Juan

私が持っている問題は、ホバーメニュー項目の1つです。トップリンクは別のページへのリンクです。クリックは機能しないと思っていますか？ – ikillbears

@ikillbears「新しい」レスポンシブ/アダプティブウェブでは、妥協する必要があります。トップレベルのメニュー項目がリンクの場合は、それを変更することを検討する必要があります。 –

メニューをホバーからデスクトップに切り替え、タッチデバイスのクリックを使用して切り替えることができます。ホバーがタッチデバイスに存在しない環境は異なります。検出にメディアクエリを使用して、CSSまたはコンテンツを切り替えることができます。 – Juan

もちろん、タッチデバイスでは不可能なホバーを使用する代わりに、：アクティブを使用するとよいでしょう。タッチデバイスで何か選択が可能で、メニューをトグルのアクティブ状態にバインドすれば完了です。

出典

2013-11-24 22:35:47

私はそれがうまくいくと思いますが、問題を解決していないようです。投稿した最初のリンクには、ウェブサイト上のビデオで判断する解決策と思われるものが含まれています。しかし、私は私の人生のために働くことはできません – ikillbears

あなたは、この場合のイベントをクリックし、ホバーから切り替える必要があります。そのための回避策はありません。

タッチ・デバイスの左側から開くハンバーガー・スタイルのメニューを持つようにデザインを変更することを検討してください。

は、あなたが投稿したリンクから、このデモを参照してください。モバイルデバイスで開くと、別のメニュースタイルに変わります。 http://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/

また、トップリンクを他のページへの直接リンクとして使用する場合は、そのためにトップボタンに2回別々にクリックすることができます。最初のクリックでメニューが開き、メニューが開いた後、上のデモで行ったように直接リンクを割り当てることができます。

出典

2013-11-25 05:24:45 agaase

私は同じ問題を抱えていたし、私はここに hover example

ポストナタールとアンティナタールオプションを使用している簡単な回避策を見つけ、ホバー時に、ドロップダウンをトリガしていますが、彼らはされていないことに気づくことがありリンクします。私の元のモデルではリンクだったが、これがタッチデバイスではうまくいかないことに気がついたとき、ドロップダウンボックスのトリガーにして、ボックス内にリンクを張った。あなたのために、あなたのためにあなたのために、リンクではなく、ドロップダウンメニューのためのトリガとし、メニューであなたは '私たちは何をする'情報へのリンクを持つことができます。

いくつかのiPadsなどの特定のタッチデバイスは、ホバー状態がドロップダウンメニューをトリガーしないことがわかった場合は、ホバー状態をまったく気に入らないことを覚えておいてください。 'onclick = "return true ""を問題のリスト項目に追加します。これは通常、ホバー状態をクリックのように機能させます。

私が書いたことは、私の参考書の図書館に約3日間のポーリングがかかることを示しています。

出典

2014-01-21 09:52:14

は、このようなあなたの頭のタグ内のコード行を置く：

element:hover, element:active { Your CSS }

出来上がり：

<head> 
    <script>document.addEventListener("touchstart", function(){}, true);</script> 
</head>

あなたのホバー要素のために、このようなアクティブなクラスを作成します。

出典

2016-09-08 16:56:01 rufsam

CSSモバイル上のドロップダウンメニュー。周りを取得する方法：私は、検索を持っていた

答えて

関連する問題