前回に続いてテーマのカスタマイズです。
default状態ではナビゲーションのメニュー表示がフラットの状態です。
私としては配下にコンテンツを持っている場合はメニューに階層表示されてほしいのでそのあたりを追加してみます。
※2017-08-28 追記
ページ編集の高度にある「フォルダーの数値プレフィックス」設定を有効にして並び順を決めてやればちゃんと階層表示されるようです。
ナビゲーションはtemplates\partials\navigation.html.twigに記述されているようなのでそちらを編集します。
<nav id="site-navigation" class="main-navigation">
<div class="menu-demo-menu-container">
<ul id="menu-demo-menu" class="nav-menu">
{% for page in pages.children %}
{% if page.visible %}
{% set current_page = (page.active or page.activeChild) ? 'current' : '' %}
<li class="{{ current_page }}">
<a href="{{ page.url }}">{{ page.menu }}</a>
<!--ここから下を追加↓-->
{% if page.children|length > 0 %}
<i class="fa fa-angle-double-down"></i>
<ul>
{% for cp in page.children %}
<li>
<a href="{{ cp.url }}">{{ cp.menu }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
<!--ここから下を追加↑-->
</li>
{% endif %}
{% endfor %}
{% for mitem in site.menu %}
<li>
<a href="{{ mitem.link }}">
{{ mitem.text }}
{% if mitem.description %}
<div class="menu-item-description">{{ mitem.description }}</div>
{% endif %}
</a>
</li>
{% endfor %}
</ul>
</div>
</nav>併せてcssにそれ用の記述を追加します。
.main-navigation ul ul
{
display: block;
height: 0;
overflow: hidden;
}
.main-navigation li
{
position: relative;
}
.main-navigation li>.fa
{
position: absolute;
right: 4px;
top: 0.8em;
}
.main-navigation li.current>.fa
{
display: none;
}
.main-navigation li.current>ul
{
height: 100%;
}できるならjQueryなどでclick時にアコーディオンさせたいところですが、いかんせんページ遷移がおきるのでイベントを維持できません。
なのでメニューがcurrent状態の場合に配下のメニューを開くことで対応させました。
少しづつ自分好みの仕様に変えていくのって楽しいですよね(｡･ω･)ﾉﾞ
Last edited: 2024-07-31 01:13