CSSで組んだドロップダウンメニューとスライドメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】

以前、メニューバーをトグルメニューと両立してレスポンシブスタイルにするカスタムを書きました。

www.yukihy.com

トグルメニューは、ボタンを押すと上下にスライドするようなものでしたが、　現在このブログでやっているみたいに、横からのスライドにして、なおかつPC版では子メニューも設定できるようにしてみたいと思います！

カスタマイズを行う際は、必ず以前のコードをメモ帳などにバックアップをとっておくようにしてください。

実装図

完成図はこんな感じです。ブラウザのサイズが広いときには、子メニューまで出せれる一般的なグローバルメニューで、

ブラウザサイズが狭くなると、自動で横からのスライドメニューに切り替わるようになります。

また上の動画のように、使いやすさを上げるためにメニューリンク以外の部分をタップするとメニューが閉じるようにしました。意外とこれが大変でした^^;。

注意点

いくつか注意点を書いておきます。

• 今回のものでは、スライドメニューにしたときに子メニューを表示するようにはしていません。
• Googleアドセンスの上にドロップダウンメニューがかぶさってしまうと、規約違反になってしまい、広告を止められる可能性があります。特にサイドバーの上に広告を貼っている方は、被りやすいので気をつけて下さい。
• はてなブログ以外でも、一般的なサイトでもコピペで使えます。

一応、下に書いたHTMLの「子メニュー」の部分を全て消去すれば、一般的なグローバルメニューとスライドメニューにもなります。

カスタマイズ

CSS

では、実際のカスタマイズです。まずは、下のコードを「デザインCSS」に

/*******グローバルナビ********/
.slideButton {
    display: none;
}
#slideMenu {
    position: relative;
    width: 100%;
    height: 40px;
    background-color: #444;/*メニューの背景色*/
}
#slideMenu > .slideMenuInner {
    list-style-type: none;
    width: 960px;/*メニューの横幅を*/
    height: 100%;
    margin: 0 auto;
    padding-left: 0;
}
#slideMenu > .slideMenuInner li {
    position: relative;
    float: left;
    height: 100%;
    text-align: center;
}
#slideMenu > .slideMenuInner > li a {
    display: block;
    position: relative;
    z-index: 2;
    height: 100%;
    padding-right: 20px;/*文字の左の余白*/
    padding-left: 20px;/*文字の右の余白*/
    background-color: #444;/*文字の背景色*/
    color: #fff;/*文字色*/
    font-size: 70%;
    text-decoration: none;
    line-height: 40px;
}
#slideMenu > .slideMenuInner > li:hover a {
    background-color: #555;/*文字の背景色（マウスホバー時）*/
}
/*２階層目*/
#slideMenu > .slideMenuInner > li > ul.second-level {
    visibility: hidden;
    list-style-type: none;
    position: absolute;
    z-index: -1;
    top: 0;
    margin: 0;
    padding-left: 0;
}
#slideMenu > .slideMenuInner > li:hover > ul.second-level {
    visibility: visible;
    z-index: 1;
    top: 40px;
    transition: all .3s;
}
#slideMenu > .slideMenuInner > li:hover > ul.second-level > li {
    width: 200px;
    height: 40px;
    text-align: center;
}
#slideMenu > .slideMenuInner > li:hover > ul.second-level > li > a {
    display: block;
    background-color: #444;/*子メニューの文字の背景色*/
    color: #fff;/*子メニューの文字色*/
    font-size: 70%;
    text-decoration: none;
    line-height: 40px;
}
#slideMenu > .slideMenuInner > li:hover > ul.second-level > li > a:hover {
    background-color: #555;/*子メニューの背景色（マウスホバー時）*/
}
/*２階層目ここまで*/
/******スライドメニュー*******/
@media screen and (max-width:960px) {/*１*/
    #menuButton {
        z-index: 10;
        width: 100%;
        background-color: #444;/*メニューバーの色*/
    }
    #menuButtonInner {
        position: relative;
        width: 100%;
        margin: 0 auto;
        text-align: right;
    }
    .slideButton {
        display: inline-block;
        margin: 5px;
        padding: 8px 15px;
        background-color: #555;/*「MENU」の背景色*/
        color: #fff;/*「MENU」の文字色*/
        font-size: 70%;
        text-decoration: none;
        cursor: pointer;
    }
    #slideMenu {
        overflow-x: hidden;
        overflow-y: auto;
        position: absolute;
        z-index: 20;
        top: 0;
        right: -260px;
        width: 260px;
        height: 100%;
        margin: 0;
        padding: 0;
        box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
    }
    #slideMenu > .slideMenuInner {
        position: static;
        width: 100%;
        height: 100%;
    }
    #slideMenu > .slideMenuInner > li {
        display: block;
        position: relative;
        float: none;
        width: 100%;
        height: 40px;
        margin: 0 auto;
        border-top: 1px solid #eee;
        text-align: center;
    }
    #slideMenu > .slideMenuInner > li a {
        display: block;
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        padding: 0;
        background-color: #fff;/*スライドメニューの背景色*/
        color: #333;/*スライドメニューの文字色*/
        font-size: 70%;
        font-weight: bold;
        line-height: 40px;
    }
    #slideMenu > .slideMenuInner > li:hover a {
        background-color: #fff;/*スライドメニューの背景色（マウスホバー時）*/
        color: #333;/*スライドメニューの文字色（マウスホバー時）*/
    }
    #slideMenu > .slideMenuInner > li > a:active {
        opacity: .8;
    }
    #slideMenu > .slideMenuInner > li:hover > ul.second-level {
        display: none;
    }
    .closeArea {
        height: 100%;
        background-color: #333;/*クローズエリア（スライドメニューの下の部分）の色*/
        cursor: pointer;
    }
    #layer {
        display: none;
        position: fixed;
        z-index: 10;
        top: 0;
        width: 100%;
        height: 150%;
        background-color: #222;/*レイヤーの色*/
        opacity: .4;/*レイヤーの透明度*/
        cursor: pointer;
    }
}

