0

デスクトップビューでページの約半分下にある jquery.mmenu があり、スクリプトがそれを本文の最初の項目として配置していると思います。

レスポンシブ レイアウトのモバイル デバイスでのみ mmenu を使用しているため、デスクトップ スタイルに影響を与えないようにしたいと考えています。

配置を削除して、デスクトップ ビューでメニューを相対的に配置できるようにする方法はありますか?

注: 私たちは強力なファイアウォールの背後にいるため、サイトを表示するためのリンクがありません. どうしても必要な場合は、時間をかけてページを別のサーバーに移動して表示することができます.

ありがとう！

元の投稿/質問を明確にし、さらにいくつかの詳細を提供するためだけに。

サイトには 2 つの NAV ブロックがあります。上部に 1 つ、中間ページに 1 つ。元のコードでは、nav コンテナーは他の div コンテナー内に配置され、レイアウト内での位置を制御します。

mmenu は、両方の nav コンテナーを元の場所から取得し、mmenu js の実行中に本体に追加するようです。これにより、元のコード内の位置が変更され、mmenu が機能するようになります。

場所の変更により、デスクトップ ビューで表示したときにレイアウトが適切に読み込まれないのは明らかです。これは、mmenu の場所が変更されたため、ページの中央にある div コンテナーにあったメニューがページの上にレンダリングされるためです。

800px 未満の画面サイズ変更でのみ mmenu を初期化する方法や、デスクトップ ビューで mmenu をアンロードしてナビゲーション コンテナーを元の位置に戻す方法はありますか?

ナビの移動を処理するさまざまな方法を試しましたが、わずかな成功でした。

以下を試しました：

  • ブラウザ ウィンドウのサイズ変更をチェックするスクリプトを追加し、ブラウザ ウィンドウが 800px 以下の場合にのみ実行するように mmenu コードを if で囲みました。mmenu js が実行されると、ナビゲーションの場所が変更され、ブラウザのサイズが 800px を超えても、ナビゲーション コンテナーが正しくない場所に残るため、これはわずかに機能します。

  • 上記のコードを追加して、ページの中央に配置する必要がある nav コンテナーを取得し、800px を超える解像度で div コンテナーに再書き込みするコードを追加して試しましたが、これはモバイルからデスクトップ ビューまで機能します。デスクトップからモバイルに移動しても、mmenu が起動しないようです。ほとんどの変更はページの読み込み時に行われると考えているため、サイズ変更してもスクリプトが再度起動されず、mmenu の必要に応じてナビゲーション コンテナーが変更されます。

ブラウザー ウィンドウをモバイル サイズに縮小してページを更新すると、mmenu が正常に読み込まれます。

私たちが達成しようとしているのは、メディア クエリとほぼ同じ動作であり、必要に応じてさまざまな解像度で mmenu の実行を制御できます。

modernizr、enqueue、yepnope が試されましたが、画面サイズが変更され、明らかに nav コンテナーの場所の変更に対応していないため、すべてスクリプトを 1 回しか実行していないようです。

何が起こっているかを示すサンプルコード:

元のサイト構造 (関連項目のみを表示するために短縮されています):

    <body>
    <div id="wrapper">
    <div id="header">
    <div id="topnav">
    <nav id="mainnav"></nav>
    </div>
    </div>
    <div id="other"></div>
    <div id="secondnav">
    <nav id="midnav"></nav>
    </div>
    <div id="content"></div>
    <div id="footer"></div>
    </div>
    </body>

MMENU 変更後の構造 (mmenu.js 実行後):

    <body>
    <nav id="midnav"></nav>
    <nav id="mainnav"></nav>
    <div id="wrapper">
    <div id="header">
    <div id="topnav">
    </div>
    </div>
    <div id="other"></div>
    <div id="secondnav">
    </div>
    <div id="content"></div>
    <div id="footer"></div>
    </div>
    </body>

うまくいけば、上記が私たちが経験している問題をもう少し明確にすることができます.

最終的な目標は、mmenu を使用することです。これは、モバイルでのみ機能/スタイリングし、上記のサンプル構造に示すように、適切な位置を保持するデスクトップでサブメニューを備えた独自の CSS メニューを使用します。

私たちはほとんど立ち往生しているので、これについて助けてくれてありがとう。

4

1 に答える 1

0

jquery.mmenu プラグインは、NAV を BODY に直接配置する必要があります。これを回避する方法はありません。レスポンシブ Web サイトの場合、おそらく「クローン」オプションを使用するのが最適です。そうすれば、クローン バージョンをモバイル用に、元のバージョンをデスクトップ用に使用できます。その場合、複製されたメニューのすべての ID の先頭に「mm-」が追加されることに注意してください。

于 2013-09-29T20:16:26.483 に答える