app/template/default/Block/header1.twig line 34

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  13. {% block stylesheet %}
  14.     <link rel="stylesheet" href="{{ asset('assets/css/main_module.css', 'user_data') }}">
  15.     <link rel="stylesheet" href="{{ asset('assets/css/header_style.css', 'user_data') }}">
  16. {% endblock %}
  18. {% block javascript %}
  19.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  20.     <script src="{{ asset('assets/js/header.js', 'user_data') }}"></script>
  21. {% endblock  %}
  24. <div class="fixed-header">
  25.     <section>
  26.     <div id="site_header">
  27.         <div class="header_logo">
  28.             <a href="https://photo-pub.com/books">
  29.                 <img src="{{ asset('assets/img/common/photopub_title.svg', 'user_data') }}">
  30.             </a>
  31.         </div>
  32.         <div class="header_menus">
  33.             <div class="header_inner1">
  34.                 {{ render(path('block_search_product')) }}
  35.                 <div class="header_link1 pc">
  36.                     <ul class="link1">
  37.                         <li><a href="https://photo-pub.co.jp/news">NEWS</a></li>
  38.                         <li><a href="https://photo-pub.co.jp/company">会社概要</a></li>
  39.                         <li><a href="{{ url('contact') }}">お問い合わせ</a></li>
  40.                         <li><a href="{{ url('opinion') }}">意見箱</a></li>
  41.                     </ul>
  42.                 </div>
  43.                 <div class="header_link2">
  44.                     {{ include('Block/login.twig') }}
  45.                 </div>
  47.                 <div class="hamburger-menu sp">
  48.                     <button id="hamburger" class="hamburger">
  49.                         <span></span>
  50.                         <span></span>
  51.                         <span></span>
  52.                     </button>
  54.                     <nav id="menus" class="menus">
  55.                         <ul class="hamburger-tabs">
  56.                             <li class="menu-item">
  57.                                 <a href="https://photo-pub.com/">TOP</a>
  58.                             </li>
  59.                             <li class="menu-item">
  60.                                 <a href="{{ url('homepage') }}">フォトパブ堂書店</a>
  61.                                 <ul class="submenu">
  62.                                     <li><span></span><a href="{{ url('homepage') }}books">  フォトパブ堂書店TOP</a></li>
  63.                                     <li><span></span><a href="{{ url('homepage') }}products/list?category_id=1">  鉄道</a></li>
  64.                                     <li><span></span><a href="{{ url('homepage') }}products/list?category_id=2">  バス</a></li>
  65.                                     <li><span></span><a href="{{ url('homepage') }}products/list?category_id=5">  古地図・歴史散歩（地域）</a></li>
  66.                                     <li><span></span><a href="{{ url('homepage') }}products/list?category_id=7">  その他</a></li>
  67.                                 </ul>
  68.                             </li>
  69.                             <li class="menu-item">
  70.                                 <a href="https://jihi.photo-pub.co.jp/">自費出版サービス</a>
  71.                                 <ul class="submenu">
  72.                                     <li><span></span><a href="https://jihi.photo-pub.co.jp/">詳細情報</a></li>
  73.                                 </ul>
  74.                             </li>
  75.                             <li class="menu-item">
  76.                                 <a href="https://photo-pub.co.jp/event">イベント情報</a>
  77.                                 <ul class="submenu">
  78.                                     <li><span></span><a href="https://photo-pub.co.jp/event">イベント一覧</a></li>
  79.                                 </ul>
  80.                             </li>
  81.                             <li class="menu-item">
  82.                                 <a href="https://photo-pub.co.jp/recruit">各種募集</a>
  83.                                 <ul class="submenu">
  84.                                     <li><span></span><a href="https://photo-pub.co.jp/recruit">募集一覧</a></li>
  85.                                 </ul>
  86.                             </li>
  87.                         </ul>
  89.                         <ul class="hamburger-links">
  90.                             <li><a href="https://photo-pub.co.jp/news">NEWS</a></li>
  91.                             <li><a href="https://photo-pub.co.jp/company">会社概要</a></li>
  92.                             <li><a href="{{ url('contact') }}">お問い合わせ</a></li>
  93.                             <li><a href="{{ url('opinion') }}">意見箱</a></li>
  94.                             <li><a href="https://photo-pub.com/help/privacy">プライバシー<br class="br_linkbox">ポリシー</a></li>
  95.                             <li><a href="https://photo-pub.com/help/tradelaw">特定商取引法<br class="br_linkbox">に基づく表記</a></li>
  96.                         </ul>
  98.                         <ul class="hamburger-sns">
  99.                             <li><a><img src="{{ asset('assets/img/common/sns_ic_insta.png', 'user_data') }}" alt="insta"></a></li>
  100.                             <li><a href="https://www.youtube.com/@%E3%83%95%E3%82%A9%E3%83%88%E3%83%91%E3%83%96"><img src="{{ asset('assets/img/common/sns_ic_youtube.svg', 'user_data') }}" alt="youtube"></a></li>
  101.                             <li><a href="https://twitter.com/share?url=https://photo-pub.co.jp/&via=photopub402&hashtags=%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E3%83%95%E3%82%A9%E3%83%88%E3%83%91%E3%83%96%E3%83%AA%E3%83%83%E3%82%B7%E3%83%B3%E3%82%B0&text=%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E3%83%95%E3%82%A9%E3%83%88%E3%83%91%E3%83%96%E3%83%AA%E3%83%83%E3%82%B7%E3%83%B3%E3%82%B0"><img src="{{ asset('assets/img/common/sns_ic_x.svg', 'user_data') }}" alt="x"></a></li>
  102.                             <li><a href="http://www.facebook.com/share.php?u=https://photo-pub.co.jp/"><img src="{{ asset('assets/img/common/sns_ic_fb.svg', 'user_data') }}" alt="fb"></a></li>
  103.                         </ul>
  104.                     </nav>
  106.                 </div>
  107.             </div>
  108.             <div class="header_inner2 pc">
  109.                 <ul class="select_btns">
  110.                     <li class="btn"><a href="https://photo-pub.com/">TOP</a></li>
  111.                     <li class="btn"><a href="{{ url('homepage') }}books">フォトパブ堂書店</a></li>
  112.                     <li class="btn"><a href="http://jihi.photo-pub.co.jp/">自費出版サービス</a></li>
  113.                     <li class="btn"><a href="https://photo-pub.co.jp/event">イベント情報</a></li>
  114.                     <li class="btn"><a href="https://photo-pub.co.jp/recruit">各種募集</a></li>
  115.                 </ul>
  116.             </div>
  117.         </div>
  118.     </div>
  119.     <div class="tabs">
  120.         <ul class="tabs_inner">
  121.             {% set Categories = repository('Eccube\\Entity\\Category').getList() %}
  122.     
  123.             {# depthつきマクロに書き直し！ #}
  124.             {% macro tree(Category, depth) %}
  125.                 {% from _self import tree %}
  126.                 
  127.                 <a href="{{ url('product_list') }}?category_id={{ Category.id }}">
  128.                     {{ Category.name }}
  129.                 </a>
  130.     
  131.                 {# 第二階層(depth==1)のときだけ子を表示する #}
  132.                 {% if Category.children|length > 0 and depth == 1 %}
  133.                     <ul>
  134.                         {% for ChildCategory in Category.children %}
  135.                             <li>
  136.                                 {{ tree(ChildCategory, depth + 1) }}
  137.                             </li>
  138.                         {% endfor %}
  139.                     </ul>
  140.                 {% endif %}
  141.             {% endmacro %}
  142.     
  143.             {% from _self import tree %}
  144.     
  145.             <div class="ec-categoryNaviRole">
  146.                 <div class="ec-itemNav">
  147.                     <ul class="ec-itemNav__nav">
  148.                         {% for Category in Categories %}
  149.                             <li>
  150.                                 {# 最初はdepth=1で開始 #}
  151.                                 {{ tree(Category, 1) }}
  152.                             </li>
  153.                         {% endfor %}
  154.                     </ul>
  155.                 </div>
  156.             </div>
  157.         </ul>
  158.     </div>
  159.     <div class="sp-search-form">
  160.         <form action="{{ path('product_list') }}" class="search-form sp">
  161.             <input type="text" class="search-form-input" placeholder="キーワード（タイトル、著者など）を入力">
  162.             <button type="submit" class="search-form-submit" aria-label="検索"></button>
  163.         </form>
  164.     </div>
  165. </section>
  166. </div>
  168. <style>
  169.     .fixed-header {
  170.     position: fixed;
  171.     top: 0;
  172.     left: 0;
  173.     width: 100%;
  174.     z-index: 9999;
  175.     background-color: #fff; /* 背景が透けないように */
  176.     box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 任意：影で浮かせる */
  177.     }
  178.     
  179.     body {
  180.         padding-top: 150px; /* ヘッダーの高さに合わせて調整（例：80px） */
  181.     }
  182. @media screen and (max-width: 820px) {
  183.     body {
  184.         padding-top: 180px; /* ヘッダーの高さに合わせて調整（例：80px） */
  185.     }
  186. }
  188. </style>