この状態では、まだ何も起こりません。

HTML&jQuery

次に、「タイトル下」にしたのを入れます。

<div id="menuButton">
<div id="menuButtonInner">
<span class="slideButton"><i class="blogicon-list lg"></i> MENU<br></span>
</div>
</div>
<div id="slideMenu">
<ul class="slideMenuInner">
  <li><a href=''>カテゴリ１</a>
    <ul class="second-level">
      <li><a href=''>カテゴリ1-1</a></li>
      <li><a href=''>カテゴリ1-2</a></li>
      <li><a href=''>カテゴリ1-3</a></li>
    </ul>
  </li>
  <li><a href=''>カテゴリ２</a>
    <ul class="second-level">
      <li><a href=''>カテゴリ2-1</a></li>
      <li><a href=''>カテゴリ2-2</a></li>
      <li><a href=''>カテゴリ2-3</a></li>
    </ul>
  </li>
  <li><a href=''>カテゴリ３</a>
    <ul class="second-level">
      <li><a href=''>カテゴリ3-1</a></li>
      <li><a href=''>カテゴリ3-2</a></li>
      <li><a href=''>カテゴリ3-3</a></li>
    </ul>
  </li>
  <li><a href=''>カテゴリ４</a>
    <ul class="second-level">
      <li><a href=''>カテゴリ4-1</a></li>
      <li><a href=''>カテゴリ4-2</a></li>
      <li><a href=''>カテゴリ4-3</a></li>
    </ul>
  </li>
  <li><a href=''>カテゴリ５</a>
    <ul class="second-level">
      <li><a href=''>カテゴリ5-1</a></li>
      <li><a href=''>カテゴリ5-2</a></li>
      <li><a href=''>カテゴリ5-3</a></li>
    </ul>
  </li>
  <li><a href=''>カテゴリ６</a>
    <ul class="second-level">
      <li><a href=''>カテゴリ6-1</a></li>
      <li><a href=''>カテゴリ6-2</a></li>
      <li><a href=''>カテゴリ6-3</a></li>
    </ul>
  </li>
  <div class="closeArea"></div>
