【Cocoon】メニューデザインをマテリアル風にするCSSカスタマイズ

Cocoonカスタマイズ

2018/06/062018/08/31

今回は無料テーマ「Cocoon」のメニューバーをマテリアル風にデザインするカスタマイズをご紹介します。

このカスタマイズでは下記のような機能を実装できます。

影をつけてメニュー全体が浮き上がったようなデザインに。
現在いるページの項目には下線をつけ、文字色を濃くする。
マウスオーバーでふわっとアニメーションしつつ下線と文字色変更。

百聞は一見に如かず。以下のようになります。

しっかりと、展開したサブメニューにも影が付いていますね。

この記事の目次

Cocoonのメニューデザインをマテリアル風にするCSSカスタマイズ
- まずはCocoon設定を変更
- CSSカスタマイズ
いかがだっただろうか。

Cocoonのメニューデザインをマテリアル風にするCSSカスタマイズ

※CSSカスタマイズについては【初心者向け】CocoonにCSSカスタマイズを追加する方法と適用されない場合の注意点。を参考にしてください。

【初心者向け】CocoonにCSSカスタマイズを追加する方法と適用されない場合の注意点。

こんにちは、さいとう（@S41T0H）です。最近、当サイトで掲載しているCocoonカスタマイズについての質問を非常に多く受けます。その中で多いのが「カスタマイズが適用されない！！！！！！！！」というもの。せっかく当サイトを見つ...

まずはCocoon設定を変更

「Cocoon 設定」→「ヘッダー」からヘッダー設定を開きます。

例では「センターロゴ（スリム）」に設定していますがお好みでどうぞ。

重要なのは「グローバルナビメニュー色」の部分。

グローバルナビ色は「#ffffff」、グローバルナビ文字色は「#333333」にしておいてください。

設定できたら忘れずに「変更をまとめて保存」をクリックします。

CSSカスタマイズ

「テーマの編集」からCocoon Child（子テーマ）のstyle.cssを編集していきます。

以下のコードを子テーマ内のstyle.css内に追記してください。

nav#navi, .menu-header .sub-menu{
    font-weight: bold;
    box-shadow: 0 5px 15px -5px rgba(0,0,0,0.2);
}

.menu-header .sub-menu .item-label{
    font-size: 80%;
}
.menu-header .item-label{
    color: #b5b5b5 !important;
}
.menu-header .current-menu-item,
.menu-header .current-post-item,
.menu-header .current-menu-ancestor,
.menu-header .current-post-ancestor,
.menu-header .menu-item:hover {
    color: #333 !important;
    border-bottom: 3px solid #FDD835;
    transition: all .2s ease;
}

.menu-header .sub-menu .menu-item,
.menu-header .sub-menu .menu-item:hover{
    border-bottom: none;
}
.menu-header .current-menu-item>a .item-label,
.menu-header .current-post-item>a .item-label,
.menu-header .current-menu-ancestor>a .item-label,
.menu-header .current-post-ancestor>a .item-label,
.menu-header .item-label:hover{
    color: #333 !important;
    transition: all .2s ease;
}