マニュアルサイトのサイドバーメニュー

小山智久さん、こんにちは。

サイドバーの実装方法をいつくか考えています。

とのことですが、最終的にどのようなサイドバーが表示されるのが理想なのでしょうか？
カスタムメニューで管理できて、かつサイドバーにも表示させるなら、使い勝手のよいHTMLになるようにカスタムメニューをショートコード化できるようにして、ウィジェットに貼り付け、CSSで調整するのがよい気がします。

♥ 1

いいねをした人:

インデントだけでもとCSSを見ましたが、複雑すぎてわからなかったです。
子階層が最初かくれてるのはJavaScript実装なのかCSSのみで実装か知りたいです

デベロッパーツールを開いて、開閉ボタンにフォーカスし、開閉ボタンをクリックしてみてください。すると data-is-expanded や data-is-hidden が書き換わっているのがわかると思います。このような HTML の書き換えは CSS では実現できません。つまり JavaScript で書き換えています。ただ、HTML を書き換えるのは JavaScript ですが、それに応じて見た目を変化させるのは CSS になります。

・子階層が最初は隠れている

JavaScript で値が書き換わっても書き換わらなくても CSS の詳細度を強くして必ず表示されるようにするのが簡単です。

・子階層がインデントされてない

簡単なのは .sub-menu をずらすことでしょうか。

widget_nav_menu .sub-menu {
    margin-left: 1rem;
}

みたいな。

インデントだけでもとCSSを見ましたが、複雑すぎてわからなかったです。

サブメニュー部分で CSS が当たっているセレクタは

– .widget_nav_menu .sub-menu[data-is-hidden=false]
– .widget_nav_menu .sub-menu
– .widget_nav_menu ul
– ul

の4つなので、個人的にはそれほど複雑ではない箇所に思えますが、具体的にどの部分を見られて複雑だと感じたのは、具体的にどのような CSS を書いたけど効かなかったかを書いてもらったほうがなぜそれが効かなかったのかをアドバイスできるので、できるだけ詳しく書いてみてください。

CSSを開く状態に上書きすれば、最初から開くことができるのですね（具体的にどうすれば開いたままにできるのか少し悩んでみます

.sub-menu にフォーカスした状態でデベロッパーツールを開き、開閉ボタンをクリックすると .sub-menu の display が切り替わっているのがわかると思います。なので開いていようが閉じていようが絶対に display: block にすることで開きっぱなしになります。

.widget_nav_menu .sub-menu {
    display: block !important;
}

最初ひらいたとき、やたらカンマ区切りでクラスが並列になってると事が開き、どれに上書きすればいいのかがわからなかったのです。

全部 WordPress がデフォルトで吐き出す class なので、クラス名から判断したり（menu-item-has-children だったら子がいるからついてるんだなとか）、他のメニュー項目と比較して判断する感じかなと思います。僕も全て把握しているわけではないのでソースコードを読んで調べることもあります。

ただ開発ツールにある

blockquote, body, dd, dl, dt, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, html, iframe, legend, li, ol, p, pre, table, ul {
  margin: 0;
  padding: 0;
}

も書き換えないとなのかなとか考えてました

それは書き換えてはダメです。すべての要素の margin と padding をリセットするためにあるので。この辺は Snow Monkey というより CSS の基礎的な話になってくるので、リセット CSS とか、セレクタとか、そういう単語をググって CSS の基礎を頭に入れておくと良いかもしれませんね。

GONSY さんが書かれているようにカスタムメニューを使ったほうが、ウィジェットを直接使うよりは既存の CSS に惑わされることがないと思うので、それも一度試してみると良いかと思います。

リセットすることでデフォルトマージンが消えてしまい残念な感じになるのが嫌い
だったのです　対象部位だけ例外扱い出来ないかなって思った次第です。

ここだけ補足すると、基本的に CSS は「追加/上書き」しかできません。すでに当たっているスタイルを一部対象外にするというようなことはできないんです。CSS ファイルの読み込み自体をなくして全部自分でゼロから書けば別ですが…（ちなみに bbPress Support は bbPress の CSS を全部はずして自分でゼロから書いています）。

そして「デフォルトマージンが消えてしまい残念な感じに」にならないように、一旦全部リセットしたあとで ul と ol、li は margin と padding を再設定しています。CSS はそういうふうに構造化して「上書き」をしていくことでデザインを調整していくものなので、デベロッパーツールでどのセレクタにどのような CSS が当たっている（一番優先されている）かを確認して、同じセレクタで上書きしてみるのがまずはベターだなと思います。