前回の記事ではサイドバーモジュールのタブ化をネイティブのJavaScriptでゴリゴリ書きました。勉強になりました。今回は、レスポンシブなグローバルナビを脱jQueryします。PCサイズではメニューが横に並び、タブレット・スマホではボタンをクリックするとメニューが縦にスライドして出てきます。
DEMO
実際に装備された上のやつをご覧ください。ボタンのアニメーションを頑張りました。
カスタマイズ方法
サラッといきます。質問や要望もwelcomeですが、気が向いたら対応します。
1) HTML
「タイトル下」に入れます。li.cb-gn-item
の数は適宜増減させてください。
HTML
<!-- グローバルナビ -->
<nav id="cb-globalnav">
<input id="cb-gn-menustate" type="checkbox">
<ul class="cb-gn-header">
<li class="cb-gn-menuicon">
<label class="cb-gn-menuicon-label" for="cb-gn-menustate">
<span class="cb-gn-menuicon-bread-top"></span>
<span class="cb-gn-menuicon-bread-bottom"></span>
</label>
</li>
</ul>
<ul class="cb-gn-list">
<li class="cb-gn-item">
<a href="URL1">Title1</a>
</li>
<li class="cb-gn-item">
<a href="URL2">Title2</a>
</li>
<li class="cb-gn-item">
<a href="URL3">Title3</a>
</li>
<li class="cb-gn-item">
<a href="URL4">Title4</a>
</li>
<li class="cb-gn-item">
<a href="URL5">Title5</a>
</li>
<li class="cb-gn-item">
<a href="URL6">Title6</a>
</li>
<li class="cb-gn-item">
<a href="URL7">Title7</a>
</li>
<li class="cb-gn-item">
<a href="URL8">Title8</a>
</li>
</ul>
</nav>
2) CSS
動きはCSS3のアニメーションを利用しています。ふなっしーカラーになっていますので変えるときはlinear-gradient()
をカラーコードに。ブレイクポイント等、環境に合わせて調整する必要があります。
CSS
/* グローバルナビ
ブレイクポイント: 1199px, 767px */
#cb-globalnav {
background: linear-gradient(#f6db81 75%, #8eb7dd 75%);
}
@media (max-width: 767px) {
#cb-globalnav {
background: linear-gradient(#f6db81 40px, #8eb7dd 40px);
}
}
#cb-globalnav ul {
list-style-type: none;
padding-left: 0;
margin: 0 auto;
height: 40px;
}
#cb-globalnav .cb-gn-header {
display: none;
}
@media (max-width: 767px) {
#cb-globalnav .cb-gn-header {
background: linear-gradient(#f6db81 75%, #8eb7dd 75%);
display: block;
}
#cb-gn-menustate:checked ~ .cb-gn-header {
background: #f6db81;
}
}
#cb-globalnav .cb-gn-menuicon {
width: 40px;
}
#cb-globalnav #cb-gn-menustate {
display: none;
}
#cb-globalnav .cb-gn-menuicon-label {
display: block;
cursor: pointer;
width: 40px;
height: 40px;
position: relative;
transition: opacity 0.2s, transform 0.4s ;
}
#cb-globalnav .cb-gn-menuicon-label:hover {
opacity: 0.65;
}
#cb-gn-menustate:checked ~ .cb-gn-header .cb-gn-menuicon-label {
transform: rotate(90deg);
}
#cb-globalnav .cb-gn-menuicon-label span {
background: #222221;
position: absolute;
width: 20px;
height: 1px;
left: 50%;
transform: translateX(-50%);
transition: 0.25s 0s;
}
#cb-globalnav .cb-gn-menuicon-bread-top {
top: 16px;
}
#cb-gn-menustate:checked ~ .cb-gn-header .cb-gn-menuicon-bread-top {
transform: translate(-50%, 3px) rotate(45deg);
transition: 0.25s 0.2s;
}
#cb-globalnav .cb-gn-menuicon-bread-bottom {
top: 22px;
}
#cb-gn-menustate:checked ~ .cb-gn-header .cb-gn-menuicon-bread-bottom {
transform: translate(-50%, -3px) rotate(-45deg);
transition: 0.25s 0.2s;
}
#cb-globalnav .cb-gn-list {
font-size: 0;
width: 1050px;
}
@media (max-width: 1199px) {
#cb-globalnav .cb-gn-list {
width: 91.796875%;
}
}
@media (max-width: 767px) {
#cb-globalnav .cb-gn-list {
background: #8eb7dd;
width: auto;
height: 0;
overflow: hidden;
transition: 0.2s 0s linear;
}
#cb-gn-menustate:checked ~ .cb-gn-list {
height: 296px; /* liの"(height + border-width) x 数"px */
padding: 18px 0;
transition: 0.2s 0.45s linear;
}
}
#cb-globalnav .cb-gn-item {
display: inline-block;
font-size: 0.75rem;
font-weight: bold;
line-height: 40px;
}
@media (max-width: 767px) {
#cb-globalnav .cb-gn-item {
display: block;
font-size: 0.875rem;
line-height: 36px;
border-bottom: 1px solid #fff;
margin: 0 48px;
}
}
#cb-globalnav .cb-gn-item a {
color: #222221;
text-decoration: none;
display: block;
padding: 0 1em;
transition: 0.2s;
}
@media (max-width: 767px) {
#cb-globalnav .cb-gn-item a {
color: #fff;
padding: 0;
}
}
#cb-globalnav .cb-gn-item a:hover {
background: #202035;
color: #fff;
}
@media (max-width: 767px) {
#cb-globalnav .cb-gn-item a:hover {
color: #222221;
background: none;
}
}
これで全てのjQuery使用部分を置き換えることができました。jquery.min.jsとオサラバして、連載は今回で最終回となります。
原作