本文へジャンプ

トップページ > サンプル紹介 > 法則82 カテゴリから企業のグローバルメニューを作成する

サンプル紹介

法則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ページを作成する法則の一覧

  1. 法則74 美しいタグクラウドを作成する
  2. 法則75 担当者が管理できるイベントカレンダーを作成する
  3. 法則76 高機能なフォトギャラリーを作る
  4. 法則77 ウェブページ機能で個別のページを作成する
  5. 法則78 プレゼンテーション用のスライドを作る
  6. 法則79 サムネイルのある実績紹介ページを作成する
  7. 法則80 PDFによるIR情報ページを作成する
  8. 法則81 沿革ページをMovable Typeで管理する
  9. 法則82 カテゴリから企業のグローバルメニューを作成する
  10. 法則83 日報管理をMovable Typeで行う
  11. 法則84 PayPalを利用してECサイトを作る
  12. 法則85 FAQページはJavaScriptを併用して作成する
  13. 法則86 顧客情報データベースを作る
取り扱いオンラインショップ