cBlog

Tips for you.

脱jQueryその3 クリックするとニューと縦にスライドするメニュー

f:id:cruller:20170721233510p:plain

前回の記事ではサイドバーモジュールのタブ化をネイティブの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とオサラバして、連載は今回で最終回となります。

 

原作

www.yukihy.com

 

HTML&CSSとWebデザインが 1冊できちんと身につく本

HTML&CSSとWebデザインが 1冊できちんと身につく本