SteamerLaneStudio
Steamer Lane Studio技術備忘録Movable Type

MovableType　3階層時のグローバルメニュー

movable-type MovableType　3階層時のグローバルメニュー
最終更新日: 2023年5月11日

MovableType3階層のグローバルメニュー、CSSのみ。
案件によっては使える、というかサイドバーを置かないサイトで2階層目の表示を判りやすく表示したいと考えた。
子カテゴリが有る際はクラスを付与して装飾等。

—html—

<mt:If name="main_index">
<ul id="global-nav">
<MTTopLevelCategories>
<mt:Unless tag="CategoryLabel" like="hoge">
<li>
<a href="<mt:CategoryArchiveLink>">
<mt:CategoryLabel>
</a>
</li>
</mt:Unless>
</MTTopLevelCategories>
</ul>

<mt:ElseIf name="archive_index">
<ul id="global-nav">
<MTTopLevelCategories>
<mt:Unless tag="CategoryLabel" like="hoge">
<li>
<a href="<mt:CategoryArchiveLink>">
<mt:CategoryLabel>
</a>
</li>
</mt:Unless>
</MTTopLevelCategories>
</ul>

<mt:ElseIf name="Custom_index">
<ul id="global-nav">
<MTTopLevelCategories>
<mt:Unless tag="CategoryLabel" like="hoge">
<li>
<a href="<mt:CategoryArchiveLink>">
<mt:CategoryLabel>
</a>
</li>
</mt:Unless>
</MTTopLevelCategories>
</ul>

<mt:ElseIf name="search_results">
<ul id="global-nav">
<MTTopLevelCategories>
<mt:Unless tag="CategoryLabel" like="hoge">
<li>
<a href="<mt:CategoryArchiveLink>">
<mt:CategoryLabel>
</a>
</li>
</mt:Unless>
</MTTopLevelCategories>
</ul>

<mt:ElseIf name="category_archive">
<ul id="global-nav">
<mt:SetVarBlock name="top_category"><mt:TopLevelParent><$MTCategoryLabel$></mt:TopLevelParent></mt:SetVarBlock>
<MTTopLevelCategories>
<mt:Unless tag="CategoryLabel" like="hoge">
<li <mt:SetVarBlock name="category_label"><mt:TopLevelParent><$MTCategoryLabel$></mt:TopLevelParent></mt:SetVarBlock><mt:If name="top_category" eq="$category_label"> class="active"<mt:Else></mt:If>>
<a href="<mt:CategoryArchiveLink>">
<mt:CategoryLabel>
</a>
<MTHasSubCategories>
<div class="sub-cat-list">
<ul>
<MTSubCategories>
<mt:SetVarBlock name="category_label"><mt:TopLevelParent><$MTCategoryLabel$></mt:TopLevelParent></mt:SetVarBlock>
<mt:If name="top_category" eq="$category_label">
<li>
<a<MTHasSubCategories> class="has-child"</MTHasSubCategories> href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$>
</a>
<MTHasSubCategories>
<div class="vertical-cat-list">
<ul>
<MTSubCategories>
<mt:SetVarBlock name="category_label"><mt:TopLevelParent><$MTCategoryLabel$></mt:TopLevelParent></mt:SetVarBlock>
<mt:If name="top_category" eq="$category_label">
<li>
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$>
</a>
</li>
<mt:Else>
</mt:If>
</MTSubCategories>
</ul>
</div>
</MTHasSubCategories>
</li>
<mt:Else>
</mt:If>
</MTSubCategories>
</ul>
</div>
</MTHasSubCategories>
</li>
</mt:Unless>
</MTTopLevelCategories>
</ul>

