Yukihy Life

ゆきひーによる日常生活をアウトプットするブログ 映画・TOEIC・教育ネタとだいぶ物理とWeb制作

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

スポンサーリンク

f:id:ftmaccho:20151201234036p:plain

12/07:その他のカスタマイズを充実させました。

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

以前の記事

www.yukihy.com

このメニューバー、CSSを勉強したてに作ったものなので、若干の不満な点などが残ったりしていました。例えば「タイトル下」の部分に広告を入れるとトグルメニューのときにデザインが崩れたりすることです。

また、メニューバーにドロップダウンメニューにできないかとのご質問もいただいたので、合わせて修正版のやり方を記事にしたいと思います。

はてなブログ向けですが、全く同じコードで他のブログサービスでも使えるのではないかと思います。

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

実装図

具体的に行ってみた結果はこんな感じです。

f:id:ftmaccho:20151201234036p:plain

動かすとこんな感じです。

f:id:ftmaccho:20151201221141g:plain

こんな感じで、ブラウザの横幅が広いときにはグローバルメニュー&ドロップダウンのメニューにして子メニューを表示し、ブラウザの幅を縮めるとトグルメニューに変更するというものです。子メニューの表示はCSSで組んでいます。

はてなブログではカテゴリの階層化が(デフォルトでは)不可能なので、自分の頭の中で組み立てていくか、もしくはカテゴリの階層化が行えている方は素直にできると思います。

ちなみにこのブログでも(12/1現在)、カテゴリ「サイエンス」と、カテゴリ「Web制作」の部分でドロップダウンにしてみました。PCの方は、ぜひ試してみてください。

注意点

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

  • 今回のものでは、トグルメニューにしたときに子メニューを表示するようにはしていません。どうしようか迷ったのですが、トグルメニューで子メニューを表示するには、親メニュー部分にはリンクが貼れなくなるので、また別に書いていこうと思っています。
  • Googleアドセンスの上にドロップダウンメニューがかぶさってしまうと、規約違反になってしまい、広告を止められる可能性があります。特にサイドバーの上に広告を貼っている方は、被りやすいので気をつけて下さい。

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

カスタマイズ

では実際のカスタマイズのやり方です。

CSS

最初にCSSす。以下のコードを「デザインCSS」に

/*****グローバルメニュー****/
#menu{
    width: 100%;
    margin: 10px auto;
    background: #444;/*7*/
}
#menu-inner{
    width: 1000px;/*1*/
    height: 40px;/*2*/
    margin: 0 auto;
    background: #444;/*8*/
}
#menu-btn{display: none;}
#menu-content{
    padding-left: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    list-style-type: none;
}
#menu-content > li{
    position: relative;
    float: left;
    height: 100%;
    text-align: center;
}
#menu-content > li > a{
    position: relative;
    display: block;
    height: 100%;
    padding-left: 15px;/*3*/
    padding-right: 15px;/*3*/
    line-height: 40px;/*2*/
    background: #444;/*9*/
    color: #fff;/*10*/
    font-size: 70%;
    text-decoration: none;
    z-index: 2;
}
#menu-content > li > a:hover{
    background: #555;/*11*/
    color: #fff;/*12*/
}
#menu-content > li > a > .blogicon-chevron-down{margin-right: 5px;}
/*2階層目*/
#menu-content > li > ul.second-content{
    visibility: hidden;
    position: absolute;
    top: 0;
    margin: 0;
    padding-left: 0;
    list-style-type: none;
    z-index: -1;
}
#menu-content > li:hover > ul.second-content{
    visibility: visible;
    top: 40px;/*2*/
    z-index: 1;
    transition: all .3s;
}
#menu-content > li > ul.second-content > li{
    text-align: center;
    width: 200px;/*4*/
    height: 40px;/*5*/
}
#menu-content > li > ul.second-content > li > a{
    display: block;
    line-height: 40px;/*5*/
    background: #444;/*13*/
    color: #fff;/*14*/
    font-size: 70%;
    text-decoration: none;
}
#menu-content > li > ul.second-content > li > a:hover{
    background: #555;/*15*/
    color: #fff;/*16*/
}
/*******トグルメニュ*********/
@media screen and (max-width:960px){/*19*/
#menu-inner{
    width: 100%;
    height: auto;
}
#btn-content{text-align: right;}/*20*/
#menu-btn{
    display: inline-block;
    padding: 8px 15px;
    margin: 5px;
    cursor: pointer;
    background: #555;/*17*/
    color: #fff;/*18*/
    font-size: 70%;
}
#menu-content{
    display: none;
    width: 100%;
}
#menu-content > li{
    width: 100%;
    height: 40px;/*6*/
    float: none;
}
#menu-content > li > a{
    width: 100%;
    line-height: 40px;/*6*/
    padding: 0;
    text-decoration: none;
}
/*2階層目*/
#menu-content > li:hover > ul.second-content{display: none;}
#menu-content > li > a > .blogicon-chevron-down{display: none;}
}

