法則82 カテゴリから企業のグローバルメニューを作成する

レベルを区別してカテゴリを並べるテンプレートソース

<MTIfArchiveTypeEnabled archive_type="Category">
<MTTopLevelCategories>
<MTSubCatIsFirst>
<ul<MTHasNoParentCategory> class="mainMenu"</MTHasNoParentCategory>>
</MTSubCatIsFirst>
<MTIfNonZero tag="CategoryCount">
<li><a href="<$MTCategoryArchiveLink$>"<MTIfNonEmpty tag="MTCategoryDescription"> title="<$MTCategoryDescription$>"</MTIfNonEmpty>><$MTCategoryLabel$></a>
<MTElse>
<li><span><$MTCategoryLabel$></span>
</MTIfNonZero>
<$MTSubCatsRecurse max_depth="1"$>
</li>
<MTSubCatIsLast>
</ul>
</MTSubCatIsLast>
</MTTopLevelCategories>
</MTIfArchiveTypeEnabled>

出力される（X）HTMLソース

<ul class="mainMenu">
<li><a href="http://example.com/cat-a/">Category A</a>
<ul>
<li><a href="http://example.com/cat-a/cat-a2/">Category A-2</a></li>
<li><a href="http://example.com/cat-a/cat-a3/">Category A-3</a></li>
<li><a href="http://example.com/cat-a/cat-a4/">Category A-4</a></li>
</ul>
</li>
<li><a href="http://example.com/cat-b/">Category B</a>
<ul>
<li><a href="http://example.com/cat-a/cat-b2/">Category B-2</a></li>
<li><a href="http://example.com/cat-a/cat-b3/">Category B-3</a></li>
<li><a href="http://example.com/cat-a/cat-b4/">Category B-4</a></li>
</ul>
</li>
... 略...
</ul>

グローバルメニューを作成するCSSソース

ul.mainMenu {
    margin: 0;
    padding: 0;
    width: 100%;
}
ul.mainMenu a:link,
ul.mainMenu a:visited {
    color: #000;
    text-decoration: none;
}
ul.mainMenu a:hover,
ul.mainMenu a:active {
    color: #fff;
    background: #000;
}
ul.mainMenu li {
    margin: 0 1px 0 0;
    padding: 0;
    line-height: 2;
    list-style: none;
    width: 10em;
    height: 2em;
    float: left;
    position: relative;
    background: #ccc;
}
ul.mainMenu li a,
ul.mainMenu li span {
    display: block;
    margin: 0;
    padding: 0;
    width: 10em;
    height: 2em;
    text-align: center;
}
ul.mainMenu li ul {
    display: none;
}
ul.mainMenu li:hover {
    background: #666;
}
ul.mainMenu li:hover ul {
    display: block;
    position: absolute;
    z-index: 100;
    margin: 0;
    padding: 0;
    background: #666;
}
ul.mainMenu li ul li {
    float: none;
    margin: 0;
    background: #666;
}

レベルごとにclass名を指定するテンプレートソース

... 略...
<MTIfNonZero tag="MTCategoryCount">
<li<MTHasNoParentCategory> class="main"</MTHasNoParentCategory><MTHasParentCategory> class="sub"</MTHasParentCategory>>
<a href="<$MTCategoryArchiveLink$>"<MTIfNonEmpty tag="MTCategoryDescription"> title="<$MTCategoryDescription$>"</MTIfNonEmpty>><$MTCategoryLabel$></a>
<MTElse>
<li<MTHasNoParentCategory> class="main"</MTHasNoParentCategory><MTHasParentCategory> class="sub"</MTHasParentCategory>>
<span><$MTCategoryLabel$></span>
</MTIfNonZero>
<$MTSubCatsRecurse max_depth="1"$>
</li>
... 略...

csshover.htcを読み込むCSSソース

ul.mainMenu {
    behavior: url("/css/csshover.htc");
}

ダウンロード

csshover.htc ： PETERNED

• 第5章 多彩なWebページを作成する法則