<mt:ElseIf name="entry_template">
<ul id="global-nav">
<mt:SetVarBlock name="top_category"><mt:TopLevelParent><$MTCategoryLabel$></mt:TopLevelParent></mt:SetVarBlock>
<MTTopLevelCategories>
<mt:Unless tag="CategoryLabel" like="hoge">
<li <mt:SetVarBlock name="category_label"><mt:TopLevelParent><$MTCategoryLabel$></mt:TopLevelParent></mt:SetVarBlock><mt:If name="top_category" eq="$category_label"> class="active"<mt:Else></mt:If>>
<a href="<mt:CategoryArchiveLink>">
<mt:CategoryLabel>
</a>
<MTHasSubCategories>
<div class="sub-cat-list">
<ul>
<MTSubCategories>
<mt:SetVarBlock name="category_label"><mt:TopLevelParent><$MTCategoryLabel$></mt:TopLevelParent></mt:SetVarBlock>
<mt:If name="top_category" eq="$category_label">
<li>
<a<MTHasSubCategories> class="has-child"</MTHasSubCategories> href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$>
</a>
<MTHasSubCategories>
<div class="vertical-cat-list">
<ul>
<MTSubCategories>
<mt:SetVarBlock name="category_label"><mt:TopLevelParent><$MTCategoryLabel$></mt:TopLevelParent></mt:SetVarBlock>
<mt:If name="top_category" eq="$category_label">
<li>
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$>
</a>
</li>
<mt:Else>
</mt:If>
</MTSubCategories>
</ul>
</div>
</MTHasSubCategories>
</li>
<mt:Else>
</mt:If>
</MTSubCategories>
</ul>
</div>
</MTHasSubCategories>
</li>
</mt:Unless>
</MTTopLevelCategories>
</ul>
</mt:If>

—CSS—

/* Sub-menu */
#global-nav li .sub-cat-list {
display:inline-block;
width:100%;
position: absolute;
top: 89px;
left:0;
z-index: 4;
padding:6px 0 0 0;
background-color:#fff;
}

ul#global-nav li.active .sub-cat-list {
border-bottom:1px solid #f0f0f0;
}

#global-nav li .sub-cat-list ul {
display:inline-block;
position: static;
width:980px;
margin: 0 auto;
padding: 0;
background-color: #fff;
text-align:center;
}

#global-nav .sub-cat-list ul li {
display: inline-block;
width:auto;
float:none;
height:auto;
margin: 0;
padding: 0;
}

#global-nav .sub-cat-list ul li:hover {
display:inline-block;
}

#global-nav .sub-cat-list ul li a {
display:table-cell;
width:auto;
padding:0 25px;
border:none;
}

#global-nav .sub-cat-list ul li div.vertical-cat-list {
display:none;
}

#global-nav .sub-cat-list ul li:hover > div.vertical-cat-list {/*
position:absolute;
top:20px;
left:auto;*/
display: inline-block;
float:left;
width:auto;
padding:0;
}

#global-nav .sub-cat-list ul li:hover > div.vertical-cat-list ul {
position:absolute;
top:36px;
width:auto;
padding:0!important;
margin:0;
background-color: #fff;
border-right:1px solid #f0f0f0;
border-left:1px solid #f0f0f0;
}

#global-nav .sub-cat-list ul li:hover > div.vertical-cat-list ul li {
display:block;
margin:0;
}

#global-nav .sub-cat-list ul li div.vertical-cat-list ul {
width:100%;
display:inline-block;
margin:0;
padding:23px 0 0 0;
}

#global-nav .sub-cat-list ul li div.vertical-cat-list ul li{
display:inline-block;
width:100%;
padding-top:10px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
border-bottom:1px dotted #f0f0f0;
}

#global-nav .sub-cat-list ul li div.vertical-cat-list ul li:last-child {
border-bottom:1px solid #f0f0f0;
}

#global-nav .sub-cat-list ul li div.vertical-cat-list ul li a{
width:100%;
display:block;
text-align:left;
}

header.fixed-header div.header-inner nav ul#global-nav {
height:21px;
}

header.fixed-header div.header-inner nav ul#global-nav li {
height:21px;
}

header.fixed-header div.header-inner nav ul#global-nav li a {
height:21px;
font-size:12px;
font-size:0.75rem;
}

header.fixed-header div.header-inner nav ul#global-nav li .sub-cat-list {
top:80px;
}

header.fixed-header div.header-inner nav #global-nav .sub-cat-list ul li:hover > div.vertical-cat-listt {
padding:20px 0 0 0;
}

header.fixed-header div.header-inner nav #global-nav .sub-cat-list ul li:hover > div.vertical-cat-list ul {
top:27px;
width:auto;
padding: 0;
margin:0;
}

header.fixed-header div.header-inner nav ul#global-nav .sub-cat-list ul li div.vertical-cat-list ul li {
display:block;
width:100%;
height:30px;
}

header.fixed-header div.header-inner nav ul#global-nav .sub-cat-list ul li div.vertical-cat-list ul li a {
display:block;
height:30px;
line-height:1;
}

a.has-child {
}

a.has-child:after {
content:">";
position:static;
top:0;
left:0;
font-family:'Poiret One';
font-weight:bold;
display: inline-block;
margin:0 0 0 10px;
}

/* Clear floated elements */
#global-nav:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}