目次
はじめに
クライアント様からスマホで見たときに既存のヘッダーの下に新しくメニューを追加して欲しいとご依頼がありました。今回はその件についてご紹介します。
ヘッダーの下のメニューのレイアウト
※ハンバーガーメニューは動作しません。
元々のヘッダーのレイアウト
<Ko-Coding/>
ヘッダーの下にメニューを追加したレイアウト
ソースコード例
<header class="header">
<h1 class="site-title"><Ko-Coding/></h1>
<div class="openbtn">
<span></span>
<span></span>
<span></span>
</div>
<div class="bottom-header">
<div class="bottom-header__list">
<div class="bottom-header__item">
<a href="#">メニュー1</a>
</div>
<div class="bottom-header__item">
<a href="#">メニュー2</a>
</div>
<div class="bottom-header__item">
<a href="#">メニュー3</a>
</div>
<div class="bottom-header__item">
<a href="#">メニュー4</a>
</div>
</div>
</div>
</header>.header {
position: fixed;
width: 100%;
top: 0;
left: 0;
background-color: #f9f9f9;
box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
z-index: 1000;
}
.site-title {
padding: 20px;
font-size: 18px;
font-weight: 700;
}
.openbtn {
width: 50px;
height: 50px;
line-height: 50px;
position: absolute;
top: 10px;
right: 10px;
color: #fff;
background-color: #094;
border-radius: 50%;
cursor: pointer;
}
.openbtn span {
width: 50%;
position: absolute;
left: 50%;
height: 3px;
border-radius: 2px;
transition: all 0.3s;
background-color: #fff;
transform: translate(-50%, 0);
}
.openbtn span:nth-of-type(1) {
top: 15px;
}
.openbtn span:nth-of-type(2) {
top: 25px;
}
.openbtn span:nth-of-type(3) {
top: 35px;
}
.bottom-header {
width: 100%;
border-top: 2px solid #094;
border-bottom: 2px solid #094;
z-index: 10000;
}
.bottom-header__list {
display: flex;
}
.bottom-header__item {
width: 25%;
}
.bottom-header__item:nth-of-type(n+2) {
border-left: 1px solid #094;
}
.bottom-header a {
display: block;
text-align: center;
height: 50px;
line-height: 50px;
}
