ヘッダーメニューの作り方（レスポンシブ対応）【コーディング実演あり】

2020年6月5日

このページでは、よくあるWEBサイトのヘッダーメニュー部分の作り方（コーディングの仕方）についてお伝えしてます。

実際にコーディングをしている動画を用意してますので、今後WEBサイトのコーディングに挑戦される方の参考になればと思います。

ヘッダーメニュー部分のコーディング実演【動画】

動画内で紹介しているサンプルサイト

http://webuya.info/header-menu.html

動画内でコーディングした各ファイルの中身

※若干スタイルを修正してます

HTMLコード（index.htmlの中身）

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ヘッダーメニューの作り方（完成イメージ）</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <header>
    <div><img src="images/logo-header-menu-sample.png" alt="Header-Menu-Sample"></div>
    <div class="nav" id="h_menu">
      <div class="btn_menu" id="btn_menu"><span>menu</span></div>
      <ul>
        <li>サービス紹介</li>
        <li>スタッフ紹介</li>
        <li>会社案内</li>
        <li>アクセス</li>
        <li>お問い合わせ</li>
      </ul>
    </div>
  </header>
  <main>
    <h1>ヘッダーメニューの完成イメージです。</h1>
  </main>
<script>
  document.getElementById("btn_menu").onclick = function() {
    var element = document.getElementById("h_menu");
    element.classList.toggle('show');
  };
</script>
</body>
</html>

CSSコード（style.cssの中身）

/* ▼SP用スタイル▼ */
body{
  padding: 0;
  margin: 0;
  background-color: #eee;
}
main{
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
}
header{
  position: relative;
}
header > div{
  width: 100%;
  text-align: center;
  margin: 10px 0;
}
header > div img{
  width: 160px;
}
.btn_menu{
  position: absolute;
  top: 10px;
  right: 10px;
}
.btn_menu span{
  height: 50px;
  width: 50px;
  display: flex;
  border-radius: 50%;
  padding: 0;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background-color: #000;
  color: #fff;
}
.nav ul{
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #fff;
  height: 0;
  opacity: 0;
  transition: all 300ms;
}
.nav.show ul{
  height: auto;
  opacity: 1;
}
.nav ul li{
  text-align: center;
  border-bottom: solid 1px #ccc;
  padding: 0.5em 0;
  display:none;
}
.nav.show ul li{
  display: block;
}

/* ▼PC用スタイル▼ */
@media (min-width: 544px){
header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  background-color: #fff;
}
header > div{
  width: 300px;
}
main{
  width: 980px;
  margin: 0 auto;
}
.btn_menu{
  display: none;
}
.nav{
  width: 100%;
}
.nav ul{
  display: flex;
  justify-content: flex-end;
  opacity: 1;
  height: auto;
  background: none;
  min-width: 620px;
}
.nav ul li{
  border: none;
  margin: 0 20px;
  display: block;
}
}