NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

簡単に作れる開閉式メニュー

bell賞味期限切れコンテンツ

この記事は公開または最終更新から1518日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

親メニューをクリックするとするするーっと子メニューが伸びてくるヤツ。
ネストしたリストを折り畳んでおいて,クリックすると伸びます。
一応孫リストまでは確認しました。多分何段でも行けるとは思いますが…あんま何層もネストしてたらナビゲーションとしては使いにくそうですね。。


表示の切り替えにはtoggleを使ってるのでクリックする度に開いてる場合は閉じ,閉じてる場合は開きます。
なので,

の行を消すと全部開いた状態でスタートします。
1個だけ開いてあとは閉じた状態ってのは流石にもう一工夫必要そうですが,カテゴリーリストとかなら全部開けっぱか全部閉じっぱでも問題ないと思うのでとりあえずは,OKかしらね?

逆にショッピングサイトとかでカテゴリーが沢山ある状態で親子構造を持たせてる場合は最初から一部だけ開けておきたいかも?現在居るカテ以外は閉じるとかそんな感じのが実現できれば面白いですね。

WPならタクソノミー拾ってきてリストごとにクラスを与えてやればいいのかな?
今度実験してみます。

TAGS
  • masahiko

    すみませんが、この記事で紹介されているものを自分のWordPressブログに実装するにはどうしたらいいのか、教えてもらえないでしょうか?
    CSSは子テーマのCSSファイルに記述する、HTMLは記事中で実際に書く時の書き方、と自分では理解しています。が、JavaScriptはどこに書けばいいのか分かりません。

    よろしくお願いいたします!

    • negi

      masahiko さん、コメントありがとうございます。
      返信が遅くなってしまい申し訳ありません。

      子テーマとしてテーマを作られている場合は、CSS同様子テーマ側のフォルダに設置してあげれば大丈夫です。

      また、スクリプトそのものは、php ファイルなどに直に書かずに、「myscripts.js」のような js ファイルとして子テーマフォルダ内などに保存した上でそれを読み込む方式のほうがあとでメンテナンスはしやすくなると思います。

      JavaScript を WordPress に読み込ませるには wp_enqueue_script という関数を使用します
      https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_script

      既に解決されていたとしたらすみません。

Pingback / Trackback