スマホヘッダーメニューの作成方法への追加質問

Question

お世話になっております。

少し前の「スマホヘッダーメニューの作成方法」のやり取りを見て、
自分なりにスマホヘッダーメニューを作ろうとしています。

設置方法については分かりましたが、この神戸レタスさんのように

右上にSEARCH、CART、
その下に例えば５つのメニューを作るには

具体的にどのようにすればいいでしょうか？

これらは１つのまとまった画像で、クリック位置で遷移先を
変えるような仕組みにしているのでしょうか？

アドバイスよろしくお願いします。

Answer

ECマスターズの村井です。

いただいたご質問ですが、確認して担当より回答させていただきますので、
今しばらくお待ちくださいませ。

Answer

ECマスターズの伊藤です。

> 右上にSEARCH、CART、
> その下に例えば５つのメニューを作るには

> 具体的にどのようにすればいいでしょうか？

> これらは１つのまとまった画像で、クリック位置で遷移先を
> 変えるような仕組みにしているのでしょうか？

参考サイトを確認したところ、1枚の画像ではございませんでした。
積み木のように、複数のパーツを並べて、ページの作成を行っております。

なお、GOLDで作成を行い、iframeにて作成したページを表示させておりました。
iframeを利用してページを表示させるには、RMSのバグを利用して行うため、仕様変更などでご利用いただけなくなる場合がございます。
予め、ご了承のうえ、ご利用くださいますようお願いいたします。

具体的なコードは、下記の通りとなります。

＝＝＝＝＝HTML＝＝＝＝＝

  
    ロゴ
    
    
      
      検索
      
      
      カート
      
    
   

  
    メニュー
    メニュー
    メニュー
  

＝＝＝＝＝＝＝＝＝＝＝＝


＝＝＝＝＝CSS＝＝＝＝＝

#menu h1{
  width: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  text-align: center;
}
*{border: 1px solid red;}

#icon{
  display: flex;
}
.search{
  margin-left:auto;
}

#menu ul{
  display: flex;
  margin: 0;
  padding: 0;
}

#menu li{
  list-style: none;
  width :  calc(100% / 3);
  text-align: center;
}

＝＝＝＝＝＝＝＝＝＝＝＝

メニューを横並びにするなどの箇所で、FlexBoxを利用しています。
詳しくは、デザインレシピにて解説をしておりますので、よろしければご覧ください。
https://club.ec-masters.net/index.php?design_page11

CSSについては、下記に詳細をまとめました。
ーーーーーCSS詳細ーーーーー
/* ＝＝＝＝＝　ロゴ　＝＝＝＝＝ */
#menu h1{
  width: 100px; /* ロゴの横幅 */
  /* 以下ロゴを中央に表示 */
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  text-align: center;
}

/* ＝＝＝＝＝＝ 検索、カートを囲う枠 ＝＝＝＝＝ */
#icon{
  display: flex;
}

/* ＝＝＝＝＝ 検索 ＝＝＝＝＝ */
.search{
  margin-left:auto;
}

/* ＝＝＝＝＝ メニュー ＝＝＝＝＝ */
#menu ul{
  display: flex;
  margin: 0;
  padding: 0;
}

#menu li{
  list-style: none;
  width :  calc(100% / 3); /* 横幅を、100%（画面いっぱい）をメニュー数（３）で割る */
  text-align: center;
}
ーーーーーーーーーーーー

ご用意いただく画像やメニュー数によって、内容が異なって参りますので、
おおまかな枠のみを記述させていただきました。

設置の際にご不明な点がございましたら、ご質問くださいませ。

Answer

伊藤さん、ありがとうございます。

当社の場合は一からバナーを作らないとですね。

並べる物は、送料無料バナー、あす楽対応バナー、ポイント10倍バナー、
かなと。

トップ位置からの離脱が防げるので、何とか実現したいですね。

Answer

ECマスターズの伊藤です。

> トップ位置からの離脱が防げるので、何とか実現したいですね。

そうですね、固定メニューがあるだけで操作性が上がりますので、ぜひ実装してみてください。

ご不明な点ががございましたら、お気軽にご質問くださいませ。