バージョン選択

フォーラム

メニュー

オンライン状況

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

サイト内検索

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

フロント機能

新規スレッドを追加する

スレッド表示 | 古いものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
koichi_51
投稿日時: 2019/12/19 10:41
対応状況: 解決済
半人前
登録日: 2019/8/23
居住地:
投稿: 16
Re: スマホ側でハンバーガーメニューが表示されていない
解決しました。

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

ありがとうございました。
koichi_51
投稿日時: 2019/12/18 15:12
対応状況: −−−
半人前
登録日: 2019/8/23
居住地:
投稿: 16
Re: スマホ側でハンバーガーメニューが表示されていない
スマホ側でキャッシュが残っていたようで読み込み直すとスマホ側でもハンバーガーメニューが表示されるようになりました。
(ハンバーガーメニューが表示されたあたりのカートのあたりのデザインが崩れてしまいますが・・・)

ただスマホ側でもPC側と同じくグレーの半透明の画面が表示されるという現象になってしまいます・・・

>画面全体がグレー半透明の表示になる場合は
htmlの<div>タグの構造が崩れていると上記のような現象が起きる事があります。

とのことでしたが、ブラウザの検証からHTMLを確認したところ特に<div>タグの崩れは見つかりませんでした。

「class="drawer_block"」の子要素の内容がうまく取得できていないということなのでしょうか?
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」内に記述が存在しています
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());

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


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

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;}

・・・・・


スレッド表示 | 古いものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は88,286名です
総投稿数は109,688件です

投稿数ランキング

1
seasoft
7365
2
468
3217
3
AMUAMU
2712
4
nanasess
2303
5
umebius
2085
6
yuh
1818
7
h_tanaka
1610
8
red
1567
9
mcontact
1240
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
796
14 ramrun 789
15 karin 689
16 sumida 641
17
homan
633
18 DELIGHT 572
19
patapata
502
20
flealog
485


ネットショップの壺

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

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