楽天GOLD 父の日特集ページのフローティングナビについて

Question

お世話になっております。
https://www.rakuten.ne.jp/gold/yamaguchi-seni/sale/gift-feature.html

・おすすめ、ランキング、金額別等のフローティングナビゲーションを用意しましたが、
本当はポロシャツ、シャツ、パジャマ、下着、ニット、タオル等全ての項目をスマホ、PCどちらで見てもわかりやすく表示させたいのですが、現状のフローティングナビの方法ですと表示領域に制限があります。

フローティングナビを活かしつつ、一つの項目をタップまたはクリックするとポップアップナビが開き、全てのカテゴリーや配送期限のご案内、ラッピングの方法など全てを網羅できるような物が理想なのですが、実現する為の技術を持ち合わせていません。

個人的にはフローティングナビが一番わかりやすいと思いこの表示形式のままが理想ではありますが、よりよい方法があれば、そちらを採用したく思っております。
アドバイスいただけますと幸いです。

Answer

ECマスターズの伊藤です。

> 本当はポロシャツ、シャツ、パジャマ、下着、ニット、タオル等全ての項目をスマホ、PCどちらで見てもわかりやすく表示させたいのですが、現状のフローティングナビの方法ですと表示領域に制限があります。

> フローティングナビを活かしつつ、一つの項目をタップまたはクリックするとポップアップナビが開き、全てのカテゴリーや配送期限のご案内、ラッピングの方法など全てを網羅できるような物が理想なのですが、実現する為の技術を持ち合わせていません。

見やすいレイアウトについては、PCもスマホも対応となりますと、ご認識の通り、表示領域の問題があるため
クリックしたら展開する、といったレイアウトが、一般的で使いやすいものになるかと思います。

参考サイト
http://photoshopvip.net/96151

クリックでメニューが展開するレイアウトは、少々複雑ですが、
頂いたページを拝見させていただいたところ、メニューをリスト（）で作成されていることや、CSSでデザインをされていることなどから、少々複雑でも理解していただけるのでは、と思い、クリックしたら展開するメニューの方法をご紹介させていただきます。

仕組みとしては、
チェックボックスにチェックを入れたら、高さを０にしているdivの高さを、指定した高さに変更する
という形になります。
チェックボックスを隠すことで、見た目的には、ボタンをクリックしたように見えるようになります。

HTML
＝＝＝＝＝＝＝＝＝


 クリック 


  父の日ランキング
  おすすめギフト
  ￥3,000以上
  ￥5,000以上
  トップ



＝＝＝＝＝＝＝＝＝

css
＝＝＝＝＝＝＝＝＝
/* checkbxの非表示 */
.ac-container input{
   display: none;
}
/* クリック の設定 */
.ac-container label{
    cursor: pointer; /* カーソルの形状 */
    width: 100%; /* label の横幅 */
    color: #fff; /* 文字の色 */
    text-align: center; /* 文字の位置 */
    background:navy; /* 背景色 */
    position: relative;
    display: block;
}
/* #menu の設定 */
.ac-container div{
  height: 0px;
   overflow: hidden;
   z-index: 10;
}
/* クリック後の #menu の設定 */
.ac-container input:checked ~ div#menu{
   height: 150px; /* 高さ */
}
＝＝＝＝＝＝＝＝＝
/* コメント */ ←こちらは不要になりましたら削除してください。

また、CSSに記述されている下記の部分を修正頂ますよう、お願いいたします。
＝＝＝＝＝＝＝＝＝
#menu{
width:980px;
height:80px;
background:navy;
top:0px;
position: fixed;
z-index: 1;
margin-top:10px;
margin-left:10px;

}
＝＝＝＝＝＝＝＝＝
↓↓
＝＝＝＝＝＝＝＝＝
#menu{
background:navy;
}
＝＝＝＝＝＝＝＝＝


基本的には、上記を指定していただきますと、クリックした時に展開するメニューが実装できます。
ボタンの配置を修正したい、などが出てくると思いますので、わからない点がございましたら、お気軽にご質問くださいませ。

Answer

お世話になっております。
別ファイルで試してみました。
https://www.rakuten.ne.jp/gold/yamaguchi-seni/sale/gift-feature1.html
これですと、実際にクリックしてみないとわからないので、理想は、変更前の
https://www.rakuten.ne.jp/gold/yamaguchi-seni/sale/gift-feature.html
フローティングナビのように常に表示させ、例えば一番右のTOPの部分を【もっと見る】などの項目に
変更し、タップするとドロワーメニューのような物が出てくるようにしたいのですが、難しいでしょうか。

