[ 解決済 ] Katawara グローバルナビメニューの開閉保持

[koitabasi]

■ 利用テーマとバージョン :Katawara バージョン1.7.3

■ 質問内容：
グローバルナビに、添付画像のような複数の階層があるメニューを作成しています。
画像はそれらを全て展開状態です。

現状では、メニューの階層を開いた状態でページを移動すると全て閉じられた状態に戻ってしまうのですが、開閉状態を維持しつつ、さらに、移動したページの該当メニューに印（色など）をつける設定はありますでしょうか。

メニュー項目が多くなる想定で、どのメニューを選んで移動してきたかが分かり易い作りにしたいと考えております。

言葉足らずな表現がありましたら申し訳ございません。

どうぞよろしくお願いいたします。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

CSS に以下の行を追加すると、PC で表示したときのサイドメニューの階層構造における子ページが表示されているときに、子ページが含まれるサブメニューを開いたままにすることができます。

@media (min-width:1200px) {
/* サブメニューを開く */
.vk-menu-acc .current_page_ancestor ul.acc-child-close {
    max-height: 1000px;
    opacity: 1;
}
/* × ボタンを非表示に */
.vk-menu-acc .current_page_ancestor .acc-btn {
    background: none;
}
}

この場合、開いているサブメニューを閉じる必要はないでしょうから、× ボタンを非表示にして手抜きをしています。

この CSS は 親→子 の階層構造しか考えていません。

親→子→孫 の階層構造の場合、やりたいことによってはもっと複雑な処理が必要かもしれませんので、この CSS をベースに考えてみてください。(そうなったら大変そう…)

参考ページ ↓

できる！WordPressカスタマイズ #01 簡単なデザイン（CSS）カスタマイズ方法徹底解説

[対馬 俊彦]

どのメニューを選んで移動してきたかが分かり易い作りにしたいと考えております。

以下のような CSS でパンくずリストを目立つように設定する方法も検討されるとよいかもしれません。

.p-breadcrumbs li {
  margin-right: 1.2em;
}
.p-breadcrumbs li {
  padding: 0 0 0 7px;
  margin-top: 5px;
  height: 30px;
  line-height: 30px;
  background: #dd9933; /* 背景色 */
  font-size: 1.2em;
}
.p-breadcrumbs li+li:before {
  display: none;
}
.p-breadcrumbs li:after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  border-style: solid;
  border-color: transparent;
  border-left-color: #dd9933; /* 背景色 */
  border-width: 15px 12px;
  width: 0;
  height: 0;
}
.p-breadcrumbs li>a, .p-breadcrumbs li>span {
  color: #fff; /* 文字色 */
}

添付画像のような見た目になります。

サイドメニューをいじるとパソコンで見たときの使い勝手を改善できますが、パンくずリストはモバイル端末にも効果があります。

この CSS を設定したページです ↓

サービス案内

Attachments:

You must be logged in to view attached files.

[koitabasi]

ご返信ありがとうございます。

孫階層も考えていたのですが、コードの改変は難しそうなので、このまま使用させていたきます。
ありがとうございました

[koitabasi]

ご回答ありがとうございます。

パンくずリストに手を加えることは考えていなかったので、参考にさせていただきます。
ありがとうございました。

[投稿者]

投稿