雛形コード
雛形コードです。git clone もしくは、コピペして利用してください。
Last updated
雛形コードです。git clone もしくは、コピペして利用してください。
Last updated
git clone -b starter-vue https://github.com/if-tech-support/hamburger-menu.git<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>hamburger menu</title>
<link
href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<header class="head" id="app">
<nav class="nav">
<!-- メニューを開くアイコン -->
<div class="nav__icon">
<i class="fas fa-bars fa-3x"></i>
</div>
<!-- ハンバーガーメニュー中身 -->
<div class="nav__inner">
<!-- メニューを閉じるアイコン -->
<div class="nav__icon nav__icon--times">
<i class="fas fa-times fa-3x"></i>
</div>
<ul class="nav__menu">
<li class="nav__item">
<a class="nav__link" href="#">メニュー1</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">メニュー2</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">メニュー3</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">メニュー4</a>
</li>
</ul>
</div>
<!-- メニューが開いた時の背景色 -->
<div class="nav__bg"></div>
</nav>
</header>
<script src="app.js"></script>
</body>
</html>body {
margin: 0;
}
ul {
padding: 0;
margin: 0;
}
.nav__inner {
position: absolute;
height: 100%;
width: 30%;
right: 0;
background-color: black;
z-index: 5;
}
.nav__icon {
text-align: right;
margin: 10px;
}
.nav__icon--times {
color: #fff;
}
.nav__menu {
margin-left: auto;
list-style: none;
text-align: center;
z-index: 5;
}
.nav__item {
height: 60px;
margin-bottom: 10px;
}
.nav__link {
display: block;
color: #fff;
font-size: 24px;
line-height: 60px;
text-decoration: none;
}
.nav__link:hover {
background-color: gray;
}
.nav__bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
}