スマホヘッダーメニューの作成方法

Question

いつもお世話になっております。
神戸レタスさんのようなスマホヘッダーメニューを設置したいと思ってます。

https://item.rakuten.co.jp/mobacaba/c3721/

スワイプすると隠れていたヘッダーが出てくる方法です。

よろしくお願いします。

Accepted Answer

ECマスターズの伊藤です。

> スワイプすると隠れていたヘッダーが出てくる方法です。

参考サイトのスマホの固定メニューですが、

上）検索フォーム（白背景の部分）
中）固定メニュー(※白背景の下に隠れている状態)
下）楽天デフォルトのメニュー（グレー背景の部分）

の重なりで表現していて、スクロールをすると、固定メニューが表示されるようになっています。

そのため、今後、楽天のデザインが変更され、白背景の部分の高さが変更になった場合など、
デザインが崩れてしまう可能性がございますので、ご了承くださいませ。

また、CSSやiframe等、すでにご利用されていますので、ご認識済みかと思いますが、
楽天のバグを利用したデザインのため、今後ご利用いただけ可能性がございますので
ご了承くださいませ。


コードは以下の通りとなります。
商品ページ設定（スマートフォン）の商品ページ共通説明文
などに、ご登録いただきますと、設置していただくことができます。
＝＝＝＝＝＝＝＝＝＝




.header_menu{
	position: fixed;
	top:0;
	left:0;
	z-index:1;
  width:100%;
  height:101px;
  overflow:hidden;
  margin:auto
}
#ipnsh-header,#rstTopSearch{
    position: relative;
    background: #fff;
    z-index: 999;
}

＝＝＝＝＝＝＝＝＝＝
現時点の白背景の高さは101pxとなっておりますので、
固定メニューの高さは、101pxで作成していただきますよう、お願いいたします。


なお、CSSの内容は下記の通りとなっております。
必要な場合は修正していただきますようお願いいたします。
ーーーーーーーーーー
 /* css開始の宣言　まとめて記載している箇所があれば削除してください*/

/* 固定メニューの設定 */
.header_menu{
	position: fixed; /* 固定させるための記述 */
	top:0;　/* 固定する位置 */
	left:0;　/* 固定する位置 */
	z-index:1;　/* 重なりの順番 */
  width:100%;　/* 横幅。100%で画面いっぱいに表示 */
  height:101px;　/* 高さ */
  overflow:hidden;　/* 高さを超えた分は非表示にする記述 */　
}

/* 白背景部分の設定 */
#ipnsh-header,#rstTopSearch{
    position: relative; /* 重なりを有効にするための記述 */
    background: #fff; /* 背景を白にする */
    z-index: 999; /* 重なりを999にする（数字が大きいほうが上に表示されます */
}
　
ーーーーーーーーーー

Answer

伊藤様

お世話になっております。
早速のご回答ありがとうございます。
無事設置出来ました！
感謝します！
ありがとうございました！

Answer

ECマスターズの伊藤です。

> 無事設置出来ました！

無事設置できたとのことで、安心いたしました。


確認させて頂いたところ、私の記述ミスにより、本来コメントアウト（非表示）になる部分が
~~の外に、CSS用のコメントアウトで記載してしまったため
表示されてしまっておりました。

お手数ですが、下記の２箇所を削除していただきますよう、お願いいたします。

/* 固定メニュー */
/* css終了の宣言　まとめて記載している箇所があれば削除してください*/

なお、HTMLのコメントアウトは

となりますので


と、修正いただければ、コメントを残しておいていただくこともできます。

お手数おかけいたしますが、よろしくお願いいたします。

Answer

伊藤様

お世話になっております。
コメントアウトの件ご指示ありがとうございます。
修正致しました。
また不明点があればご連絡致します。

Answer

ECマスターズの伊藤です。

> コメントアウトの件ご指示ありがとうございます。
> 修正致しました。

修正のご対応ありがとうございました。
お手数を煩わせて申し訳ございませんでした。


> また不明点があればご連絡致します。

かしこまりました。些細なことでも、お気軽にご質問くださいませ。