app/template/anivbtob/Block/slim_header.twig line 1

Open in your IDE?
  1. <header class="ec-headerRole">
  2. <!-- タイトル -->
  3. <h1 class="ec-headerTitle">
  4. <a href="{{ url('homepage') }}">{{ BaseInfo.shop_name }}</a>
  5. </h1>
  7. <!-- ログイン後に表示 -->
  8. {% if is_granted('ROLE_USER') %}
  9. <div class="ec-headerNaviRole">
  10.     <!-- カテゴリ -->
  11.     {% set Categories = repository('Eccube\\Entity\\Category').getList() %}
  12.     {% macro tree(Category) %}
  13.         {% from _self import tree %}
  14.         <a href="{{ url('product_list') }}?category_id={{ Category.id }}">
  15.             {{ Category.name }}
  16.         </a>
  17.         {% if Category.children|length > 0 %}
  18.             <ul>
  19.                 {% for ChildCategory in Category.children %}
  20.                     <li>
  21.                         {{ tree(ChildCategory) }}
  22.                     </li>
  23.                 {% endfor %}
  24.             </ul>
  25.         {% endif %}
  26.     {% endmacro %}
  28.     {# @see https://github.com/bolt/bolt/pull/2388 #}
  29.     {% from _self import tree %}
  31.     <div class="ec-categoryNaviRole">
  32.        <div class="ec-categoryNaviRole__title">カテゴリ</div>
  33.         <div class="ec-categoryNaviRole__item">
  34.             <ul class="ec-categoryNaviRole__lists">
  35.                 {% for Category in Categories %}
  36.                     <li>
  37.                         {{ tree(Category) }}
  38.                     </li>
  39.                 {% endfor %}
  40.             </ul>
  41.         </div>
  42.     </div>
  44.     <!-- ログイン -->
  45.     {{ include('Block/login.twig') }}
  46.     <!-- カート -->
  47.     <div class="ec-headerRole__cart">
  48.     {{ include('Block/cart.twig') }}
  49.     </div>
  50. </div>
  51. <!-- SP用ナビアイコン -->
  52. <div class="ec-headerRole__navSP">
  53.     {{ include('Block/nav_sp.twig') }}
  54. </div>
  55. {% endif %}
  56. </header>
  58. <style>
  59. /***********************************************************************
  60.  slime_header ver.1.0
  61. ***********************************************************************/
  64. /* ▼▼▼ 文字・アイコン・背景色や横幅の変更ここから ▼▼▼
  65. ***********************************************************************/
  66. .ec-headerRole{
  67.     max-width: none;/* ヘッダー横幅制限したい場合は1130pxに変更 */
  68.     background: rgba(255,255,255,1);/* 背景色を変更 */
  69.     height: 60px;/* ヘッダーの高さ */
  70. }
  71. .ec-headerRole .ec-headerTitle a,
  72. .ec-headerNav .ec-headerNav__itemLink,
  73. .ec-headerNav .ec-headerNav__item .ec-headerNav__itemIcon,
  74. .ec-cartNavi,
  75. .ec-categoryNaviRole__title,
  76. .ec-headerRole .ec-categoryNaviRole{
  77.     color: #000;/* ヘッダー基本的な文字・アイコン色を変更 */
  78. }
  80. @media (min-width:768px){
  82.     .ec-headerRole:hover{
  83.         background: rgba(255,255,255,1);/* 背景色を変更 */
  84.     }
  85.     .ec-headerNav .ec-headerNav__item .ec-headerNav__itemIcon,
  86.     .ec-cartNavi{
  87.         color: #757575;/* PC時アイコンの色を変更 */
  88.     }
  89.     .ec-headerRole .ec-categoryNaviRole li a{
  90.         width: 180px;/* カテゴリの横幅変更はこちら */
  91.         color: #282828;/* カテゴリの文字色を変更 */
  92.         background: rgba(255,255,255,0.8);/* カテゴリの背景色変更はこちら rgba(255,255,255,0.8) ← #fffなどの形式でも指定可能 */
  93.     }
  94.     .ec-headerRole .ec-categoryNaviRole ul ul{
  95.         left: 180px; /* カテゴリ横幅変更時に合わせて同じ数値に変更 */
  96.     }
  97.     .ec-headerRole .ec-categoryNaviRole li a:hover{
  98.         background: rgba(250,250,250,0.8);/* カテゴリhover時の背景色変更はこちら rgba(255,255,255,0.8) ← #fffなどの形式でも指定可能 */
  99.     }
  100.     .ec-headerRole .ec-categoryNaviRole li ul:before {
  101.         color: #282828;/* カテゴリの>(アローアイコン)の色変更はこちら */
  102.     }
  103. }
  105. /* メインコンテンツ外枠の横幅固定を外す */
  106. .ec-layoutRole .ec-layoutRole__contents{
  107.     max-width: none; /* 1150px; */
  108. }
  110. /* スライドショーの横幅固定を外す */
  111. .ec-sliderRole{
  112.    max-width: none; /* 1130px; */
  113.    padding-left: 0; /* 20px; */
  114.    padding-right: 0; /* 20px; */
  115. }
  116. /* ▲▲▲ 文字・アイコン・背景色や横幅の変更ここまで ▲▲▲
  117. ***********************************************************************/
  119. .ec-headerRole{
  120.     display: flex;
  121.     justify-content: space-between;
  122.     align-items: center;
  123.     position: relative;
  124.     padding: 15px 30px;
  125.     z-index: 999;
  126. }
  127. .ec-headerRole .ec-headerTitle{
  128.     font-size: 18px;
  129.     font-weight: bold;
  130.     margin: 0 0 0 30px;
  131. }
  132. .ec-headerRole .ec-headerNav{
  133.     margin-right: 0;
  134. }
  135. .ec-headerRole .ec-headerNaviRole{
  136.     width: auto;
  137.     max-width: none;
  138.     padding: 0;
  139.     margin: 0 0 0 auto;
  140. }
  141. .ec-headerNav .ec-headerNav__item{
  142.     font-size: 14px;
  143. }
  144. .ec-headerNav .ec-headerNav__itemIcon {//SPアイコン表示
  145.     display: inline-block;
  146.     margin-right: 5px;
  147.     margin-left: 5px;
  148.     font-size: 18px;
  149. }
  150. .ec-headerNav .ec-headerNav__item .ec-headerNav__itemIcon{
  151.     display: inline-block;
  152. }
  153. .ec-cartNavi {
  154.     padding: 3px 0 0 10px;
  155. }
  156. .ec-headerNavSP{
  157.     top: 8px;
  158. }
  159. .ec-headerNav{
  160.     display: none;
  161. }
  162. .ec-headerRole .ec-categoryNaviRole{
  163.     display: none;
  164. }
  166. @media (min-width:768px){
  167.    .front_page .ec-headerRole{
  168.         position: fixed;
  169.         top: 0;
  170.         left: 0;
  171.         width: 100%;
  172.         transition: 0.4s;
  173.     }
  174.     .ec-headerRole a:hover{
  175.         text-decoration: none;
  176.         opacity: 0.8;
  177.     }
  178.     .ec-headerRole .ec-headerTitle{
  179.         margin: 0;
  180.     }
  181.     .ec-headerRole .ec-headerNav{
  182.         margin-right: 20px;
  183.     }
  184.     .ec-headerNav .ec-headerNav__item{
  185.         margin: 0 10px;
  186.     }
  187.     .ec-headerNav .ec-headerNav__item .ec-headerNav__itemIcon {
  188.         display: none;/*アイコン表示したい場合はinleine-blockに変更*/
  189.     }
  190.     .ec-headerNav .ec-headerNav__item a{
  191.         font-size: 14px;
  192.         font-weight: bold;
  193.     }
  194.     .ec-headerRole .ec-cartNavi {
  195.         padding: 12px 17px 10px;
  196.     }
  197.     .ec-headerNav{
  198.         display: block;
  199.     }
  200.     .ec-headerRole .ec-categoryNaviRole{
  201.         position: relative;
  202.         padding: 0;
  203.         font-size: 14px;
  204.         font-weight: bold;
  205.         color: #585858;
  206.         margin-right: 18px;
  207.         transform: translateY(1px);
  208.         max-width: none;
  209.         width: auto;
  210.         display: block;
  211.     }
  212.     .ec-headerRole .ec-categoryNaviRole__title{
  213.         cursor: pointer;
  214.     }
  215.     .ec-headerRole .ec-categoryNaviRole__item{
  216.         position: absolute;
  217.         top: 0;
  218.         left: 0;
  219.         display: none;
  220.         padding-top: 45px;
  221.     }
  222.     .ec-headerRole .ec-categoryNaviRole:hover .ec-categoryNaviRole__item{
  223.         display: block;
  224.     }
  225.     .ec-headerRole .ec-categoryNaviRole ul{
  226.         margin: 0;
  227.         padding: 0;
  228.     }
  229.     .ec-headerRole .ec-categoryNaviRole ul ul{
  230.         position: absolute;
  231.         top: 0;
  232.     }
  233.     .ec-headerRole .ec-categoryNaviRole ul ul li{
  234.         display: none;
  235.     }
  236.     .ec-headerRole .ec-categoryNaviRole li:hover>ul>li{
  237.         display: block;
  238.     }
  239.     .ec-headerRole .ec-categoryNaviRole li{
  240.         list-style: none;
  241.         position: relative;
  242.         box-sizing: border-box;
  243.     }
  244.     .ec-headerRole .ec-categoryNaviRole li a{
  245.         display: block;
  246.         padding: 15px;
  247.     }
  248.     .ec-headerRole .ec-categoryNaviRole li ul:before {
  249.         content: "\f054";
  250.         font-family: "Font Awesome 5 Free";
  251.         font-weight: 900;
  252.         font-size: 10px;
  253.         position: absolute;
  254.         top: 18px;
  255.         right: auto;
  256.         left: -20px;
  257.     }
  258. }
  260. {# .ec-layoutRole .ec-layoutRole__main{
  261.     height: calc(100vh - 60px);
  262. } #}
  263. /***********************************************************************
  264.  slime_header ここまで
  265. ***********************************************************************/
  266. </style>