Answer

追記：メインの商材はポロシャツの為、ポロシャツの項目は常に表示させ、その他の項目はもっと見るをタップすると、下着、パジャマ、タオル、配送についてなどの項目が表示………（省略）………
ログインして全文を読む

Answer

ECマスターズの伊藤です。

> フローティングナビのように常に表示させ、例えば一番右のTOPの部分を【もっと見る】などの項目に
> 変更し、タップするとドロワーメニューのような物が出てくるようにしたいのですが、難しいでしょうか。

> メインの商材はポロシャツの為、ポロシャツの項目は常に表示させ、その他の項目はもっと見るをタップすると、下着、パジャマ、タオル、配送についてなどの項目が表示されるのが理想です。

大変失礼いたしました。
頂きましたとおりの動作となるように、修正したHTMLとCSSをご案内させていだきます。

もともと記載していただいていたHTMLとCSSを流用させていただきましたが、大幅に変更となるため、
CSSも含め、全て記載させていただきます。

こちらを適用後、うまくいかないようでしたら、お手数ですがご連絡くださいますよう、お願いいたします。

＝＝＝＝＝ HTML ＝＝＝＝＝



  
      父の日ランキング
      おすすめギフト
      ポロシャツ
      シャツ
      トップ
       クリック 
  


  
    下着
    バスタオル
    パジャマ
    配送について
    トップ
  

＝＝＝＝＝ HTML ＝＝＝＝＝

＝＝＝＝＝ CSS ＝＝＝＝＝
/* checkbxの非表示 */
.ac-container input{
   display: none;
}
/* クリック の設定 */
.ac-container label{
    cursor: pointer; /* カーソルの形状 */
}
/* #submenu の設定 */
.ac-container div#submenu{
  height: 0px; /* クリック前の高さ */
   margin-top:100px; /* #menuの高さ以上をもたせる */
   overflow: hidden;
   z-index: 10;
}
/* クリック後の #submenu の設定 */
.ac-container input:checked ~ div#submenu{
   height: 80px; /* 高さ */
}
#menu li{
width:calc(100% / 6); /* #menu の li の数に合わせて修正してください */
}
#submenu li{
width:calc(100% / 5); /* #menu の li の数に合わせて修正してください */
}

/* #menu に合わせるために#submenuを追加しています */
#menu,
#submenu{
  width:980px;
  background:navy;
  margin-top:10px;
  margin-left:10px;
}
#menu{
height:80px;
background:navy;
top:0px;
position: fixed;
z-index: 1;
}
#menu ul,
#submenu ul{
  list-style:none;
}
#menu li,
#submenu li{
display:block;
height:40px;
float:left;
line-height:40px;
}
#menu li a,
#submenu li a,
#menu li label{
display:block;
width:192px;
height:40px;
float:left;
font-weight:bold;
font-size:25px;
color:white;
text-align:center;
text-decoration:none;
}
#menu li a:hover,
#submenu li a:hover,
#menu li label:hover{
text-decoration:underline;
color:gold;
}
＝＝＝＝＝ CSS ＝＝＝＝＝
/* コメント */ ←こちらは不要になりましたら削除してください。

Answer

https://www.rakuten.ne.jp/gold/yamaguchi-seni/sale/gift-feature1.html
にて試してみました。
クリックすると表示されるようになりましたが、スクロールした状態ですと、フローティングになっていないからか、表示されません。また、ヘッダー部分に余白が出来てしまうのですが、こちらも修正可能でしょうか。

Answer

ECマスターズの伊藤です。

ご相談頂いていたフローティングの部分を失念しておりました。
大変失礼いたしました。
CSSを下記の通り修正いただけますでしょうか。

また、HTMLですが、#header以下は、ac-containerより出していただきますよう、お願いいたします。

