【CSS】オシャレな折りたたみメニューを作ってみる / ベース編【CSSアニメーション】
今回はCSSを使って、オシャレな折りたたみメニューを作ってみたいと思います！
最初に、ベースとなるサンプルとコードを紹介した後、カスタムパターンをいくつか紹介していきます。
目次
はじめに
今回から、CSSコードを<style>タグで囲んだ形で紹介しています。
HTML記述に対応しているブログであれば、紹介しているコードをそのまま貼り付けて試すことができます。
また、これまでの記事と違い、サンプル紹介→コード紹介という流れで解説を進めていきます。
なるべくコピペでも使えるように構成していますので、まずはサンプルを見てみて、気になるものがあれば、ぜひ試してみてください！
※ 現在、試行錯誤中です。不評な場合は、元の形式に戻すかもしれません(笑)
ブログで使用する場合は
ご利用のブログがHTML記述に対応している場合は、紹介するCSSをそのまま貼り付けて試してみてください。
※ CSS向けの入力欄などに入力する場合は、CSSコードの上下にある<style>と</style>を削除して貼り付けてください。
サイトにある既存の要素にCSSを適用する場合は、以下の記事を参考に、紹介するCSSのセレクタ部分を調整してみてください。
はてなブログの場合
以下の記事で、はてなブログでCSSを使う方法を紹介しています。
本記事で紹介する内容を、はてなブログで試す場合は、上記の記事を参考にしてください。
ベースサンプル
以下のサンプルが今回紹介する折りたたみメニューのベースとなります。
マウスオーバー（スマホの場合はタップ）で、メニューが開きます。
マウスを合わせてメニューが開くか、確認してみてください。
CSSコード
CSSは以下のような感じです。
少し長いですが、このあと紹介するHTMLと一緒に貼り付けるだけでＯＫです。
<style> .menu { min-width: 20ch; display: flex; flex-flow: column nowrap; font: bold 1.5rem "IM Fell English SC", serif; position: relative; margin: 1rem auto; padding: 1.1rem 3rem; } .menu::before { content: "/"; align-self: center; margin-bottom: 1rem; } .menu::after { content: "/"; align-self: center; margin-top: 1rem; } .menu, .menu ul { list-style-type: none; } .menu li a { display: flex; justify-content: flex-start; color: currentColor; text-decoration: none; padding: 0.3rem 0; order: 0; } .menu li a::before { content: ""; display: block; border-bottom: 1px black dotted; position: relative; top: -3px; flex: 1 1 auto; margin: 0 1rem; order: 1; } .menu li ul { font-size: 1rem; font-weight: normal; } .menu li ul > li > a { text-indent: 0; padding: 0.5rem 0 0.5rem 2ch; margin: 0; } .menu:hover > ul > li { opacity: 0.3; } .menu:hover::before { transform: rotate(0); content: "__"; } .menu:hover::after { transform: rotate(0); content: "__"; } .menu li a::after { transition: transform 0.3s; } .menu li:hover { transition: background-color 0.3s; background: rgba(255, 255, 0, 0.15); opacity: 1 !important; } .menu li:hover a::after { text-decoration: none; } .menu li:hover > a::before { transition: flex-grow 0.3s; width: 0; flex-grow: 0; transform-origin: center bottom; } .menu.collapse ul > li { max-height: 1ch; transform: scaleY(0.1); transform-origin: center top; transition: transform 0.2s, max-height 0.5s; } .menu.collapse:hover ul li { max-height: 10em; transform: scaleY(1); } </style>
HTMLコード
HTMLコードは以下のような感じ。
<ul class="menu collapse"> <li><a>第一章</a></li> <li> <a>第二章</a> <ul> <li><a>第一節</a></li> <li><a>第二節</a></li> </ul> </li> <li> <a>第三章</a> <ul> <li><a>第一節</a></li> <li><a>第二節</a></li> <ul> <li><a>その１</a></li> <li><a>その２</a></li> <ul> <li><a>A</a></li> <li><a>B</a></li> <li><a>C</a></li> </ul> </ul> </ul> </li> </ul>
紹介したCSSとHTMLを貼り付けると、最初に紹介したサンプルが表示されます。
menuクラスを持ったul要素内のul要素がサブメニュー、liタグがメニューの項目として表示されます。
menuクラスと一緒にcollapseクラスを指定すると折りたたみアニメーションが適用されます。
カスタムパターン
紹介したベースサンプルをもとに、いくつかのカスタムパターンを紹介していきます。
折りたたみをなしにしてみる
まずは、折りたたみをなしにしてみたいと思います。
サンプル
実際に、折りたたみなしにしてみたのが以下のサンプルです。
ベースサンプルでは、マウスを合わせていないと「第一章」や「第二章」といった部分が、折りたたまれていました。
上記のサンプルでは、折りたたみをオフにしているので、最初から「第一章」などの部分が表示されています。
CSSコード
ベースサンプルで紹介したCSSコードだけでも折りたたみなしにもできるのですが、ここでは微調整用のCSSコードを追加しておきます。
折りたたみをなしにする場合、ベースサンプルのメニュー前後にあった/が余計なので、その部分を表示しないための調整を追加します。
以下のようなCSSコードを追加してください。
<style> .menu.front-and-back-none::before { content: ""; margin-bottom: 0; } .menu.front-and-back-none::after { content: ""; margin-top: 0; } </style>
HTMLコード
サンプルを表示するためのHTMLコードは、以下のような感じになります。
<ul class="menu front-and-back-none"> <li><a>序文</a></li> <li> <a>本文</a> <ul> <li><a>第一章</a></li> <li><a>第二章</a></li> </ul> </li> </ul>
ベースサンプルのコードとの違いは、collapseクラスが無くなっている事と、先ほど追加したCSSを適用するためのfront-and-back-noneクラスが追加されている事です。
collapseクラスをはずすことで、折りたたみアニメーションが無くなります。
また、front-and-back-noneクラスを追加することで、メニュー前後の/が表示されなくなります。
マーカーをカスタムしてみる
次に、リストの先頭に表示されるマーカー文字の種類をカスタムしてみます。
デフォルト(ベースサンプル)だとマーカー文字はなしになっています。
今回は、デフォルトの「マーカーなし」に加えて、数字、ゼロ埋め数字、ローマ数字、四角記号の４つのパターンを追加したいと思います。
サンプル
まずは、デフォルト表示のマーカーなしパターン。
最初に紹介したベースサンプルと同じもので、比較用です。
続いて、数字のパターンです。
シンプルで使いやすいかと思います。
次は、ゼロ埋め数字パターン。
数字のパターンと違って、最初が0から始まるパターンです。
少し違いを出したい場合にオススメです。
続いて、ローマ数字のパターン。
最後は、四角記号のパターンです。
CSSコード
マーカーカスタム用のCSSコードは以下のような感じです。
<style> .menu.list-style-decimal, .menu.list-style-decimal ul { list-style-type: decimal; } .menu.list-style-decimal-leading-zero, .menu.list-style-decimal-leading-zero ul { list-style-type: decimal-leading-zero; } .menu.list-style-upper-roman, .menu.list-style-upper-roman ul { list-style-type: upper-roman; } .menu.list-style-square, .menu.list-style-square ul { list-style-type: square; } </style>
.menu要素と.menu ul要素のlist-style-typeプロパティを調整して、マーカーの種類を変更しています。
HTMLコード
表示用のHTMLコードは以下のような感じです。
<ul class="menu collapse"> <li><a>序文</a></li> <li> <a>本文</a> <ul> <li><a>第一章</a></li> <li><a>第二章</a></li> </ul> </li> </ul> <ul class="menu collapse list-style-decimal"> <li><a>序文</a></li> <li> <a>本文</a> <ul> <li><a>第一章</a></li> <li><a>第二章</a></li> </ul> </li> </ul> <ul class="menu collapse list-style-decimal-leading-zero"> <li><a>序文</a></li> <li> <a>本文</a> <ul> <li><a>第一章</a></li> <li><a>第二章</a></li> </ul> </li> </ul> <ul class="menu collapse list-style-upper-roman"> <li><a>序文</a></li> <li> <a>本文</a> <ul> <li><a>第一章</a></li> <li><a>第二章</a></li> </ul> </li> </ul> <ul class="menu collapse list-style-square"> <li><a>序文</a></li> <li> <a>本文</a> <ul> <li><a>第一章</a></li> <li><a>第二章</a></li> </ul> </li> </ul>
list-style-xxxのようなクラスを追加すると、指定のマーカー文字がリストの先頭に表示されます。
指定するクラスとマーカー文字の対応は以下の通り。
| クラス | マーカー文字の種類 |
|---|---|
| 追加クラスなし | マーカーなし |
| list-style-decimal | 数字 |
| list-style-decimal-leading-zero | ゼロ埋め数字 |
| list-style-upper-roman | ローマ数字（大文字） |
| list-style-square | 四角記号 |
見出しのあとの下線をカスタム
続いて、見出しのあとに表示されている下線をカスタムしてみます。
サンプル
まずは、下線なしパターンのサンプル。
続いて、破線タイプのサンプルです。
最後は１本線タイプのサンプルです。
CSSコード
下線カスタム用のCSSコードは以下のような感じです。
<style> .menu.item-line-none li a::before { border-bottom-width: 0; border-bottom-style: none; } .menu.item-line-dashed li a::before { border-bottom-width: 1px; border-bottom-style: dashed; } .menu.item-line-solid li a::before { border-bottom-width: 1px; border-bottom-style: solid; } </style>
.menu li a::before要素のborder-bottomを調整すると、見出しの後ろにある下線をカスタムすることができます。
ここでは、border-bottomのstyleとwidthを調整して、下線タイプを調整しています。
HTMLコード
サンプルのHTMLコードは以下のような感じです。
<ul class="menu collapse item-line-none"> <li><a>序文</a></li> <li> <a>本文</a> <ul> <li><a>第一章</a></li> <li><a>第二章</a></li> </ul> </li> </ul> <ul class="menu collapse item-line-dashed"> <li><a>序文</a></li> <li> <a>本文</a> <ul> <li><a>第一章</a></li> <li><a>第二章</a></li> </ul> </li> </ul> <ul class="menu collapse item-line-solid"> <li><a>序文</a></li> <li> <a>本文</a> <ul> <li><a>第一章</a></li> <li><a>第二章</a></li> </ul> </li> </ul>
menu、collapseクラスに加えて、item-line-xxxのようなクラスを指定すると、見出しあとの下線のタイプを切り替えることができます。
今回追加したクラスと下線タイプの対応は以下の通り。
| クラス | 下線タイプ |
|---|---|
| 追加クラスなし | 点線 |
| item-line-none | 下線なし |
| item-line-dashed | 破線 |
| item-line-solid | １本線 |
ひらくスピードを調整してみる
次に、折りたたみがひらくアニメーションのスピードをカスタムしてみたいと思います。
サンプル
まずは、比較用のデフォルトパターンです。
ベースサンプルと同じものです。
続いて、slowパターン。
少しわかりにくいですが、デフォルトから少し遅くなっているのがわかると思います。
最後は、very-slowパターン。
デフォルトと比べると、ひらくアニメーションがだいぶん遅いのがわかると思います。
CSSコード
CSSコードは以下のような感じです。
<style> .menu.slow.collapse ul > li { transition: transform 0.4s, max-height 1s; } .menu.very-slow.collapse ul > li { transition: transform 0.8s, max-height 2s; } </style>
.menu ul > li要素のtransitionプロパティを調整することで、折りたたみアニメーションを調整しています。
HTMLコード
表示用のHTMLコードは以下のような感じです。
<ul class="menu collapse"> <li><a>序文</a></li> <li> <a>本文</a> <ul> <li><a>第一章</a></li> <li><a>第二章</a></li> </ul> </li> </ul> <ul class="menu collapse slow"> <li><a>序文</a></li> <li> <a>本文</a> <ul> <li><a>第一章</a></li> <li><a>第二章</a></li> </ul> </li> </ul> <ul class="menu collapse very-slow"> <li><a>序文</a></li> <li> <a>本文</a> <ul> <li><a>第一章</a></li> <li><a>第二章</a></li> </ul> </li> </ul>
menuとcollaspeクラスに、slowまたはvery-slowクラスを追加すると、折りたたみアニメーションのスピードを切り替える事ができます。
カスタム内容を組み合わせてみる！
ここまで追加したカスタム内容は組み合わせて使用することができます。
最後に、いくつか、ここまで紹介したカスタムを組み合わせたサンプルを紹介したいと思います。
サンプル
まずは、見出し前のマーカーを数字に、見出しあとの下線を破線に指定してみます。
続いて、見出し前のマーカーをゼロ埋め数字に、見出しあとの下線を１本線に、アニメーションスピードはslowを指定してみます。
最後に、見出し前のマーカーを四角の記号に、見出しあとの下線はなしで、アニメーションスピードはvery-slowに指定してみます。
また、front-and-back-noneクラスを指定して、メニュー前後の/を表示しないようにしてみます。
HTMLコード
組み合わせサンプルのHTMLコードは以下のような感じです。
<ul class="menu collapse list-style-decimal item-line-dashed"> <li><a>序文</a></li> <li> <a>本文</a> <ul> <li><a>第一章</a></li> <li><a>第二章</a></li> </ul> </li> </ul> <ul class="menu collapse list-style-decimal-leading-zero item-line-solid slow"> <li><a>序文</a></li> <li> <a>本文</a> <ul> <li><a>第一章</a></li> <li><a>第二章</a></li> </ul> </li> </ul> <ul class="menu collapse list-style-square item-line-none very-slow front-and-back-none"> <li><a>序文</a></li> <li> <a>本文</a> <ul> <li><a>第一章</a></li> <li><a>第二章</a></li> </ul> </li> </ul>
他の組み合わせも、もちろん可能なので、カスタムしたい内容に合わせて、クラスを組み合わせてみてください。
まとめ
今回はCSSを使って、オシャレな折りたたみメニューを作ってみました！
CSSが利用可能なサイトであれば、今回紹介した内容を使用することができます。
また、紹介したコードを調整すれば、オリジナルなカスタムも簡単にできるので、ぜひ、いろいろいじって遊んでみてください。
次回は、今回紹介した折りたたみメニューをベースにして、「カラー」をテーマに、さらにカスタムしてみたいと思います。
