スマホトップページにフローティングヘッダーを実装したい

Question

いつもお世話になっております。https://www.rakuten.ne.jp/gold/wakasugi/参考サイトとしてこちらのサイトのスマホトップページにあるフローティングヘッダー(ドロワーメニューも含めて)を実装したいのですが、どういったhtml.css,jsを使用すればよいのでしょうか？ご多忙のところ大変お手間だとは思いますがご教授の程何卒よろしくお願い申し上げます。

Answer

ECマスターズの塚本です。いただいたご質問ですがお調べしまして、担当から改めてご連絡させていただきます。お時間いただきますが、今しばらくお待ちくださいませ。

Answer

ECマスターズの田中です。フローティングヘッダーの部分は、ヘッダーとして表示させたい部分を作成していただいた上で、一番大本になるタグに対して、スタイルシートにてposition: fixed;と位置の指定（たとえば、left:0px;top:0px; ですと、画面の左上端）、必要に応じて横幅（width:100%、width:100vw; など）と高さをご指定いただくことで実現することができます。例）

フローティングヘッダーの表示部分

ハンバーガーメニューを自力で作成するのは大変なので、下記URLの「Slideout.js」などのプラグインをご利用ください。https://coliss.com/articles/build-websites/operation/javascript/js-slideout.html

Answer

田中様いつもお世話になっております。上記のフローティングヘッダーとハンバーガーメニューを実装してみたのですが、どうもうまくいかないようです。イメージとしてはfHeader部分に背景画像を入れてその背景画像の上にハンバーガーメニューを乗せながら背景画像、ハンバーガーメニュー、共にフローティングさせるようにするにはどうしたらよいでしょうか？https//www.rakuten.ne.jp/gold/SHOP-URL/slideout-master/slideout-master/test/index.right.html大変ご多忙の所恐れ入りますがご教授の程何卒よろしくお願い申し上げます。

Answer

ECマスターズの田中です。Slideout.jsの構造を改めて確認したところ、menuとして設定された要素（）がハンバーガーメニューの内容の部分、panelとして設定された要素が（

〜

）がページ内のコンテンツとして表示されることがわかりました。フローティングヘッダーは、panelの中の一要素として挿入していただくことで、メニューと共に移動するようになっております。いただいたページはデモページを流用されておりますね。このまま編集を継続される場合は、まず、

〜

をフローティングヘッダーとしてみなし、スタイルシートの .fHeader への規則を .panel-header にご変更いただくのはいかがでしょうか。その際、HTMLの

と

は削除をお願いします。また、https//www.rakuten.ne.jp/gold/SHOP-URL/slideout-master/slideout-master/test/test.cssにて、.panel-header に対してmargin: 120px auto 55px;というスタイルシートが適用されており、上下に大きな余白ができてしまいますので、必要に応じて値の調整、もしくは削除をお願いします。

Answer

田中様無事解決できました。お忙しいところ対応頂きありがとうございました。

スマホトップページにフローティングヘッダーを実装したい

カテゴリーから探す