日別アーカイブ: 2021年9月6日

JavaScript7(モバイルメニュー)

コメントを残す

1:スマホ画面用のメニューを作る(mixinはいつもどおりなので省略)

HTMLの記述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- 全体を囲むglobal-cotainerをさくせい-->
  <div id="global-container">
<!-- -->
  <div id="container">
  <div class="mobile-menu__cover"></div>
<header class="header">
  <button class="mobile-menu__btn">
  <span></span>
  <span></span>
  <span></span>
  </button>
</header>
  </div>
<!-- __２つあるのはSCSSにて -->
  <nav class="mobile-menu">
    <ul class="mobile-menu__main">
      <li class="mobile-menu__item">
       <a class="mobile-menu__link" href="#">
        <span class="main-title">Our Service</span>
        <span class="sub-title">サービスについて</span>
       </a>
      </li>
     <li class="mobile-menu__item">
      <a class="mobile-menu__link" href="#">
        <span class="main-title">About us</span>
        <span class="sub-title">私達について</span>
      </a>
     </li>
     <li class="mobile-menu__item">
      <a class="mobile-menu__link" href="#">
       <span class="main-title">Contact us</span>
       <span class="sub-title">コンタクト方法</span>
      </a>
     </li>
    </ul>
   </nav>
</div>
<script src="main.js"></script>
</body>
</html>

main.jsの記述

続きを読む →