app/template/default/Block/header.twig line 17

Open in your IDE?
  1. <header class="l-header">
  2.         <div class="l-header__conteiner">
  3.             <h1 class="l-header__logo">
  4.                 <a href="https://xb579178.xbiz.jp/test-ec-05/"><img src="{{asset ('/test-ec-05/html/user_data/assets/img/common/moo-side-log.svg')}}" alt="肉の再生工房〜moo side〜"></a>
  5.             </h1>
  7.             {#<div class="l-header__tel">#}
  8.             {#    <p class="l-header__tel__text">お電話でのお問い合わせはこちらから</p>#}
  9.             {#    <a class="l-header__tel__number" href="tel:0312345678">TEL：0120-123-4567</a>#}
  10.             {#</div>#}
  12.             <!-- ハンバーガーメニュー -->
  13.                 <div class="l-header__search__image" id="searchopen2">
  14.                     <img src="{{asset ('/test-ec-05/html/user_data/assets/img/common/glass_wh.webp')}}" alt="">
  15.                 </div>
  16.                     <div class="form__area2" id="attrin2">
  17.                         {{ render(path('block_search_product')) }}
  18.                     </div>
  19.             
  20.             <div id="hamburger" class="l-header__hamburger">
  21.                 <span class="l-header__hamburger__line" id="top"></span>
  22.                 <span class="l-header__hamburger__line" id="center"></span>
  23.                 <span class="l-header__hamburger__line" id="bottom"></span>
  24.             </div>
  26.             <nav class="l-header__top__hamburger__nav" id="nav">
  27.                 <h3 class="l-header__top__hamburger__nav__title">会員メニュー</h3>
  28.                 <ul class="l-header__top__hamburger__nav__lists">
  29.                     {% if is_granted('ROLE_USER') %}
  30.                         <li class="l-header__top__hamburger__nav__lists__item"><a href="{{url('mypage')}}"><p class="l-header__top__nav__lists__item__undertext">マイページ</p></a></li>
  31.                         <li class="l-header__top__hamburger__nav__lists__item"><a href="{{url('logout')}}"><p class="l-header__top__nav__lists__item__undertext">ログアウト</p></a></li>
  32.                         {% else %}
  33.                         <li class="l-header__top__hamburger__nav__lists__item"><a href="{{url('entry')}}"><p class="l-header__top__nav__lists__item__undertext">新規登録</p></a></li>
  34.                     <li class="l-header__top__hamburger__nav__lists__item"><a href="{{url('mypage_login')}}"><p class="l-header__top__nav__lists__item__undertext">ログイン</p></a></li>
  35.                     {% endif %}
  36.                     <li class="l-header__top__hamburger__nav__lists__item"><a href="{{url('cart')}}">カート</a></li>
  37.                 </ul>
  39.                 <h3 class="l-header__top__hamburger__nav__title">メニュー</h3>
  40.                 <ul class="l-header__top__hamburger__nav__lists">
  41.                     <li class="l-header__top__hamburger__nav__lists__item"><a href="{{ url('homepage') }}">TOP</a></li>
  42.                     <li class="l-header__top__hamburger__nav__lists__item"><a href="{{ url('homepage') }}#recommend">おすすめ商品</a></li>
  43.                     <li class="l-header__top__hamburger__nav__lists__item"><a href="{{ url('homepage') }}#popular">人気商品</a></li>
  44.                     <li class="l-header__top__hamburger__nav__lists__item"><a href="{{ url('product_list') }}">商品一覧</a></li>
  45.                     
  46.                 </ul>
  47.             </nav>
  49.             <nav class="l-header__top__nav">
  50.                 <ul class="l-header__top__nav__lists">
  51.                     <li id="searchopen" class="l-header__top__nav__lists__item"><a class="nolink1"><img src="{{asset ('/test-ec-04/html/user_data/assets/img/common/glass.webp')}}" height="40" width="45" alt="検索"><p class="l-header__top__nav__lists__item__undertext">検索</p></a></li>
  52.                         <div class="form__area" id="attrin">
  53.                         {{ render(path('block_search_product')) }}
  54.                         <img id="closebtn" class="closebtn" src="{{ asset('/test-ec-04/html/user_data/assets/img/common/x.webp') }}">
  55.                     </div>
  56.                     <li class="l-header__top__nav__lists__item"><a href="{{ url('mypage_favorite') }}"><img src="{{asset ('/test-ec-04/html/user_data/assets/img/common/ha-to.webp')}}" height="40" width="45" alt="お気に入り"><p class="l-header__top__nav__lists__item__undertext">お気に入り</p></a></li>
  57.                     {% if is_granted('ROLE_USER') %}
  58.                         <li class="l-header__top__nav__lists__item"><a href="{{url('mypage')}}"><img src="{{asset ('/test-ec-05/html/user_data/assets/img/common/cow.webp')}}" height="30" width="60" alt="マイページ"><p class="l-header__top__nav__lists__item__undertext">マイページ</p></a></li>
  59.                         <li class="l-header__top__nav__lists__item"><a href="{{url('logout')}}"><img src="{{asset ('/test-ec-05/html/user_data/assets/img/common/cow.webp')}}" height="30" width="60" alt="ログアウト"><p class="l-header__top__nav__lists__item__undertext">ログアウト</p></a></li>
  60.                         {% else %}
  61.                         <li class="l-header__top__nav__lists__item"><a href="{{url('entry')}}"><img src="{{asset ('/test-ec-05/html/user_data/assets/img/common/cow.webp')}}" height="30" width="60" alt="新規登録"><p class="l-header__top__nav__lists__item__undertext">新規登録</p></a></li>
  62.                     <li class="l-header__top__nav__lists__item"><a href="{{url('mypage_login')}}"><img src="{{asset ('/test-ec-05/html/user_data/assets/img/common/cow.webp')}}" height="30" width="60" alt="ログイン"><p class="l-header__top__nav__lists__item__undertext">ログイン</p></a></li>
  63.                     {% endif %}
  64.                     <li class="l-header__top__nav__lists__item"><a href="{{url('cart')}}"><img src="{{asset ('/test-ec-05/html/user_data/assets/img/common/cart.webp')}}" height="60" width="50" alt="カート"><p class="l-header__top__nav__lists__item__undertext">カート</p></a></li>
  65.                 </ul>
  66.             </nav>
  67.         </div>
  69.     </header>
  70.     <div class="l-header__logo display">
  71.         <a href="https://xb579178.xbiz.jp/test-ec-05/"><img src="{{asset ('/test-ec-05/html/user_data/assets/img/common/moo-side-log.svg')}}" alt="肉の再生工房〜moo side〜"></a>
  72.     </div>
  73.     
  74.     {% block stylesheet %}
  75.     <style>
  76.         html {
  77.             overflow-x: hidden;
  78.         }
  79.         .l-header {
  80.                 height: 105px;
  81.         }
  82.         .l-header__search {
  83.           display: none;
  84.         }
  85.         .l-header__logo.display {
  86.             display: none;
  87.         }
  88.         @media screen and (max-width: 1024px) {
  89.             .l-header {
  90.                 background-color: rgba(0, 0 , 0, 0);
  91.             }
  92.             .l-header__logo {
  93.                 display: none;
  94.             }
  95.             .l-header__logo.display {
  96.                 display: block;
  97.                 position: absolute;
  98.                 top: 10px;
  99.                 left: 15px;
  100.             }
  101.             .l-header__search {
  102.             display: block;
  103.           }
  104.           .l-header__search__image {
  105.             width: 60px;
  106.             background-color: #B72C11;
  107.             padding: 14px 10px;
  108.             border-radius: 50%;
  109.             display: flex;
  110.             justify-content: center;
  111.             align-items: center;
  112.             position: absolute;
  113.             top: 17px;
  114.             right: 90px;
  115.           }
  116.           .l-header__search__image img {
  117.             width: 30px;
  118.           }
  119.           .l-header__search__area {
  120.             position: absolute;
  121.             top: 75px;
  122.             left: 50%;
  123.             transform: translateX(-50%);
  124.             height: 60px;
  125.             width: max(100vw, 500px);
  126.             background-color: #333;
  127.           }
  128.         }
  129.         .l-header__search {
  130.         display: block;
  131.       }
  132.       .l-header__search__image {
  133.         display: none;
  134.       }
  135.       .l-header__search__image img {
  136.         width: 30px;
  137.       }
  138.       .l-header__search__area {
  139.         position: absolute;
  140.         top: -100%;
  141.         left: 50%;
  142.         transform: translateX(-50%);
  143.         height: 60px;
  144.         width: max(100vw, 500px);
  145.         background-color: #333;
  146.         transition: top 0.5s;
  147.       }
  148.       .l-header__search__area.in {
  149.         top: 75px;
  150.       }
  151.       .form__area {
  152.             position: fixed;
  153.             top: -100%;
  154.             left: 0;
  155.             height: 100vh;
  156.             width: 100vw;
  157.             display: flex;
  158.             justify-content: space-evenly;
  159.             align-items: flex-start;
  160.             background-color: rgba(0, 0, 0, 0.5);
  161.             z-index: 999;
  162.             transition: top 0.5s;
  163.         }
  164.         .form__area .form__area__searchform {
  165.             display: flex;
  166.             align-items: center;
  167.             margin-top: 20px;
  168.         }
  169.         .form__area .form__category select{
  170.             padding: 5px;
  171.             width: 30vw;
  172.             height: 60px;
  173.             background-color: #eacac4;
  174.             outline: none;
  175.         }
  176.         .form__area .form__keyword {
  177.             display: flex;
  178.         }
  179.         .form__area .form__keyword input {
  180.              width: 30vw;
  181.             height: 60px;
  182.             outline: none;
  183.         }
  184.         .form__area .form__keyword__btn {
  185.             background-color: #eacac4;
  186.         }
  187.         .form__area .form__keyword__btn__img img {
  188.             width: 35px;
  189.         }
  190.         .form__area .closebtn {
  191.             width: 50px;
  192.             height: 50px;
  193.             margin-top: 25px;
  194.         }
  195.         .form__area.in {
  196.             top: 0;
  197.         }
  198.   
  199.   .form__area2 {
  200.         position: fixed;
  201.         top: 75px;
  202.         left: 100%;
  203.         height: 45px;
  204.         width: 100vw;
  205.         display: flex;
  206.         justify-content: space-evenly;
  207.         align-items: flex-start;
  208.         background-color: rgba(0, 0, 0, 0.5);
  209.         z-index: 999;
  210.         transition: left 0.5s;
  211.   }
  212.   .form__area2 .form__area__searchform {
  213.             display: flex;
  214.             align-items: center;
  215.         }
  216.         .form__area2 .form__category select{
  217.             padding: 5px;
  218.             width: 34.5vw;
  219.             height: 45px;
  220.             background-color: #eacac4;
  221.             border: none;
  222.         }
  223.         .form__area2 .form__keyword {
  224.             display: flex;
  225.         }
  226.         .form__area2 .form__keyword input {
  227.              width: 54.5vw;
  228.             height: 45px;
  229.             border: none;
  230.         }
  231.         .form__area2 .form__keyword__btn {
  232.             background-color: #eacac4;
  233.             width: 11vw;
  234.             border: none;
  235.         }
  236.         .form__area2 .form__keyword__btn__img img {
  237.             width: 30px;
  238.         }
  239.         .form__area2.in {
  240.             transform: unset;
  241.             left: 0;
  242.         }
  243.         @media screen and (max-width:1024px) {
  244.             .l-header__search__image {
  245.             width: 60px;
  246.             background-color: #B72C11;
  247.             padding: 14px 10px;
  248.             border-radius: 50%;
  249.             display: flex;
  250.             justify-content: center;
  251.             align-items: center;
  252.             position: absolute;
  253.             top: 17px;
  254.             right: 90px;
  255.             z-index: 999;
  256.           }
  257.         }
  258.   
  259. </style>
  260. {% endblock %}
  262. {% block javascript %}
  263. <script>
  264.     // PC用ヘッダーの検索機能実装
  265.     const open = document.getElementById('searchopen');
  266.     const close = document.getElementById('closebtn');
  267.     const attrin = document.getElementById('attrin');
  268.     
  269.     // 虫眼鏡をクリックで表示
  270.     open.addEventListener('click', function(){
  271.         attrin.classList.add('in');
  272.     });
  273.     
  274.     // ×をクリックで非表示
  275.     close.addEventListener('click', function(){
  276.         attrin.classList.remove('in');
  277.     });
  278.     
  279.     // 要素外をクリックで非表示
  280.     addEventListener('click', outsideClose);
  281.     function outsideClose(e) {
  282.       if (e.target == attrin) {
  283.         attrin.classList.remove('in');
  284.       }
  285.     }
  286.     
  287.      // SP、TB用ヘッダーの検索機能実装
  288.     const open2 = document.getElementById('searchopen2');
  289.     // 虫眼鏡をクリックで表示,非表示切替
  290.     open2.addEventListener('click', function(){
  291.         attrin2.classList.toggle('in');
  292.     });
  293.     
  294. </script>
  295. {% endblock %}