＝＝＝＝＝CSS＝＝＝＝＝
.ac-container{
  position: fixed;
  top:0;
}
/* checkbxの非表示 */
.ac-container input{
   display: none;
}
/* クリック の設定 */
.ac-container label{
    cursor: pointer; /* カーソルの形状 */
}
/* #submenu の設定 */
.ac-container div#submenu{
  height: 0px; /* クリック前の高さ */
   overflow: hidden;
   z-index: 10;
}
/* クリック後の #submenu の設定 */
.ac-container input:checked ~ div#submenu{
   height: 80px; /* 高さ */
}
#menu li{
width:calc(100% / 6); /* #menu の li の数に合わせて修正してください */
}
#submenu li{
width:calc(100% / 5); /* #menu の li の数に合わせて修正してください */
}
.ac-container input:checked ~ #header{
  margin-top:200px;
}
/* #menu に合わせるために#submenuを追加しています */
#menu,
#submenu{
  width:980px;
  background:navy;
  margin-top:10px;
  margin-left:10px;
}
#menu{
height:80px;
background:navy;
top:0px;
z-index: 1;
}
#menu ul,
#submenu ul{
  list-style:none;
}
#menu li,
#submenu li{
display:block;
height:40px;
float:left;
line-height:40px;
}
#menu li a,
#submenu li a,
#menu li label{
display:block;
width:192px;
height:40px;
float:left;
font-weight:bold;
font-size:25px;
color:white;
text-align:center;
text-decoration:none;
}
#menu li a:hover,
#submenu li a:hover,
#menu li label:hover{
text-decoration:underline;
color:gold;
}
＝＝＝＝＝＝＝＝＝＝


＝＝＝＝HTML＝＝＝＝＝＝





  
      父の日ランキング
      おすすめギフト
      ポロシャツ
      シャツ
      トップ
       クリック 
  


  
    下着
    バスタオル
    パジャマ
    配送について
    トップ
  





【略】

：
：
＝＝＝＝＝＝＝＝＝＝

Answer

無事実装できたのですが、pcで見たときに他の商品にカーソルがある状態ですとhoverのopacityがフローティングナビにもかかり操作しづらくなってしまします。

他にもよい表示方法がないか探していた所、こちらのスマホページはスクロールするとナビメニューなどが出てきてわかりやすいかと思ったのですが、実装するには難しいでしょうか。あまりjsは詳しくありません。
https://item.rakuten.co.jp/dondon/coolmat-90-140/

Answer

何度も申し訳ございません。
ご案内いただいた方法ですと、例えばもっと見るをクリックしサブメニューを表示させた状態で、
おすすめギフトなどをクリックすると、見出し部分が隠れてしまいます。

Answer

ECマスターズの伊藤です。

> 無事実装できたのですが、pcで見たときに他の商品にカーソルがある状態ですとhoverのopacityがフローティングナビにもかかり操作しづらくなってしまします。

> ご案内いただいた方法ですと、例えばもっと見るをクリックしサブメニューを表示させた状態で、
> おすすめギフトなどをクリックすると、見出し部分が隠れてしまいます。

度々お手数おかけして申し訳ありません。
あらためて、HTML、CSSを記載いたしましたので、
修正していただけますでしょうか。

> 他にもよい表示方法がないか探していた所、こちらのスマホページはスクロールするとナビメニューなどが出てきてわかりやすいかと思ったのですが、実装するには難しいでしょうか。あまりjsは詳しくありません。

参考で頂きましたメニューを拝見させていただきました。
ぱっと見たところですが、jsの設定や以外にjQueryの組み込みなどが必要となるため、
あまりお詳しくないとのことですので、実装するのは難かしいのでは、と感じました。

＝＝＝＝＝HTML＝＝＝＝＝




  
      父の日ランキング
      おすすめギフト
      ポロシャツ
      シャツ
      トップ
       クリック 
  


  
    下着
    バスタオル
    パジャマ
    配送について
    トップ
  






【header】

:
:
＝＝＝＝＝＝＝＝＝＝

