Luxeritas で常に展開するグローバルナビを作ってみる

レスポンシブデザインが主流の昨今、あちこちのサイトで上部にハンバーガーメニューが置かれているのを見かけます。
横三本線のアレですね。ハンバーガーに見える見えないの議論は置いておいて、もっと大事な問題が有ります。

スクリーンリーダーで不具合

iPhone の VoiceOver 等のスクリーンリーダーを使って操作している場合、そもそもメニューを開けないという問題が多発します。
メニューの位置をタップしても反応しないのに、上下からフリック操作で移動すると、開いてもいないメニューの中身を1つずつ読み上げたりします。
モバイル画面ではコンパクトにまとめられてとても便利な機能だとは思うのですが、そんな理由からもハンバーガーメニューの印象が余り良くありません。

そこで、モバイル画面でもメニューを展開したままに出来ないものかと調べてみるも、これと言った解決策も見つからず。
CSS をいじって無理やり開いたままにする様な方法も有る様ですが、何か不具合起こしそうですし、テーマ更新で使えなくなったりしても困るので諦める事に。
では、自分でそれっぽいものを作ろうと考えたのが今回の主題。

グローバルナビを自作

Luxeritas の設定

下準備として「Luxeritas」→「カスタマイズ (外観)」→「ヘッダーナビ（グローバルナビ）」の「グローバルナビ表示」のチェックを外します。
さらに「パンくずリンク」のパンくずリンクの配置のボックスで「コンテンツ領域の中」を選択します。
パンくずリンクは使わなくても良いんですが、パンくずリンクのホームへのリンクがそのままメニューの代替として使えます。

メニューリストの作成

「外観」→「ウィジェット」で「ヘッダー下ウィジェット」エリアにカスタム HTML をセットします。
この中に


 <ul class="header-menu">
  <li>メニュー１</li>
  <li>メニュー２</li>
  <li>メニュー３</li>
 </ul>

こんな感じでリストを書いて行きます。class名は適当。
フッターメニューを作る時もこんな事書いた気もするけど、コードは使い回しなのは秘密。
Luxeritas の Footer に横並びのメニューを作ってみる

子テーマの編集

これを CSS で味付けしていく訳ですが、まずはそれっぽい形にするところまで。
float で回り込ませて行く方法も有ると思いますが、ここでは Flexbox を使います。
「Luxeritas」→「子テーマの編集」に CSS を記述。

.header-menu{list-style-type:none;display:flex;}
.header-menu li{flex:1;box-sizing:border-box;text-align:center;}

これでとりあえずの形にはなると思います。
list-style-type:none;でリストの記号を消して
display:flex; でメニューを横並びに
flex:1; でメニューを等幅にして
text-align:center; でテキストをボックス内で中央寄せします。
後は、枠線を入れたり色を付けたりは好みだと思いますが、次にクリック範囲を広げて押し易い様にしてみます。

.header-menu li a{text-decoration:none;display:block;padding:8px 0;}

text-decoration:none; でリンクの下線を消して
display:block; でクリック範囲を Li 要素まで広げて
padding:8px 0; で上下の余白を整えます。

メニューが1段で収まらない場合は
.header-menu{list-style-type:none;display:flex;flex-wrap:wrap;}
.header-menu li{width:120px;box-sizing:border-box;}

flex-wrap:wrap; で画面端でメニューを折り返す様にして
width:120px; でメニュー幅を均一にします。メニューの長さにより調整。無くても可。

右寄せのメニューにしたい場合は
.header-menu{list-style-type:none;display:flex;flex-wrap:wrap;justify-content:flex-end;}

justify-content:flex-end; を追加すると右寄せになります。
この場合も width を必要に応じて調整します。

グローバルナビ完成

デフォルトで用意されているメニューを使った方が、見た目には格好良いですが、これで VoiceOver 等のスクリーンリーダーで不具合を起こす事も無いでしょう。
最近はダークモードで使っている人も増えているでしょうし、色が変わったりアニメーションだとかは返って見辛くなる事が有ります。
目に優しいWebサイトの配色は白？黒？それとも…