この時点では、まだ何も起こらないと思います。

HTML&jQuery

次にHTMLです。以下のコードを「タイトル下」に

<div id="menu">
<div id="menu-inner">
    <div id="btn-content">
        <span id="menu-btn"><i class="blogicon-reorder"></i> MENU</span>
    </div>
    <ul id="menu-content">
        <li>
            <a href="1階層目のリンク">カテゴリ1 <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="2階層目のリンク">カテゴリ1-1</a></li>
                <li><a href="2階層目のリンク">カテゴリ1-2</a></li>
                <li><a href="2階層目のリンク">カテゴリ1-3</a></li>
                <li><a href="2階層目のリンク">カテゴリ1-4</a></li>
            </ul>
        </li>
        <li>
            <a href="1階層目のリンク">カテゴリ2 <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="2階層目のリンク">カテゴリ2-1</a></li>
                <li><a href="2階層目のリンク">カテゴリ2-2</a></li>
                <li><a href="2階層目のリンク">カテゴリ2-3</a></li>
                <li><a href="2階層目のリンク">カテゴリ2-4</a></li>
            </ul>
        </li>
        <li>
            <a href="1階層目のリンク">カテゴリ3 <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="2階層目のリンク">カテゴリ3-1</a></li>
                <li><a href="2階層目のリンク">カテゴリ3-2</a></li>
                <li><a href="2階層目のリンク">カテゴリ3-3</a></li>
                <li><a href="2階層目のリンク">カテゴリ3-4</a></li>
            </ul>
        </li>
        <li>
            <a href="1階層目のリンク">カテゴリ4 <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="2階層目のリンク">カテゴリ4-1</a></li>
                <li><a href="2階層目のリンク">カテゴリ4-2</a></li>
                <li><a href="2階層目のリンク">カテゴリ4-3</a></li>
                <li><a href="2階層目のリンク">カテゴリ4-4</a></li>
            </ul>
        </li>
        <li>
            <a href="1階層目のリンク">カテゴリ5 <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="2階層目のリンク">カテゴリ5-1</a></li>
                <li><a href="2階層目のリンク">カテゴリ5-2</a></li>
                <li><a href="2階層目のリンク">カテゴリ5-3</a></li>
                <li><a href="2階層目のリンク">カテゴリ5-4</a></li>
            </ul>
        </li>
        <li>
            <a href="1階層目のリンク">長い長いカテゴリ名のときの調整 <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="2階層目のリンク">カテゴリ6-1</a></li>
                <li><a href="2階層目のリンク">カテゴリ6-2</a></li>
                <li><a href="2階層目のリンク">カテゴリ6-3</a></li>
                <li><a href="2階層目のリンク">カテゴリ6-4</a></li>
            </ul>
        </li>
        <li>
            <a href="1階層目のリンク"><i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="2階層目のリンク">カテゴリ7-1</a></li>
                <li><a href="2階層目のリンク">カテゴリ7-2</a></li>
                <li><a href="2階層目のリンク">カテゴリ7-3</a></li>
                <li><a href="2階層目のリンク">カテゴリ7-4</a></li>
            </ul>
        </li>
    </ul>
</div>
</div>
<div style="clear:both"></div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
    var menuBtn = $("#menu-btn"),
        menuContent = $("#menu-content");
    menuBtn.click(function(){
        menuContent.slideToggle();
    });
    $(window).resize(function(){
        var win = $(window).width(),
            p = 960;//19
        if(win > p){
            menuContent.show();
        }else{
            menuContent.hide();
        }
    });
});
</script>

これで、こんな感じのメニューができあがると思います。

f:id:ftmaccho:20151201230202p:plain

HTMLの中にリンクと文字を入れる

上に貼ったHTMLだとリンクも文字もめちゃめちゃだと思うので、ご自身のブログに合うように入れていきます。

具体的には「カテゴリ1」「カテゴリ1-1」などのところに親カテゴリと子カテゴリの文字を入れ、「1階層目のリンク」「2階層目のリンク」と書いてあるところに、対応するURLを貼り付けていってください。

余った部分は消去してください。不足する場合は、同じ塊を下にコピペしてやってください。

以上でカスタマイズは終了になります。

その他のカスタム

メニュー部分はブログの顔にもなる部分なので、幅や色など簡単に変えられるところを書いていきます。

で、変えるところなのですが、CSSやHTMLの中にコメントで番号をふってあります(/16/とか)。そこの番号で書いていきます。

幅関係

幅関係を書いていきます

  • メニュー全体の横幅→1
  • メニュー全体の縦幅→2(3つあるので同じ値に)
  • 親リンク1つ(カテゴリ1など)の横の余白→3(2つある)
  • 子リンクの横幅→4
  • 子リンクの縦幅→5(2つある)
  • トグルメニュー時のリンクの縦幅→6(2つあるので同じ値に)

