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

Open in your IDE?
  1. {% block main %}
  2. <!DOCTYPE html>
  3. <html lang="ja">
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>NAKATOMI ナビゲーション</title>
  8. <style>
  9. /* --- 全体ボックス --- */
  10. .box_main_list {
  11.   background-color: #999999;    
  12.   width: 100%;
  13.   height: auto;
  14.   margin-top: 4vh;
  15. }
  17. /* --- aタグの色維持 --- */
  18. a,a:hover,a:visited{
  19.   color: inherit;
  20.   text-decoration: none;
  21. }
  23. /* --- ナビ全体 --- */
  24. #g_navi {
  25.   position: relative;
  26.   width: 100%;
  27.   background: #097ecc;
  28.   z-index: 10000;
  29.   font-size: 16px;
  30. }
  32. /* --- メニュー（PC用） --- */
  33. #g_navi ul {
  34.   display: flex;
  35.   margin: 0 auto;
  36.   padding: 0 3%;
  37.   width: 94%;
  38.   max-width: 1280px;
  39.   list-style-type: none;
  40.   transition: transform 0.3s ease;
  41. }
  43. #g_navi ul li {
  44.   position: relative;
  45.   width: 25%;
  46. }
  48. #g_navi ul li:first-child::before {
  49.   position: absolute;
  50.   display: block;
  51.   content: "";
  52.   top: 25%;
  53.   left: 0;
  54.   width: 1px;
  55.   height: 50%;
  56.   background-color: #DDD;
  57. }
  59. #g_navi ul li::after {
  60.   position: absolute;
  61.   display: block;
  62.   content: "";
  63.   top: 25%;
  64.   right: 0;
  65.   width: 1px;
  66.   height: 50%;
  67.   background-color: #DDD;
  68. }
  70. #g_navi ul li a {
  71.   display: flex;
  72.   align-items: center;
  73.   justify-content: center;
  74.   padding: 12px 10px;
  75.   color: #fff;
  76.   text-align: center;
  77.   transition: background-color 0.3s ease, color 0.3s ease;
  78. }
  80. #g_navi ul li a:hover {
  81.   background-color: #DDD;
  82.   color: #097ecc;
  83. }
  85. /* --- ハンバーガーボタン --- */
  86. .hamburger {
  87.   display: none;
  88.   flex-direction: column;
  89.   justify-content: center;
  90.   cursor: pointer;
  91.   padding: 12px;
  92.   margin-left: 10px;
  93.   z-index: 10001;
  94. }
  96. .hamburger span {
  97.   height: 3px;
  98.   width: 25px;
  99.   background: #fff;
  100.   margin: 4px 0;
  101.   border-radius: 2px;
  102.   transition: all 0.4s ease;
  103. }
  105. /* --- 背景のフェード用 --- */
  106. .overlay {
  107.   position: fixed;
  108.   top: 0;
  109.   left: 0;
  110.   width: 100%;
  111.   height: 100%;
  112.   background-color: rgba(0,0,0,0.5);
  113.   opacity: 0;
  114.   visibility: hidden;
  115.   transition: all 0.4s ease;
  116.   z-index: 9998;
  117. }
  119. /* --- スマホ用デザイン --- */
  120. @media (max-width: 768px) {
  121.   #g_navi ul {
  122.     position: fixed;
  123.     top: 0;
  124.     right: 0;
  125.     height: 100vh;
  126.     width: 70%;
  127.     background: #097ecc;
  128.     flex-direction: column;
  129.     justify-content: start;
  130.     align-items: center;
  131.     transform: translateX(100%);
  132.     transition: transform 0.4s ease;
  133.     padding-top: 80px;
  134.   }
  136.   #g_navi ul.active {
  137.     transform: translateX(0);
  138.   }
  140.   #g_navi ul li {
  141.     width: 100%;
  142.     border-bottom: 1px solid #DDD;
  143.   }
  145.   .hamburger {
  146.     display: flex;
  147.     position: absolute;
  148.     top: 10px;
  149.     left: 10px;
  150.   }
  152.   /* ハンバーガー→×アニメーション */
  153.   .hamburger.active span:nth-child(1) {
  154.     transform: rotate(45deg) translate(5px, 6px);
  155.   }
  156.   .hamburger.active span:nth-child(2) {
  157.     opacity: 0;
  158.   }
  159.   .hamburger.active span:nth-child(3) {
  160.     transform: rotate(-45deg) translate(6px, -7px);
  161.   }
  163.   /* フェード背景有効化 */
  164.   .overlay.active {
  165.     opacity: 1;
  166.     visibility: visible;
  167.   }
  168. }
  169. </style>
  170. </head>
  172. <body>
  173. <div class="box_main_list">
  174.   <nav id="g_navi">
  175.     <!-- ハンバーガー -->
  176.     <div class="hamburger" id="hamburger">
  177.       <span></span>
  178.       <span></span>
  179.       <span></span>
  180.     </div>
  182.     <!-- メニュー -->
  183.     <ul id="nav_menu">
  184.       <li><a href="https://www.nakatomishop.com/">NAKATOMI OFFICIAL</a></li>
  185.       <li><a href="https://www.nakatomishop.com/products/list?category_id=79#tab-link">2026 SUMMER CATALOG</a></li>
  186.       <li><a href="https://www.nakatomishop.com/contact/product_fix">NEW MODEL</a></li>
  187.       <li><a href="https://www.nakatomishop.com/contact">SHOP ORIGINAL</a></li>
  188.     </ul>
  189.   </nav>
  190. </div>
  192. <!-- 背景フェード -->
  193. <div class="overlay" id="overlay"></div>
  195. <script>
  196. /* --- ハンバーガーメニュー開閉 --- */
  197. const hamburger = document.getElementById('hamburger');
  198. const navMenu = document.getElementById('nav_menu');
  199. const overlay = document.getElementById('overlay');
  201. hamburger.addEventListener('click', () => {
  202.   hamburger.classList.toggle('active');
  203.   navMenu.classList.toggle('active');
  204.   overlay.classList.toggle('active');
  205. });
  207. /* --- 背景クリックで閉じる --- */
  208. overlay.addEventListener('click', () => {
  209.   hamburger.classList.remove('active');
  210.   navMenu.classList.remove('active');
  211.   overlay.classList.remove('active');
  212. });
  213. </script>
  214. </body>
  215. </html>
  218. {% endblock %}