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

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

このページでは、よくある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;
}
}
Category: Webサイト作成Tags: コーディング

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

17 − 9 =