バージョン選択

フォーラム

メニュー

オンライン状況

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

サイト内検索

質問 > フロント機能 > スマホで表示されるドロワーメニューを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
居住地:
投稿: 1315
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ペイメント

統計情報

総メンバー数は36,248名です
総投稿数は88,524件です

投稿数ランキング

1
seasoft
7332
2
AMUAMU
2712
3
nanasess
1851
4
yuh
1524
5
468
1315
6
red
1199
7
umebius
1007
8
fukap
907
9
shutta
827
10
tsuji
815
11 ramrun 789
12
tao_s
667
13 karin 656
14 sumida 641
15
homan
633
16
h_tanaka
632
17 DELIGHT 571
18
patapata
502
19
flealog
483
20 tonton 436


ネットショップの壺

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

Copyright© LOCKON CO.,LTD. All Rights Reserved.