KITAMULABO

CSSだけで作るタブメニューとウィジェット

2021.2.4

スペース的に最初から表示はしたくないけど、必要に応じて見せたいときに便利なタブメニュー。こちらをCSSだけで実装し、更にウィジェットと組み合わせて自由度の高いメニューを作ってみる方法を解説します。

ちなみに探してみましたが、スマートに導入できる既存のプラグインは見つけられませんでした。面倒なのでjavascript系も入れたくないという方にもおすすめです。

CSSでタブメニュー

わかりやすいのはこちらのサイト。

https://web.monogusa-note.com/flexible-tabs-only-css

仕組みとしてはHTMLでinputタグのラジオボタンを使っています。ラジオボタンは選択肢の中から1個だけ選べるタイプのフォームツール。選択されると<input>タグの中にcheckedがつくので、それをCSSで拾って表示/非表示を切り替えるというもの。CSSは隣接セレクタを使用していることが中々秀逸。

一番外側のラップは<nav>タグでも<div>タグでもいいです。<input>タグは隠して<label>タグの隣接要素を表示するようにしています。CSSで最低限必要なのはこんな感じでしょうか。この場合はインプットとラベル、その中身が交互に来ていますが、<label>タグに{order:-1;}を指定することでラベルだけ先に表示します。後はマウスオーバー時の装飾だったり、必要なものを追加します。

こちらは別パターン。ラベルを先に並べて、その中身を後に並べています。こちらの場合はタブの中身に1つずつ固有のIDかクラスをふっておかないと指定しにくいですが、一応これでも対応可能。

ちなみにこの表示の切り替え、visibility:hidden;でも同じようなことが出来ますし、そちらの方がアニメーション(Transition)も付けることが出来ますが、多めの折りたたみでは余計な余白がページ下部にできてしまうようで、今回はdisplay:none;としています。

ウィジェット化する

タブメニューができたら中身をウィジェットにしたいなと欲が出てきました。

やってみたのは3パターン。

①テーマ内でウィジェットエリアの記述の前にインプットとラベルを並べる

これは最終的な出力が上のコードで言うと下のパターンになるやり方です。とりあえずならこれが一番手っ取り早いですが、ウィジェットを設置するたびに、ウィジェットのはき出すタグを見て、CSSのIDかクラスを変更しないといけないので柔軟性が低いです。

②functions.php内でウィジェットのタグの出し方を指定

functions.php内でウィジェットエリアを定義するregister_sidebar()ではウィジェットの前後にはき出すタグをしてすることが出来ます。ここで<input>と<label>をくっつけてもOKです。これだと配置したウィジェットを自動的に指定するので、管理が現実的になります。ただし、1タブに1ウィジェットしか配置出来ません。1タブに更に複数のウィジェットを配置したい場合は次のパターンになります。

③タブごとにウィジェットエリアを指定する

ウィジェットじゃなくてウィジェットエリアを設定します。これでもっと使いやすくなりました。只今サイトのトップではこのような形で実装しています。

まとめ

ということでCSSだけでウィジェットエリアをタブメニュー化することが出来ました。意外と何でも出来ちゃいますね。ぜひお試しを。

この記事がよかったら
:
:

この記事にコメントする

サイト全体へのご意見・ご感想はBBSからお願いします

CAPTCHA


このページのトップへ戻る