表示デモ
実装コード
HTML
<div class="demo-header">
<a href="#top" class="site-logo">
<img src="https://design-parts.about-nagasaki.com/img/aoi-no-mon.png" alt="ロゴサンプル">
</a>
<nav class="header-nav">
<ul class="header-nav_left">
<li><a href="#cate01">Menu01</a></li>
<li><a href="#cate01">Menu02</a></li>
</ul>
</nav>
<button class="hamburger rotate-cross">
<span></span><span></span><span></span>
</button>
</div>
CSS
@charset "utf-8";
/* サイト共通設定 */
:root {
--primary-text-color: #2A3140;
}
html {
font-size: 62.5%;
}
/* ヘッダー共通設定 */
.demo-header {
width: 100%;
padding: 6px 20px;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid var(--primary-border-color);
position: fixed;
top: 0;
left: 0;
}
a.site-logo img {
max-width: 38px;
height: auto;
}
.demo-header nav ul {
display: flex;
gap: 10px;
}
/* ハンバーガーメニュー */
.hamburger {
display: inline-block;
cursor: pointer;
width: 34px;
height: 20px;
position: relative;
border: none;
background-color: transparent;
}
.hamburger span {
position: absolute;
left: 0;
width: 100%;
height: 3px;
background: var(--primary-text-color);
border-radius: 2px;
transition: all .25s ease;
}
.hamburger span:nth-child(1) {
top: 0;
}
.hamburger span:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
.hamburger span:nth-child(3) {
bottom: 0;
}
/* 3本からバツ */
.hamburger.rotate-cross.open span:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.hamburger.rotate-cross.open span:nth-child(2) {
opacity: 0;
}
.hamburger.rotate-cross.open span:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
ポイント
シンプルが両端に配置される、定番のヘッダー。
SP版ではハンバーガーメニューを開くと、項目が中央に配置される形。