</ul>
</div>
<div style="clear:both;"> </div>
<div id="layer"> </div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
    var menu = $('#slideMenu'),
        closeArea = $('.closeArea'),
        slideButton = $('.slideButton'),
        content = $('body'),
        layer = $('#layer'),
        menuWidth = menu.outerWidth();                
    slideButton.click(function(){
        slideOpen();       
    });
    layer.click(function(){
        slideClose();
    });
    closeArea.click(function(){
        slideClose();
    });
    function slideOpen(){
        menu.animate({'right' : 0 }, 300);
        layer.show();
        content.addClass('open');
    }
    function slideClose(){
        menu.animate({'right' : -menuWidth }, 300);
        layer.hide();
        content.removeClass('open');
    };
    $(window).resize(function(){
        var win = $(window).width();
        var p = 960;//１
        if(win > p){
            menu.animate({'right' : 0 }, 300);
        }else{
            menu.animate({'right' : -menuWidth }, 300);
            layer.hide();
        }
    });
});   
</script>

そうすると、最初の実装図のときのような感じになると思います。

こんな感じで、きちんとメニューが機能しているかを確認してください。

動作として確認していただきたいのは、

• ブラウザサイズが広いときに、きちんとグローバルメニューになっているか
• ブラウザサイズを縮めると、「MENU」の文字が出てくるか
• 「MENU」を押すと、きちんとスライドでメニューが出てくるか
• 下の図で①（レイヤー）と、②（クローズエリア）を押すと、元に戻るか
• ブラウザサイズを再び広げると、横からメニューが現れてくるか（時間がかかるときがあります）

①がレイヤー、②がクローズエリアと名付けています。

といったところです。

HTMLにリンクを入れる

上までで形はできているので、あとは具体的に、リンクを入れていきます。

リンクは

<a href=''>カテゴリ１</a>

といったところの、「href='◯◯'」の部分に入れて、対応するカテゴリ名を「カテゴリ１」のところに入れていってください。

子カテゴリも同様に入れて、余ったら消去、足りなければ同じ部分を入れてください。

ここで子カテゴリを全部消せば、子カテゴリ無しバージョンとしてキチンと使えます。

これで、カスタマイズは終了です！

その他のカスタマイズ

色を変える

初期の色に関してはシンプルな黒にしています。変えたい場合は「デザインCSS」い入れた部分で変えられるところは全てコメントを入れてあるので、色のコードを

www.colordic.org

などから選んで入れると変えられます。

グローバルメニューの横幅を変えたい

初期の状態では、グローバルメニューは横が960pxで、その中を左からつめるようにしています。

この幅を変えたい場合は、デザインCSSの

#slideMenu > .slideMenuInner {
    list-style-type: none;
    width: 960px;/*メニューの横幅を*/
    height: 100%;
    margin: 0 auto;
    padding-left: 0;
}

の中の「960」の部分で変えられます。

グローバルメニューとトグルメニューの変えるタイミングを変えたい

一応きちんとしたレスポンシブにするため、ブラウザの横幅が960pxを境目に、スライドメニューとトグルメニューを変えるようにしています。

タブレットサイズ（iPad）が768pxとかなので、初期の状態ですとタブレットではスライドメニューになってしまいます。

この切り替わるタイミングは、デザインCSSの中の真ん中あたりに

@media screen and (max-width:960px) {/*１*/

の部分と、HTML(jQuery)の下の方にある

var p = 960;//１

で調整しています（両方１番で番号ふってあります）。

ここを、例えば680pxなどにすると、タブレットでもグローバルメニュー、スマホではスライドメニューになります。

ただ、一つ前に書いた横幅の調整をしないと、タブレットサイズのときに横スクロールが発生してしまうと思います。

まとめ

長くなりましたが、メニューバーのカスタマイズでした！

質問・要望・改善点・カスタム依頼などはお問い合わせ - Yukihy Lifeからお願いします！

その他のカスタマイズ

www.yukihy.com