• 文字サイズ
  • 小
  • 中
  • 大


解決済

レフトナビにアコーディオンメニューを入れたい

  • 相談者：非公開
  • 2020/07/28 17:08
ＰＣのレフトナビにアコーディオンメニュー（ソースを添付済）を入れたのですが、「プレビュー画面へ進む」ボタンをクリック後に遷移したプレビュー画面に「登録する」ボタンが表示されません。
問題がある場所をご指摘いただけると助かります。


<!--商品一覧-->

<table width="190" bgcolor="#825b0c" cellspacing="1"
cellpadding="1">
<tr>
<td bgcolor="#825b0c" align="center" >
<b>
<font size="4" color="#ffffff">
商 品 一 覧
</font>
</b>
</td>
</tr>
</table>

<style>
.menu {
max-width: 190px;
}

.menu a {
display: block;
padding: 15px;
text-decoration: none;
color: #000;
}

label {
display: block;
margin: 0 0 4px 0;
padding : 15px;
line-height: 1;
color :#fff;
background : #A37619;
cursor :pointer;
}

input {
display: none;
}

.menu ul {
font-size: 13px;
margin: 0;
padding: 0;
background :#FFF1BA;
list-style: none;
}

.menu li {
height: 0;
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}

#menu_bar01:checked ~ #links01 li,
#menu_bar02:checked ~ #links02 li,
#menu_bar03:checked ~ #links03 li,
#menu_bar04:checked ~ #links04 li,
#menu_bar05:checked ~ #links05 li,
#menu_bar06:checked ~ #links06 li,
#menu_bar07:checked ~ #links07 li,
#menu_bar08:checked ~ #links08 li,
#menu_bar09:checked ~ #links09 li,
#menu_bar10:checked ~ #links10 li,
#menu_bar11:checked ~ #links11 li,
#menu_bar12:checked ~ #links12 li,
#menu_bar13:checked ~ #links13 li,
#menu_bar14:checked ~ #links14 li,
#menu_bar15:checked ~ #links15 li {
height: 54px;
opacity: 1;
}
</style>

