バージョン選択

フォーラム

メニュー

オンライン状況

41 人のユーザが現在オンラインです。 (25 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 41
もっと...

サイト内検索

質問 > フロント機能 > スマホ側でハンバーガーメニューが表示されていない

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
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
居住地:
投稿: 2597
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());

多分、デザインテンプレートをカスタマイズした際に
必要な記述を改変しているのではないかと思います。


----------------
株式会社シロハチ
■ECCUBE2系、3系構築カスタマイズご相談ください。
EC-CUBE3マニュアル
blog

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のスマホ表示のメディアクエリ部分がごっそり削除されていることが原因でした。
削除された部分を再度記述しなおしたらハンバーガーメニューがちゃんと機能するようになりました。

ありがとうございました。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBEペイメント

公式ストアEC-CUBE4系デザインテンプレート続々リリース中

統計情報

総メンバー数は65,902名です
総投稿数は98,045件です

投稿数ランキング

1
seasoft
7332
2
AMUAMU
2712
3
468
2597
4
nanasess
2101
5
umebius
1717
6
yuh
1612
7
red
1422
8
h_tanaka
1038
9
fukap
907
10
tsuji
863
11
shutta
835
12
tao_s
792
13 ramrun 789
14 karin 657
15 sumida 641
16
homan
633
17 DELIGHT 571
18
patapata
502
19
flealog
485
20 tonton 437


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.