＝＝＝＝＝CSS＝＝＝＝＝
.ac-container{
  position: fixed;
  top:0;
  z-index: 100;
}
/* checkbxの非表示 */
.ac-container input{
   /* display: none; */
}
/* クリック の設定 */
.ac-container label{
    cursor: pointer; /* カーソルの形状 */
}
/* #submenu の設定 */
.ac-container div#submenu{
  height: 0px; /* クリック前の高さ */
   overflow: hidden;
   z-index: 10;
}
/* クリック後の #submenu の設定 */
input:checked ~ .ac-container  div#submenu{
   height: 80px; /* 高さ */
}
/* クリック後の #header の設定 */
input:checked ~ div#header{
   padding-top: 80px; /* 上部のpadding */
}
#menu li{
width:calc(100% / 6); /* #menu の li の数に合わせて修正してください */
}
#submenu li{
width:calc(100% / 5); /* #menu の li の数に合わせて修正してください */
}
.ac-container input:checked ~ #header{
  margin-top:200px;
}
/* #menu に合わせるために#submenuを追加しています */
#menu,
#submenu{
  width:980px;
  background:navy;
  margin-top:10px;
  margin-left:10px;
}
#menu{
height:80px;
background:navy;
top:0px;
z-index: 1;
}
#menu ul,
#submenu ul{
  list-style:none;
}
#menu li,
#submenu li{
display:block;
height:40px;
float:left;
line-height:40px;
}
#menu li a,
#submenu li a,
#menu li label{
display:block;
width:192px;
height:40px;
float:left;
font-weight:bold;
font-size:25px;
color:white;
text-align:center;
text-decoration:none;
}
#menu li a:hover,
#submenu li a:hover,
#menu li label:hover{
text-decoration:underline;
color:gold;
}
＝＝＝＝＝＝＝＝＝＝

Answer

https://www.rakuten.ne.jp/gold/yamaguchi-seni/sale/gift-feature1.html
左上にチェックボックスが表示されてしまうのですが、非表示するにはどうすればいいでしょうか。
また、もっと見るをクリックした時に、新たに表示されるサブメニューの項目に閉じるという項目を作りました。文字通りクリックするとサブメニューが閉じるようにしたいです。
※cssはサイズ等調整してあるので、引用する際は最新のものを使っていただけますと幸いです。
https://www.rakuten.ne.jp/gold/yamaguchi-seni/sale/css/gift-feature-content1.css

Answer

ECマスターズの伊藤です。

> 左上にチェックボックスが表示されてしまうのですが、非表示するにはどうすればいいでしょうか。

大変失礼いたしました。
チェックボックスを非表示にするCSSを、コメントアウト(/* */で囲うと無効になります)にしていたため、
コメントアウトの削除をお願いいたします。

＝＝＝＝＝修正前＝＝＝＝＝
/* checkbxの非表示 */
.ac-container input{
/* display: none; */
}
＝＝＝＝＝＝＝＝＝＝
↓↓
＝＝＝＝＝修正後＝＝＝＝＝
/* checkbxの非表示 */
.ac-container input{
display: none;
}
＝＝＝＝＝＝＝＝＝＝


> また、もっと見るをクリックした時に、新たに表示されるサブメニューの項目に閉じるという項目を作りました。文字通りクリックするとサブメニューが閉じるようにしたいです。

もっと見るをクリックした際と同様に、ac-1のチェックボックスの操作ができるようにしていただきますと、閉じる事ができます。

＝＝＝＝＝修正前＝＝＝＝＝
閉じる
＝＝＝＝＝＝＝＝＝＝
↓↓
＝＝＝＝＝修正後＝＝＝＝＝
閉じる
＝＝＝＝＝＝＝＝＝＝


a タグから label タグに修正になるため、label にも同様のデザインを適用するよう
CSSの修正いただきますようお願いいたします。

＝＝＝＝＝修正前＝＝＝＝＝
#submenu li a{
display:block;
width:192px;
height:40px;
float:left;
font-weight:bold;
font-size:25px;
color:white;
text-align:center;
text-decoration:none;
}
＝＝＝＝＝＝＝＝＝＝
↓↓
＝＝＝＝＝修正後＝＝＝＝＝
#submenu li a,
#submenu li label{
display:block;
width:192px;
height:40px;
float:left;
font-weight:bold;
font-size:25px;
color:white;
text-align:center;
text-decoration:none;
}
＝＝＝＝＝＝＝＝＝＝

Answer

コメントアウト削除しましたが、チェックボックスが消えません。

Answer

ECマスターズの伊藤です。

> コメントアウト削除しましたが、チェックボックスが消えません。

度々お手数おかけして申し訳ありません。
下記の通り修正いただき、ご確認いただきますよう、お願いいたします。

＝＝＝＝＝修正前＝＝＝＝＝
/* checkbxの非表示 */
.ac-container input{
display: none;
}
＝＝＝＝＝＝＝＝＝＝
↓↓
＝＝＝＝＝修正後＝＝＝＝＝
/* checkbxの非表示 */
input#ac-1{
display: none;
}
＝＝＝＝＝＝＝＝＝＝

