mtde.info

TOPページ > ナビゲーション関連サンプル > ウェブページを用いたナビゲーションバーを作る

コード

以下コードは、globalnaviという名前のid要素を定義して、グローバルナビゲーション用コードを書いています。「globalnavi」という名前のフォルダを生成し、そこへウェブページを保存するだけで、ナビゲーションリストへ追加されるという仕組みです。決め打ちではない、後々のウェブページの追加にも対処ができているナビゲーションコードです。

<div id="globalnavi">
<MTPages folder="globalnavi">
   <MTPagesHeader>
   <ul>
   </MTPagesHeader>
      <li><a href="<MTPagePermalink>" title="<MTPageTitle>"><MTPageTitle></a></li>
   <MTPagesFooter>
   </ul>
   </MTPagesFooter>
</MTPages>
</div>

以下コードは、上のコードと同じなのですが、トップページへのリンクとアーカイブページへのリンクをはじめから追加した状態としています。ということは項目が2つは最初からありますので、ulタグを付加するためのMTPagesHeader、MTPagesFooterテンプレートタグが必要なく、よりシンプルなコードとなります。

<div id="globalnavi">
   <ul>
      <li><a href="<MTBlogURL>" title="Top">Top</a></li>
       <MTPages folder="globalnavi">
           <li><a href="<MTPagePermalink>" title="<MTPageTitle>"><MTPageTitle></a></li>
       </MTPages>
      <li><a href="<MTBlogURL>archives.html" title="Archives">Archives</a></li>
   </ul>
</div>

CSS

このようなコードでいいと思います。

#globalnavi {
width:90%;
background-color:#000000;
color:#ffffff;
font-size:90%;
margin:0 auto 0 auto;
text-align:center;
clear:both;
}

#globalnavi ul {
margin:0;
padding:3px;
list-style:none;
letter-spacing: 0.07em;
}

#globalnavi ul li {
display:inline;
margin:0;
}

#globalnavi ul li a {
padding-left:10px;
padding-right:10px;
float:left;
}

実装について

独立したひとつのモジュールとし、インクルードするのが最良です。ヘッダーのコンテナ内へ設置すればヘッダーナビゲーション、フッターのコンテナ内へ設置すればフッターナビゲーションとして機能すると思います。ウェブページを保存するフォルダを「headernavi」「footernavi」などと変えて別々のウェブページを用いてもいいですし、同じナビゲーションをヘッダーとフッターからインクルードさせてもいいと思います。

実装の手順は以下のようになります。

1.管理画面「テンプレートモジュール」より、モジュールテンプレートの作成をクリック。

2.名前を「mdlGlobalNavi」（名前は任意で）、コードは上記サンプルのものをコピーペーストする。

3.mdlGlobalNaviモジュールを、埋め込みたい箇所からインクルードする。

4.「プロフィール」ページなどをウェブページで投稿する。フォルダはナビゲーション用のものを使用する。

5.CSSを調整する。

サンプル

このサイトのナビゲーションバーはこのような手法で生成されています。