バージョン選択

フォーラム

メニュー

オンライン状況

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

サイト内検索

質問 > フロント機能 > スマホで表示されるドロワーメニューをPCでも表示させたい。

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
poporon
投稿日時: 2018/8/7 23:51
対応状況: −−−
新米
登録日: 2016/1/17
居住地:
投稿: 6
スマホで表示されるドロワーメニューをPCでも表示させたい。
スマホでの表示と同じように、PCでも、サイトを開いたときにはカテゴリメニューが非表示で、ハンバーガーボタンをクリックすると、ドロワーメニューがサイドから表示されるようにしたいと考えております。

CSSのメディアクエリを色々いじったのですが、どうもそれでは無理なようで、誠に恐れ入りますが、どのファイルをどのように直せば良いのかご教授頂けませんでしょうか?

当方、htmlとCSS等は独学で、EC-CUBE3のサイトは何年か運営しております。

何卒よろしくお願いいたします。

----------------
[EC-CUBE] 3.0.14
[レンタルサーバ] エックスサーバー
[OS] Windows 10
[PHP] 7.2.6
[データベース] MySQL5.7
----------------
468
投稿日時: 2018/8/8 12:35
対応状況: −−−
登録日: 2008/10/26
居住地:
投稿: 3217
Re: スマホで表示されるドロワーメニューをPCでも表示させたい。
常にスマートフォン向けの表示をさせるという訳ではなく、
メインコンテンツはPCレイアウトのまま、ハンバーガーメニューを表示させるという事でしょうか?
私はCSSが専門ではないので、感覚的な意見ですが、
パッと対応できるような内容ではない、のではないかと思います。

メディアクエリによるスタイルの切り替えと、
/html/template/default/js/function.jsの5~37行目のjavascriptで
ドロワーの動きを制御していると思いますので、
その辺りを確認していく必要があるかと思います。

CSSについては、どこの記述が適用されているのか、
CSSの内容が複雑すぎて、とてもじゃないですが、説明できません。
ブラウザのデベロッパーツールで確認しながら、該当の記述を確認していくのが確実かと思います。


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

poporon
投稿日時: 2018/8/13 21:26
対応状況: −−−
新米
登録日: 2016/1/17
居住地:
投稿: 6
Re: スマホで表示されるドロワーメニューをPCでも表示させたい。
468さま、

すぐにご回答を下さいまして、本当にありがとうございます。
本業の合間に作業をしておりましたため、御礼と検証が遅れて申し訳ございません。

はい、メインコンテンツはPCレイアウトのまま、ハンバーガーメニューを表示させたいと考えております。

頂いた情報を基に色々と作業をしてみて、簡単ではないことが理解できました。
中途半端にメディアクエリをいじるとPCのレイアウトがひどく崩れますし、メニューを直すとカートの位置も邪魔になったりと、CSSの修正が広範囲にわたりますね・・・。

ご教授頂いたfunctions.jsやデベロッパーツールを確認しながら、今やるべきかどうかも含めて、検討していきたいと思います。

大変感謝いたしております。本当にありがとうございました。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


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

統計情報

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

投稿数ランキング

1
seasoft
7365
2
468
3217
3
AMUAMU
2712
4
nanasess
2303
5
umebius
2085
6
yuh
1818
7
h_tanaka
1610
8
red
1568
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.