質問 > フロント機能 > スマホ側でハンバーガーメニューが表示されていない |
フロント機能
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | 下へ |
投稿者 | スレッド |
---|---|
koichi_51 |
投稿日時: 2019/12/17 15:24
対応状況: −−−
|
半人前 登録日: 2019/8/23 居住地: 投稿: 16 |
スマホ側でハンバーガーメニューが表示されていない [EC-CUBE] 3.0.17
[PHP] 7.1.28 [データベース] mysql [WEBサーバ] Apache スマホ側でハンバーガーメニューが表示されていないのですが、表示されないのがデフォルトの仕様なのでしょうか? (前担当者から引き継いだため以前ハンバーガーメニューが表示されていたかどうかは不明の状態です。) スマホ側でカテゴリメニューの子カテゴリがうまく表示されない状態なので、ハンバーガーメニューからカテゴリが選択できるようにしたいのですが、ECCUBE3で可能でしょうか? *****追記***** style.cssに以下の記述をしたところPCでのブラウザで画面を縮小するとハンバーガーメニューが表示されるようになりましたが、スマホ側では表示されません。 (また、PC側のハンバーガーメニューをクリックすると画面がグレーの半透明になりメニュー内容の表示はされない状態です) スマホ側で表示させるためにその他記述する必要がある箇所があるのでしょうか? <style.cssへの記述内容> @media screen and (max-width: 478px) { .sp{display: block !important;} .pc{display: none !important;} span.pc{display: inline !important;} } @media screen and (min-width: 479px) { ・・・・・ .sp{display: none !important;} .pc{display: block !important;} span.pc{display: inline !important;} ・・・・・ } |
468 |
投稿日時: 2019/12/18 11:33
対応状況: −−−
|
神 登録日: 2008/10/26 居住地: 投稿: 3217 |
Re: スマホ側でハンバーガーメニューが表示されていない どのようなデザイン(html)になっているのか分からない為、
どういった対応が必要なのかの回答は難しいのですが デフォルトの挙動は以下の通りです。 ・スマホではハンバーガーメニューが表示される ※(レスポンシブWEBデザインの為、PCでブラウザの幅を縮めた表示とスマホの表示はイコール) ・ハンバーガーメニューにはトップカテゴリのみ表示される >style.cssに以下の記述をしたところPCでのブラウザで画面を縮小するとハンバーガーメニューが表示されるようになりましたが、スマホ側では表示されません。 基本、スマホとPCでブラウザの幅を縮めた表示は同じものになるはずですが テンプレートを分離するようなカスタマイズを行われていますか? >(また、PC側のハンバーガーメニューをクリックすると画面がグレーの半透明になりメニュー内容の表示はされない状態です) 画面全体がグレー半透明の表示になる場合は htmlの<div>タグの構造が崩れていると上記のような現象が起きる事があります。 またメニューの内容はページのロード時に htmlソース内のclass="drawer_block"が指定された要素の子要素を <div id="drawer" class="drawer sp"></div>にコピーしているのですが class="drawer_block"が指定された要素は存在していますか? また<script>の中に上記コピーを行う以下の記述はありますか? $('#drawer').append($('.drawer_block').clone(true).children()); 多分、デザインテンプレートをカスタマイズした際に 必要な記述を改変しているのではないかと思います。
|
koichi_51 |
投稿日時: 2019/12/18 13:16
対応状況: −−−
|
半人前 登録日: 2019/8/23 居住地: 投稿: 16 |
Re: スマホ側でハンバーガーメニューが表示されていない ご返信ありがとうございます。
ご指摘していただいた箇所に関しましては以下のようになっておりました。 >テンプレートを分離するようなカスタマイズを行われていますか? 管理画面のテンプレート一覧で確認したところテンプレートの分離が行われており、「html/template/default」「app/template/default」ではなく「html/template/」「app/template/」以下にフォルダを作成しそこを指定している状態です。 >画面全体がグレー半透明の表示になる場合は htmlの<div>タグの構造が崩れていると上記のような現象が起きる事があります。 ブラウザの検証からHTMLを確認したところ特に崩れはありませんでした。 >またメニューの内容はページのロード時に htmlソース内のclass="drawer_block"が指定された要素の子要素を <div id="drawer" class="drawer sp"></div>にコピーしているのですが class="drawer_block"が指定された要素は存在していますか? 「class="drawer_block」が指定された要素があり、ブラウザの検証から確認したところ。「class="drawer sp"」をもつdivタグ内に子要素の内容が生成されておりました。 >また<script>の中に上記コピーを行う以下の記述はありますか? $('#drawer').append($('.drawer_block').clone(true).children()); 「default_frame.twig」内に記述が存在しています |
koichi_51 |
投稿日時: 2019/12/18 15:12
対応状況: −−−
|
半人前 登録日: 2019/8/23 居住地: 投稿: 16 |
Re: スマホ側でハンバーガーメニューが表示されていない スマホ側でキャッシュが残っていたようで読み込み直すとスマホ側でもハンバーガーメニューが表示されるようになりました。
(ハンバーガーメニューが表示されたあたりのカートのあたりのデザインが崩れてしまいますが・・・) ただスマホ側でもPC側と同じくグレーの半透明の画面が表示されるという現象になってしまいます・・・ >画面全体がグレー半透明の表示になる場合は htmlの<div>タグの構造が崩れていると上記のような現象が起きる事があります。 とのことでしたが、ブラウザの検証からHTMLを確認したところ特に<div>タグの崩れは見つかりませんでした。 「class="drawer_block"」の子要素の内容がうまく取得できていないということなのでしょうか? |
koichi_51 |
投稿日時: 2019/12/19 10:41
対応状況: 解決済
|
半人前 登録日: 2019/8/23 居住地: 投稿: 16 |
Re: スマホ側でハンバーガーメニューが表示されていない 解決しました。
style.cssのスマホ表示のメディアクエリ部分がごっそり削除されていることが原因でした。 削除された部分を再度記述しなおしたらハンバーガーメニューがちゃんと機能するようになりました。 ありがとうございました。 |
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | トップ |