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

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など グローバルメニューのアニメーション表示について

  • このトピックには6件の返信、2人の参加者があり、最後にHidekichiにより3年、 3ヶ月前に更新されました。
6件の返信スレッドを表示中
  • 投稿者
    投稿
    • #51544 返信
      まお
      ゲスト

      こんにちわ、お世話になります。
      現在simplicityの5.0を使っているのですが、
      グローバルメニュー(PC)をマウスホバーした時に、下の階層のメニューをトグルのようにアニメーションで表示させたいのですが、できなくて悩んでおります。

      ブログは初期のままで何もカスタムしてないのですが、どういうようにすればいいのでしょうか?
      お忙しい所すみませんが、よろしくお願いします。

    • #51548 返信
      Hidekichi
      ゲスト

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

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

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

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

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

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

    • #51553 返信
      まお
      ゲスト

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

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

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

    • #51570 返信
      わいひらわいひら
      キーマスター

      全く同じではないかもしれませんがこんな感じでしょうか。

      #navi ul.menu > li > ul{
        display: block;
        visibility: hidden;
      }
      #navi ul.menu > li:hover > ul{
        visibility: visible;
      }
      #navi ul.menu > li > ul > li {
        height: 0;
        transition: .2s;
        visibility: hidden;
      }
      #navi ul.menu > li:hover > ul > li{
        height: 31px;
        visibility: visible;
      }

      簡単なもので良いのであれば、こんなとか。

      #navi ul.menu > li > ul{
        display: block;
        opacity: 0;
        top: 50%;
        visibility: hidden;
        transition: .5s;
      }
      #navi ul.menu > li:hover > ul{
        top: 100%;
        visibility: visible;
        opacity: 1;
      }

      設定するCSSセレクタは上記でわかると思うので、詳しい動きは自前で調整していただければと思います。

    • #51578 返信
      Hidekichi
      ゲスト

      サンプル: それらしいドロップダウン | 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の場合、かなり難度が高いカスタマイズになります。利用されている人のカスタマイズ環境にもよりけりなので、サンプルはそれらのヒントとして。

    • #51587 返信
      まお
      ゲスト

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

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

    • #51589 返信
      Hidekichi
      ゲスト

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

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

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

6件の返信スレッドを表示中
返信先: グローバルメニューのアニメーション表示について
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)