Answer

ありがとうございます。チェックボックスは非表示に出来ました。

ポップアップウィンドウですが、クリックするとフローティングナビが上に表示されてしまいます。
	
		
	
		
		
			
				【重要】父の日に間に合う注文締切日について
		
			
				
				×
					
					
					
					
				閉じる
				
		
		

また、このポップアップウィンドウをフローティングナビの【配送について】の項目をクリックするとポップアップするようにしたいです。

Answer

ECマスターズの伊藤です。

> ポップアップウィンドウですが、クリックするとフローティングナビが上に表示されてしまいます。

ポップアップの z-index (重なりの順序)が 、ac-containerより小さくなっていることが原因となっていました。
z-indexを、101以上の数字に修正頂ますよう、お願いいたします。

＝＝＝＝＝修正前＝＝＝＝＝
.popup {
  background-color: #efefef;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8);
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 1000px;
  height: 850px;
  /*overflow-y: scroll;*/
z-index: 2;
}
＝＝＝＝＝＝＝＝＝＝＝＝＝
↓↓
＝＝＝＝＝修正後＝＝＝＝＝
.popup {
  background-color: #efefef;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8);
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 1000px;
  height: 850px;
  /*overflow-y: scroll;*/
z-index: 101;
}
＝＝＝＝＝＝＝＝＝＝＝＝＝


> また、このポップアップウィンドウをフローティングナビの【配送について】の項目をクリックするとポップアップするようにしたいです。

こちらのポップアップも、メニューの部分と同様、チェックボックスにチェックを入れると、
ポップアップが表示されるようになっていました。
labelのIDが同様のものですと、同じチェックボックスにチェックされてしまうため、
別のIDの用意し、そのIDにも同様のCSSを適用するようにすると、設置いただくことができます。

●メニューの配送について
＝＝＝＝＝修正前＝＝＝＝＝
配送について
＝＝＝＝＝＝＝＝＝＝＝＝＝
↓↓
＝＝＝＝＝修正後＝＝＝＝＝
配送について
＝＝＝＝＝＝＝＝＝＝＝＝＝

●下記HTMLを追加（

Answer

追記するとひょうじがくずれてしまうのですが、body内ならどこでもいいのですか？

●下記HTMLを追加（

Answer

ECマスターズの伊藤です。

> 追記するとひょうじがくずれてしまうのですが、body内ならどこでもいいのですか？

説明不足で申し訳ありません。

例えば
パジャマ【ここに入れる】
や
パジャマ【ここに入れる】
など、タグの途中でいれてしまうと崩れてしまいます。

の前後や、
直下
直前
前後
など、タグが閉じられたあとに記載していただきますよう、お願いいたします。

Answer

●下記HTMLを追加（

Answer

ECマスターズの伊藤です。

> 最後のは必要でしょうか？これがあると崩れるのですが、削除すると崩れることなく表示されます。

ご指摘いただきましたとおり、が1箇所余計についておりました。
削除頂いて問題ありません。お手数おかけして申し訳ありませでした。
再度確認したところ、も余計についておりましたので、下記の通り修正いただきますよう、お願いいたします。

＝＝＝＝＝＝＝＝＝＝


×




閉じる


＝＝＝＝＝＝＝＝＝＝


> こちらの設定ですが、例えばサブメニューを表示させた状態で、おすすめギフトをクリックすると、
> サブメニューが被ってしまいます。綺麗に表示させるにはどうすればいいでしょうか。

リンク先に、下記のCSSを設定をしていただきますと、メニューと被らずに表示させることができます。

＝＝＝＝＝＝＝＝＝＝
margin-top: -100px; /* 高さを調整してください */
padding-top: 100px; /* marginと同じ値を正の値で入力してください */
display: block;
＝＝＝＝＝＝＝＝＝＝

例えば、おすすめギフトのリンク先の場合、
＝＝＝＝＝＝＝＝＝＝

＝＝＝＝＝＝＝＝＝＝
をリンク先として、かつ、チェックボックスにチェックが入っている状態となりますので
下記の通り、CSSを指定していただきますよう、お願いいたします。

＝＝＝＝＝＝＝＝＝＝
input:checked ~ div#item-area .recommended-gift img{
margin-top: -200px;
padding-top: 200px;
display:block; 
}
＝＝＝＝＝＝＝＝＝＝