app/template/default/Block/category_nav_sp.twig line 1

Open in your IDE?
  1. {# スタイルを上書きしています #}
  2. <style>
  3.     .ec-itemNav {
  4.         margin: 0;
  5.         padding: 0;
  6.         width: 100%;
  7.         height: auto;
  8.         text-align: center;
  9.     }
  11. .ec-itemNav__nav li a {
  12.   /*display: block;*/
  13.   /*border-bottom: 1px solid #E8E8E8;*/
  14.   /*margin: 0;*/
  15.   /*padding: 16px;*/
  16.   /*height: auto;*/
  17.   color: #fff;
  18.   /*font-size: 16px;*/
  19.   /*font-weight: bold;*/
  20.   /*line-height: 20px;*/
  21.   /*text-decoration: none;*/
  22.   /*text-align: left;*/
  23.   background: #1365af;
  24.   /*border-bottom: 1px solid #E8E8E8;*/
  25.   /*@include media_desktop {*/
  26.   /*  text-align: center;*/
  27.   /*  border-bottom: none;*/
  28.   /*}*/
  29. }
  31. .ec-itemNav__nav > li:hover > a {
  32.   background: #3587D1;
  33. }
  35. .ec-itemNav__nav li ul li a {
  36.   /*border-bottom: 1px solid #E8E8E8;*/
  37.   /*padding: 16px 22px 16px 16px;*/
  38.   /*font-size: 16px;*/
  39.   /*font-weight: bold;*/
  40.   color: white;
  41.   /*text-align: left;*/
  42.   /*background: #03559F;*/
  43.   background: #545454;
  44. }
  46. .ec-itemNav__nav > li:hover li:hover > a {
  47.   background: #3587D1;
  48. }
  50. .ec-drawerRole .ec-headerLinkArea .ec-headerLink__item {
  51.     /*display: block;*/
  52.     /*border-bottom: 1px solid #ccc;*/
  53.     /*padding: 15px 20px;*/
  54.     /*font-size: 16px;*/
  55.     /*font-weight: bold;*/
  56.     color: white;
  57.     background-color: #1266ac;
  58. }
  61. .ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
  62.     position: relative;
  63.     border: 0;
  64.     background: #1266ac;
  65.     color: #fff;
  66.     border-top-right-radius: 10px;
  67.     border-top-left-radius: 10px;
  68. }
  70. .ec-drawerRole {
  71.     /*overflow-y: scroll;*/
  72.     background: #EBEBEB;
  73.     /*width: 260px;*/
  74.     /*height: 100vh;*/
  75.     /*transform: translateX(-300px);*/
  76.     /*position: fixed;*/
  77.     /*top: 0;*/
  78.     /*left: 0;*/
  79.     /*z-index: 1;*/
  80.     /*transition: z-index 0ms 1ms;*/
  81. }
  83. </style>
  84. <script>
  85. $(function() {
  86.     // スマホのドロワーメニュー内の下層カテゴリ表示
  87.     // TODO FIXME スマホのカテゴリ表示方法
  88.     $('.ec-itemNav_custom ul a').click(function() {
  89.         var child = $(this).siblings();
  90.         if (child.length > 0) {
  91.             child.slideToggle();
  92.             return false;
  93.             // if (child.is(':visible')) {
  94.             //     return true;
  95.             // } else {
  96.             //     child.slideToggle();
  97.             //     return false;
  98.             // }
  99.         }
  100.     });
  101. });
  103. </script>
  105. <div class="ec-itemNav_custom">
  106.     <ul class="ec-itemNav__nav">
  107.         <li>
  108.             <a href="/products/list?category_id=40">カウンタートップタイプ浄水器</a>
  110.         </li>
  111.         <li>
  112.             <a href="#">ビルトイン浄水器</a>
  113.             <ul>
  114.                 <li>
  115.                     <a href="/user_data/builtin_select01">浄水器本体から選ぶ</a>
  116.                     {#<ul>#}
  117.                     {#    <li>#}
  118.                     {#        <a href="/products/list?category_id=78">Aquaextra</a>#}
  120.                     {#    </li>#}
  121.                     {#    <li>#}
  122.                     {#        <a href="/products/list?category_id=79">Model-750</a>#}
  124.                     {#    </li>#}
  125.                     {#    <li>#}
  126.                     {#        <a href="/products/list?category_id=80">Model-D400</a>#}
  128.                     {#    </li>#}
  129.                     {#</ul>#}
  130.                 </li>
  131.                 <li>
  132.                     <a href="/user_data/builtin_select02">水栓から選ぶ</a>
  133.                     {#<ul>#}
  134.                     {#    <li>#}
  135.                     {#        <a href="/products/list?category_id=70">兼用水栓</a>#}
  137.                     {#    </li>#}
  138.                     {#    <li>#}
  139.                     {#        <a href="/products/list?category_id=73">専用水栓</a>#}
  141.                     {#    </li>#}
  143.                     {#</ul>#}
  145.                 </li>
  146.                 <li>
  147.                     <a href="/user_data/builtin_select03">すでに水栓をお持ちの場合</a>
  148.                     {#<ul>#}
  149.                     {#    <li>#}
  150.                     {#        <a href="/products/list?category_id=86">本体だけをマルチピュア浄水器に変更できるタイプ</a>#}
  152.                     {#    </li>#}
  153.                     {#    <li>#}
  154.                     {#        <a href="/products/list?category_id=87">お好きな水栓を選べる直圧式（Ⅰ型）</a>#}
  156.                     {#    </li>#}
  158.                     {#</ul>#}
  160.                 </li>
  161.             </ul>
  163.         </li>
  165.         <li>
  166.             <a href="/products/list?category_id=43">浴室シャワー</a>
  167.         </li>
  168.         <li>
  169.             <a href="/products/list?category_id=44">カートリッジ</a>
  170.             {#<ul>#}
  171.             {#    <li>#}
  172.             {#        <a href="/products/list?category_id=59">#}
  173.             {#            互換性カードリッジ#}
  174.             {#        </a>#}
  176.             {#    </li>#}
  177.             {#    <li>#}
  178.             {#        <a href="/products/list?category_id=58">#}
  179.             {#            浴室シャワー用#}
  180.             {#        </a>#}
  182.             {#    </li>#}
  183.             {#    <li>#}
  184.             {#        <a href="/products/list?category_id=57">#}
  185.             {#            Aquaminiシリーズ#}
  186.             {#        </a>#}
  188.             {#    </li>#}
  189.             {#    <li>#}
  190.             {#        <a href="/products/list?category_id=56">#}
  191.             {#            Aquaextraシリーズ#}
  192.             {#        </a>#}
  194.             {#    </li>#}
  195.             {#    <li>#}
  196.             {#        <a href="/products/list?category_id=55">#}
  197.             {#            MODEL-1000シリーズ#}
  198.             {#        </a>#}
  200.             {#    </li>#}
  201.             {#    <li>#}
  202.             {#        <a href="/products/list?category_id=54">#}
  203.             {#            MODEL-800シリーズ#}
  204.             {#        </a>#}
  206.             {#    </li>#}
  207.             {#    <li>#}
  208.             {#        <a href="/products/list?category_id=53">#}
  209.             {#            MODEL-750シリーズ#}
  210.             {#        </a>#}
  212.             {#    </li>#}
  213.             {#    <li>#}
  214.             {#        <a href="/products/list?category_id=52">#}
  215.             {#            MODEL-500シリーズ#}
  216.             {#        </a>#}
  218.             {#    </li>#}
  219.             {#    <li>#}
  220.             {#        <a href="/products/list?category_id=51">#}
  221.             {#            MODEL-D400シリーズ#}
  222.             {#        </a>#}
  224.             {#    </li>#}
  225.             {#    <li>#}
  226.             {#        <a href="/products/list?category_id=50">#}
  227.             {#            MODEL-250シリーズ#}
  228.             {#        </a>#}
  230.             {#    </li>#}
  231.             {#    <li>#}
  232.             {#        <a href="/products/list?category_id=49">#}
  233.             {#            MP750シリーズ#}
  234.             {#        </a>#}
  236.             {#    </li>#}
  237.             {#    <li>#}
  238.             {#        <a href="/products/list?category_id=48">#}
  239.             {#            MP400シリーズ#}
  240.             {#        </a>#}
  242.             {#    </li>#}
  243.             {#    <li>#}
  244.             {#        <a href="/products/list?category_id=47">#}
  245.             {#            アクアボーイ#}
  246.             {#        </a>#}
  248.             {#    </li>#}
  249.             {#    <li>#}
  250.             {#        <a href="/products/list?category_id=46">#}
  251.             {#            アクアドーム#}
  252.             {#        </a>#}
  254.             {#    </li>#}
  255.             {#</ul>#}
  256.         </li>
  257.         <li>
  258.             <a href="/products/list?category_id=45">部品</a>
  259.             <ul>
  260.                 <li><a href="/products/list?category_id=60">- 本体関連部品</a></li>
  261.                 <li><a href="/products/list?category_id=61">- 本体付属部品</a></li>
  262.                 <li><a href="/products/list?category_id=62">- 吐水口関連部品</a></li>
  263.                 <li><a href="/products/list?category_id=63">- 給水ホース関連部品</a></li>
  264.                 <li><a href="/products/list?category_id=64">- 切り替えコック関連部品</a></li>
  265.                 <li><a href="/products/list?category_id=65">- ビルトイン用部品</a></li>
  266.                 <li><a href="/products/list?category_id=66">- シャワー浄水器部品</a></li>
  267.                 <li><a href="/products/list?category_id=67">- 共通・分岐関連部品</a></li>
  268.                 <li><a href="/products/list?category_id=68">- アクアドーム</a></li>
  269.                 <li><a href="/products/list?category_id=69">- カウンタートップ</a></li>
  270.             </ul>
  271.         </li>
  272.         <li>
  273.             <a href="/products/list?category_id=42">レンタル浄水器</a>
  274.         </li>
  275.     </ul>
  276. </div>
  277. <br />