グローバルナビのサブメニューを左に展開する

先日、 Cocoon のフォーラムにて「iPad 横表示の状態で、右端に余白ができてしまう」問題が上がっていました。勉強がてら解決方法を考えてみたいと思います。

原因はサブメニュー
カスタマイズ
1. まずは現状把握
2. scss
まとめ

原因はサブメニュー

問題の原因は、グローバルナビの右端で使用しているサブメニューっぽいです。普段は隠れているのですが、隠れていても表示幅が確保（？）されている様な状態です。

であれば、右側に確保せず、いっそ右端のサブメニューは左側に展開すれば？と思ったのが今回の記事のキッカケです。

こちらはテストサイトでのカスタマイズ結果になります。（テストサイトですので、ご覧になる時期によっては内容が変化している場合もあります；；）

404 Not Found

カスタマイズ

check

カスタマイズは自己責任でお願いします。
wp-cocoon.comサイトのサポート対象外となります。

まずは現状把握

当サイトでは、今回の記事作成時点ではグローバルナビを使った事がありませんので、まずは Cocoon の GitHub でグローバルナビ周りのスタイル指定を確認します。

File not found · yhira/cocoon

100 ％ GPL の無料 Wordpress テーマです。開発中の開発バージョンです。安定版をダウンロードする場合は、 Cocoon 配布サイトからダウンロードしてください。 - File not found · yhira/cocoon

各種変数、 mixin が既に設定されているので、これらを流用させていただいてカスタマイズを行います。

scss

nth-of-type(5) は左展開

 //nth-of-type(5) は左展開
 $menu_height: 60px; 
 $sub_menu_width: 240px; 
 @mixin menu_item_has_children($unicode:''){ 
   position: relative; 
   >a{ 
     &::after{ 
       @include fontawesome($unicode); 
       position: absolute; 
       right: 3px; 
       top: 0; 
       //top: ($menu_height - $icon_height) / 2; 
     } 
   } 
 } 
 @mixin fontawesome($unicode:'/f004') { 
   font-family: FontAwesome; 
   content: $unicode; 
   padding-right: 3px; 
 } 
 .navi-in > ul { 
   .sub-menu { 
     min-width: $sub_menu_width; 
     ul{ 
       top: -$menu_height; 
       left: $sub_menu_width; 
       position: relative; 
     } 
   } 
   > li { 
     &:nth-of-type(5) { 
       .sub-menu { 
         right: 0; 
         .menu-item-has-children { 
           @include menu_item_has_children('\f104'); 
           >a{ 
             &::after{ 
               left: 3px; 
               //top: ($menu_height - $icon_height) / 2; 
             } 
           } 
           ul { 
             margin-left: -$sub_menu_width * 2; 
             margin-right: $sub_menu_width * 2; 
           } 
         } 
       } 
     } 
   } 
 }

mixin 設定は公式サイトの内容そのままです。カスタマイズと呼べるのはこの箇所です。

 .navi-in > ul { 
   .sub-menu { 
     min-width: $sub_menu_width; 
     ul{ 
       top: -$menu_height; 
       left: $sub_menu_width; 
       position: relative; 
     } 
   } 
   > li { 
     &:nth-of-type(5) { 
       .sub-menu { 
         right: 0; 
         .menu-item-has-children { 
           @include menu_item_has_children('\f104'); 
           >a{ 
             &::after{ 
               left: 3px; 
               //top: ($menu_height - $icon_height) / 2; 
             } 
           } 
           ul { 
             margin-left: -$sub_menu_width * 2; 
             margin-right: $sub_menu_width * 2; 
           } 
         } 
       } 
     } 
   } 
 }