タグ : ネットショップで使えるCSS

【楽天ショップ用】クリックで下層が出現するアコーディオンカテゴリの作り方

20150914_main

こちらの記事は、2016年3月から内容を修正の上「繁盛レシピ」に再掲載しました!こちらからご確認できます。 こんにちは。カロリーメイトチョコ味とオレンジジュースを同時に口に含むと吐◯物の味になります、オガリア中村です。 […]

»続きを読む

-->

こんにちは。カロリーメイトチョコ味とオレンジジュースを同時に口に含むと吐◯物の味になります、オガリア中村です。
試してみようと思った方は変態ですよ。

今日は「クリックしたらスルっと出てくるカテゴリ一覧」を作ってみます。
(意識高い系に言い換えるとアコーディオンカテゴリ、スライドダウンカテゴリ、ドロップダウンカテゴリと呼びます。)

楽天ショップでのみ動作確認済みです。Yahoo!ストアでは検証できてないです、、、ゴメンなさい。。

こちらの記事を参考にしました。

デモ

デモ画面で動作を見る

↓こんな感じのデザインで完成します。↓

RMSへの貼付けだけで完了!(ただしデメリット有り)

楽天GOLDってなんだ、CSSファイルってなんだ、という方向けに
今回はRMS内への貼付けで完了する方法にしてみましたよ。

・・・がががGA!

Internet Explorer9以下はアコーディオンが作動しません。。
クリック前の初期状態で全カテゴリが見える状態になります。予めご承知くださいまっせ。

設置方法

コピペだけで済みますよ~!

  1. 次のタグを全てコピーします。

    オレンジ文字部分は適宜ご編集ください。

    <style type="text/css">
    <!--
    
    .category {
      width: 200px; /*全体の横幅*/
      border: 1px solid #333;
      font-size: 12px;
    }
    
    .category label {
        background: #333;
        color: #fff;
        padding: 12px;
        display: block;
        margin: 0;
        cursor: pointer;
        border-top: 1px solid #ccc;
    }
    
    .category label:first-child {
      border-top: none;
    }
    
    .category input.switch{
        display: none;
    }
    
    .category ul {
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    .category li {
        border-top: 1px dashed #ddd;
        padding: 12px 8px 12px 24px;
    }
    
    .category li:first-child {
        border-top: none;
    }
    
    .category li:before {
        content: ">";
        font-size: 9px;
        font-weight: bold;
        color: #ccc;
        margin-right: 8px;
    }
    
    .category input.switch + ul{
        height: 240px; /*クリックして出てくる高さ*/
        overflow: hidden;
    }
    
    .category input.switch:not(:checked) + ul{
        height: 0;
    }
    
    .category input.switch:checked + ul{
        height: 240px; /*クリックして出てくる高さ*/
    }
    
    -->
    </style>
    
    <div class="category">
        <label for="category-1">カテゴリー1</label>
        <input type="checkbox" id="category-1" class="switch" />
        <ul>
            <li><a href="">下カテゴリ</a></li>
            <li><a href="">下カテゴリ</a></li>
            <li><a href="">下カテゴリ</a></li>
            <li><a href="">下カテゴリ</a></li>
            <li><a href="">下カテゴリ</a></li>
        </ul>
        <label for="category-2">カテゴリー2</label>
        <input type="checkbox" id="category-2" class="switch" />
        <ul>
            <li><a href="">下カテゴリ</a></li>
            <li><a href="">下カテゴリ</a></li>
            <li><a href="">下カテゴリ</a></li>
            <li><a href="">下カテゴリ</a></li>
            <li><a href="">下カテゴリ</a></li>
        </ul>
        <label for="category-3">カテゴリー3</label>
        <input type="checkbox" id="category-3" class="switch" />
        <ul>
            <li><a href="">下カテゴリ</a></li>
            <li><a href="">下カテゴリ</a></li>
            <li><a href="">下カテゴリ</a></li>
            <li><a href="">下カテゴリ</a></li>
            <li><a href="">下カテゴリ</a></li>
        </ul>
    </div>
  2. RMSに貼付ければ、完了!
    (RMSメインメニュー > デザイン設定 > ヘッダー・フッターレフトナビ、レフトナビ部)
    20150911_img1

   

ブランド別やサイズ別など、カテゴリの登録内容がかなり多いショップ様にオススメです。
レフトナビだけが縦に伸びていくのを防ぐことが出来ます。

こんなデザインが欲しい!などご要望あれば教えてください。

-->

「お買物かごボタン」を画像に差替える方法 (楽天ショップ版)

楽天ショップの「お買物かごボタン」を画像に差替える方法

こんにちは、朝方の血圧が低すぎて、朝から死にたくなります。オガリア中村です。 不定期どころかいっそ徹底して記事をアップしなかったこの間、ささっと28歳になりました。母からの誕生日プレゼントは渋谷ギャルがつけてそうなジャラ […]

»続きを読む

【ネットショップ出店ビギナー必見!】お買物かご付近のスペック表テンプレート3デザイン

ネットショップのスペック表テンプレート

こちらの記事は、2016年3月から内容を修正の上「繁盛レシピ」に再掲載しました!こちらからご確認できます。 こんにちは。どきゅーんずきゅーん胸撃つogaRia中村です。ばくーんどくーん高鳴ります。 今回は、ネットショップ […]

»続きを読む

【ネットショップで使えるCSSコピペ】左側にスクロール追従バナーを複数設置する方法

0212-2

※記事の内容を精査し、こちらに載せ直しました。→【最新版・超かんたん!】楽天/Yahoo!のページに「スクロール追従バナー」を左右複数並べる方法 こんにちは。コンビニ店員さんの袋詰め終了までにお金を用意する事へ命をかけて […]

»続きを読む