グローバルメニューのアニメーション表示について

> グローバルメニュー(PC)をマウスホバーした時に、
> 下の階層のメニューをトグルのようにアニメーションで表示させたい

デフォルトではそうなっていますが、言われていることと質問に使われている言葉の問題で、やりたい事の内容が伝わっていないかも知れません。

こうしたいと思われるメニューを利用されているサイトなどがあれば、そのリンクを貼って下さい。

トグルとは、スイッチを操作するごとに状態が切り替わるものを言います。つまり、ホバーがスイッチになって表示・非表示が切り替わっているので、デフォルトではそうなっているということです。

公式のサイドバーのアーカイブなどの折りたたみがそれにあたります。西暦をクリックするごとに月が表示されたり閉じられたり。こういうものです。

アニメーションさせたいということなので、何かしら表示動作が欲しいということかと思いますが、それがどういうものかがわからないという感じです。

ご返信ありがとうございます。
言葉足らずですいません。

https://open-cage.com/albatros/

ここのサイトのメニューのようにマウスホバーでアニメーションさせたいと思いました。
どうぞ宜しくお願いします。

サンプル: それらしいドロップダウン | codepen
※ cssはscssで書いています。css欄の下向き三角からview compiledでcssに変換できます。

なんとかcssだけでそれっぽくできないものかとやってみました。

css欄にあるコメントアウトしてあるものは、jQueryでやる場合に必要になるものですが、jQueryのslideDown()を使うのが一番簡単でそれらしいかなぁと思ってやってみたものの、slideDown()とほぼ同じようなことがcssでできたので、それでよいかとコメントアウトしてあります。

本来言われているような遅延して表示されるメニューはディレイを設けることで、配列のインデックスと掛けて表示させます。

0: アイテム1
1: アイテム2
2: アイテム3
3: アイテム4

このようにサブメニューがなっているとした場合、アイテムは1から始まっていますがたいていの配列は0から入っています。ディレイをやるためには0である必要もあるんですけれども。

例えば遅延時間を200ms(ミリセカンド)だとします。0.2秒です。配列のインデックスにこの遅延時間delayを掛けると、

0: アイテム1 0
1: アイテム2 200
2: アイテム3 400
3: アイテム4 600

となって、インデックスが0の時は遅延なしにすぐに表示され、それ以降は200msごとに表示されます。これが順番に表示できる理屈です。ただ、この場合表示を遅くしすぎると、操作できるまでに待たせることになるので煩わしく思われる可能性もあります。上の例で行っても1秒前後の話ですが。

なのでなるべくそれっぽく表示しつつ、煩わしくない効果を選ばないといけません。

またアイテムの最大数がわかっているのであればcssのnth-child(あるいはnth-of-type)とtransition-delayでイケるようにも思います。

ただ制御がむずいです。気持ち良い表示になるように色々値をいじってみて下さい。

これらはスマホ時にどんなメニュータイプを選んでいるかで、それらにも適用されるかも知れません。

PCの時という定義は難しいですが、画面幅960pxで仮にメニューが表示されたとして、

@media (min-width: 960px) {
  //サンプルのcss
}

の様な感じで、最低画面幅を指定して「それ以上は今回のサンプルのようにする」というようにしておく必要があるかも知れません。

グローバルメニューはそれ単体でもそうですが、他に色々表示タイプがあるSimplicityの場合、かなり難度が高いカスタマイズになります。利用されている人のカスタマイズ環境にもよりけりなので、サンプルはそれらのヒントとして。

わいひらさん、Hidekichiさん、丁寧なご解説ありがとうございます。
無事思うようにすることができました。

そして仕組みを理解する事もできました。
ありがとうございました

よりそれらしくなるようにサンプルをアップデートしました。

グローバルメニューの下に「switch」とあるので、それをクリツクするとメニューのアニメーションが切り替わります。
メニューの背後に薄い青ラインが出たら今回アップデートした表示です。背後の青帯が無くなったらこれまでのサンプルです。

サンプル上ではjQueryにて#naviにクラスを付けたり外したりで実現していますが、違いは、前回のが高さの変化によるアニメーションだったのに対し、今回のはtransformで縦90度回転させてます。