それぞれの値を、「◯◯px」とか、「◯◯%」とか、全て半角で入れると調整ができると思います。

色関係

色関係を書いていきます

  • メニュー全体(外側)の背景→7
  • メニュー全体(内側)の背景→8
  • 親リンクの背景色・文字色→9・10
  • 親リンクホバーの背景色・文字色→11・12
  • 子リンクの背景色・文字色→13・14
  • 子リンクホバーの背景色・文字色→15・16
  • MENUの文字の背景色・文字色→17・18

色は原色大辞典

www.colordic.org

などがものすごく役にたちます。

アイコンを変えたい!

デフォルトでは全て下矢印になっていると思いますが、子カテゴリがないものはアイコンを変えたい!ということもあると思います。

アイコンはHTML内の

<i class="blogicon-chevron-down"></i>

の部分を変更するとできます。はてなブログで使えるアイコンは、

shirokai.hatenablog.com

がとても分かりやすく載っています!

グローバルメニューとトグルメニューの切り替え

デフォルトだと、横幅が960px以下になるとグローバルメニューとトグルメニューが入れ替わります。これは僕が使わせていただいているテーマ「blank」のワンカラムになるタイミングにしていますが、結構早いと思います。

これは19のところの数字を変えることで解消できます。19はCSSとjQueryの2箇所あるので気をつけてください。

標準では右側にくるようにしていますが、20番を「center」「left」などと変えると位置を真ん中・左に変えられます。

トグルメニューを上にする

f:id:ftmaccho:20151201233736p:plain

トグルメニューを画面の1番上にするには、CSSの19のすぐ下にある

#menu-inner{
    width: 100%;
    height: auto;
}

を、

#container{
    margin-top: 40px;
}
#menu-inner{
    position: absolute;
    top: 0;
    z-index: 2;
    width: 100%;
    height: auto;
}

に上書きしてやるとできると思います。

トグルメニューをスクロールしても固定にする

スクロールしても固定にするには、同じくCSSの19のすぐ下にある

#menu-inner{
    width: 100%;
    height: auto;
}

#container{
    margin-top: 40px;
}
#menu-inner{
    position: fixed;
    top: 0;
    z-index: 2;
    width: 100%;
    height: auto;
}

に上書きしてやるとできると思います。

グローバルメニューの横幅を均等幅にする

上のだと、メニューが右寄せになりますが、それぞれを均等幅にもできます。

f:id:ftmaccho:20151207214649p:plain

これをするには、CSSをいじっていきます。

まず

#menu-content > li > a{
    position: relative;
    display: block;
    height: 100%;
    padding-left: 15px;/*3*/
    padding-right: 15px;/*3*/
    line-height: 40px;/*2*/
    background: #444;/*9*/
    color: #fff;/*10*/
    font-size: 70%;
    text-decoration: none;
    z-index: 2;
}

#menu-content > li > a{
    position: relative;
    display: block;
    height: 100%;
    width: 100%;/*3*/
    line-height: 40px;/*2*/
    background: #444;/*9*/
    color: #fff;/*10*/
    font-size: 70%;
    text-decoration: none;
    z-index: 2;
}

に変えて、

#menu-content > li{
    position: relative;
    float: left;
    height: 100%;
    text-align: center;
}

#menu-content > li{
    position: relative;
    float: left;
    height: 100%;
    text-align: center;
    width: ◯◯%;
}

に変えてください。◯◯の部分には、(100/リンクの個数)を並べます。例えば上の図ではリンクが8個あったので(100/8 = 12.5)となるので、◯◯の部分には半角で12.5と入れてください。

固定トグルメニューを透けさせる

上に書いた固定する方法などと併用して、トグルメニューを透けさせることもできます。

f:id:ftmaccho:20151207215813p:plain

それをするには、CSS19番のすぐ下にある、

#menu-inner{
    width: 100%;
    height: auto;
}

に、

opacity: 0.8;

を加えてください。数字を落とすほど透けます。

トグルメニューを2列にする

少しいじるだけで、トグルメニューを2列にもできます。

f:id:ftmaccho:20151207220037p:plain

これをするには、CSSの下の方をみていただいて、

#menu-content > li{
    width: 100%;
    height: 40px;/*6*/
    float: none;
}

の部分を

#menu-content > li{
    width: 50%;
    height: 40px;/*6*/
}

と上書きしてやるとできます。

まとめ

以上がカスタマイズになります。おそらく(上にする系以外は)はてなブログ以外でも使えるやり方だと思います。

子カテゴリを有効に使っている方は、ぜひお試しください。

質問や設置代行・ブログカスタム依頼などは、お問い合わせ - Yukihy Lifeよりお願いいたします!

その他のカスタマイズはこちらから。随時更新中!

www.yukihy.com