1ページのウェブサイトの2つの列グリッドメニュー

Question

このウェブサイトhttp://prepa.4ltrophy.com/のように2列のグリッドメニューを作成したいと思います。誰かがサンプルコードを提供して、そのような反応的なメニューを作る方法を教えてもらえますか？私は完全な初心者なので、どこから始めるべきか分かりません。あなたの側から任意のヘルプは大幅に進歩

Answer 1

のおかげで、この

 * { 
 
      margin: 0; 
 
      padding: 0; 
 
      font-family: Segoe UI; 
 
     } 
 
     body { 
 
      background-color: #D8D8D8; 
 
     } 
 
     #grid-menu { 
 
      background-color: rgba(255, 255, 255, 0.74); 
 
      max-width: 285px; 
 
      list-style-type: none; 
 
      position: fixed; 
 
      left: 0; 
 
      height: 100%; 
 
     } 
 
     #grid-menu li { 
 
      padding: 30px; 
 
      float: left; 
 
      text-align: center; 
 
      display: table; 
 
      width: 80px; 
 
      border: 1px solid #fff; 
 
      height: 20%; 
 
      transition: .3s ease-in; 
 
      cursor: pointer; 
 
     } 
 
     #grid-menu li:hover { 
 
      background-color: #aaa; 
 
     } 
 
     #grid-menu li a { 
 
      color: black; 
 
      text-decoration: none; 
 
      font-size: 20px; 
 
      font-weight: 100; 
 
     }

<ul id="grid-menu"> 
 
    <li> 
 
    <a href="#">Home</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">About</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Products</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Contact</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Blog</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">My tab</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">My tab</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">My tab</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">My tab</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">My tab</a> 
 
    </li> 
 
</ul>