<div class="menu">
<label for="menu_bar01">▼ 迷ったらコレ</label>
<input type="checkbox" id="menu_bar01" class="accordion" />
<ul id="links01">
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/">お試し13種</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/">店長オススメ5種</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/">お試しティーバッグ2種</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/">贅沢16種セット</a></li>
</ul>
<label for="menu_bar02">▼ 凍頂烏龍茶</label>
<input type="checkbox" id="menu_bar02" class="accordion" />
<ul id="links02">
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">蘭級</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">松級</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">ティーバッグ</a></li>
</ul>
<label for="menu_bar03">▼ 高山茶</label>
<input type="checkbox" id="menu_bar03" class="accordion" />
<ul id="links03">
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">竹級</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">特級高山茶ティーバッグ</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">阿里山</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">梨山</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">梨山ティーバッグ</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">大禹嶺</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">阿里山金萱茶</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">阿里山金萱茶ティーバッグ</a></li>
</ul>
<label for="menu_bar04">▼ ジャスミン茶</label>
<input type="checkbox" id="menu_bar04" class="accordion" />
<ul id="links04">
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">ジャスミン茶</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">ジャスミン茶ティーバッグ</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">薔薇香片茶ティーバッグ</a></li>
</ul>
<label for="menu_bar05">▼ 東方美人茶</label>
<input type="checkbox" id="menu_bar05" class="accordion" />
<ul id="links05">
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">東方美人茶</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">ティーバッグ</a></li>
</ul>
<label for="menu_bar06">▼ 鉄観音</label>
<input type="checkbox" id="menu_bar06" class="accordion" />
<ul id="links06">
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">木柵鉄観音</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">特級鉄観音</a></li>
</ul>
<label for="menu_bar07">▼ 黒烏龍茶</label>
<input type="checkbox" id="menu_bar07" class="accordion" />
<ul id="links07">
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">黒烏龍茶</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">菊黒烏龍茶ティーバッグ</a></li>
</ul>
<label for="menu_bar08">▼ 文山包種茶</label>
<input type="checkbox" id="menu_bar08" class="accordion" />
<ul id="links08">
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">文山包種茶</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">薔薇包種茶ティーバッグ</a></li>
</ul>
<label for="menu_bar09">▼ 緑茶</label>
<input type="checkbox" id="menu_bar09" class="accordion" />
<ul id="links09">
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">三峡緑茶</a></li>
</ul>
<label for="menu_bar10">▼ 紅茶</label>
<input type="checkbox" id="menu_bar10" class="accordion" />
<ul id="links10">
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">日月潭紅茶</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">ティーバッグ</a></li>
</ul>
<label for="menu_bar11">▼ 桂花烏龍茶</label>
<input type="checkbox" id="menu_bar11" class="accordion" />
<ul id="links11">
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">桂花烏龍茶</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">ティーバッグ</a></li>
</ul>
<label for="menu_bar12">▼ 花茶</label>
<input type="checkbox" id="menu_bar12" class="accordion" />
<ul id="links12">
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">菊花茶</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">桂花烏龍茶</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">桂花烏龍茶ティーバッグ</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">ジャスミン茶</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">ジャスミン茶ティーバッグ</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">薔薇包種茶ティーバッグ</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">薔薇香片茶ティーバッグ</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">菊黒烏龍茶ティーバッグ</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">薫衣草烏龍茶</a></li>
</ul>
<label for="menu_bar13">▼ ブレンド茶</label>
<input type="checkbox" id="menu_bar13" class="accordion" />
<ul id="links13">
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">薔薇包種茶ティーバッグ</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">薔薇香片茶ティーバッグ</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">菊黒烏龍茶ティーバッグ</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">枸杞養生茶ティーバッグ</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">生姜美人茶ティーバッグ</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">薫衣草烏龍茶</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">蘋果鉄観音</a></li>
</ul>
<label for="menu_bar14">▼ ティーバッグ</label>
<input type="checkbox" id="menu_bar14" class="accordion" />
<ul id="links14">
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">特級凍頂烏龍茶</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">特級高山茶</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">高山茶梨山</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">阿里山金萱茶</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">東方美人茶</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">ジャスミン茶</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">桂花烏龍茶</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">日月潭紅茶</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">薔薇包種茶ティーバッグ</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">薔薇香片茶ティーバッグ</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">菊黒烏龍茶ティーバッグ</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">枸杞養生茶ティーバッグ</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">生姜美人茶ティーバッグ</a></li>
</ul>
<label for="menu_bar15">▼ お茶請け等</label>
<input type="checkbox" id="menu_bar15" class="accordion" />
<ul id="links15">
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">ドライフルーツ</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">中華・中華菓子</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">和菓子</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">せんべい</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">ナッツ</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">クッキー・焼き菓子</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">洋菓子</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">ケーキ</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">栄養補助食品</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">ドリンク</a></li>
<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">その他</a></li>
</ul>
</div>
投稿内容について報告する
今気になってる疑問、
セミナーに参加すれば解決するかも！？
日本全国のネットショップ12,000社が参加！
ネットショップでお悩みがある方はまずはオンラインセミナーへGO！
セミナー詳細はこちら
広告０円で楽天の売上アップ続出！
ECマスターズチャンネルをチェック！
総視聴回数15万回突破！
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください！
ご視聴はこちら

  • 返信者：非公開
  • 2020/07/28 19:51
ECマスターズの田中です。

メニューの表示/非表示を管理するチェックボックスを隠すために

input {
display: none;
}
………（省略）………
  • 返信者：非公開（質問者）
  • 2020/07/29 12:36
田中様

早急にご回答いただきましてありがとうございます。

無事に更新することができました。
コーディングが苦手なのでとても助かります。………（省略）………
このフォーラムへの質問は終了しました
質問を検索する
返信も検索対象にする

カテゴリーから探す