第3回 TOPメニューの作成

今回はTOPメニューです。

TOPメニューには、各コンテンツへのリンクを貼ることにします。
コンテンツは
Diary
Monos
Links
の3つ。

まだ各コンテンツは無いので、飛んでもエラーになりますが・・・

今回からは最初に各ソースをここに書く方法じゃなく、落としてもらって見てもらう
様にしようかと思います。
さすがに４ファイルの内容をここに全部書くのはねぇ・・・無駄に長くなるし。

と言うわけで、まずそれぞれのファイルをダウンロードしてください。
XMLファイル
XSL
layout01.css
default01.css
前回と同様、右クリックのファイル保存で、落としてください。

では、XSLの説明から。
ここで今回追加したテンプレートは、topmenu,topmenu_item,topmenu_itemtitleです。
これら３つでTOPメニューを構成しています。

topmenuはTOPメニュー全体のDIVを設定しulを定義しています。つまり、TOPメニューは
ul,liタグを使ったリストで構成しています。(ul,liタグについてはHTMLなので
HTMLタグ辞典のサイトとか調べてください^^;)

次のtopmenu_itemでliタグの定義を行っています。ここで各項目名とそのリンクを設定
します。

最後に、topmenu_itemtitleですが、これはメニューのタイトルとなる部分の定義です。

そしてもう一つ、titleというテンプレートがあります。
ここは前回作ったタイトルの設定を行っているだけです。

以上がXSL。

次にスタイルシートその１(layout01側)。

ここに追加したのは、div.topmenuのみです。
ここで設定している中で重要なのは、「height」。
これを(大体でいいので)文字の高さに設定する必要があります。
そうしないと、メニューが横に並ばず、縦に並んじゃいます。

次はスタイルシートその２(default01側)。
ここにはul,li用のtopmenu_item,topmenu_itemtitleの設定を追加してます。
ulの設定では「list-style:none」を設定する・・・必要がある・・・はず。
もしかしたら無くてもいいかも。これ無しで試してみてもいいかも。
後のliの設定ですが、topmenu_itemtitleは、メニューのタイトル表示用の
設定なので、好きなように変えてください。
「a」の付いてるものは、liタグ内でaタグを使ってる場合に適応される設定に
なります。
「a:hover」の付いてるものは、liタグ内でaタグを使ってる状態で、aタグで
設定されているリンクの上にマウスカーソルが来たら、適応される設定です。
例えば、メニュー内のDiaryの上にマウスカーソルが来たら、そこの色を変えたい
場合なんかによく使います。ここもそうです。
それとこの「a」、「a:hover」付きの中で、「display:block」と言う設定が
ありますが、これは例えば、マウスカーソルが上に来た場合、文字だけでなく
周りの四角全体も含めて変更しますよ、という意味になります。

以上がスタイルシート。

最後はXML。
ここでは実際に表示される項目とそのリンク先の設定を行います。
なので通常メニューの追加したりする場合にいじるのは、ここだけです。

説明は以上です。
スタイルシートの設定で、説明してないのが色々ありますが・・・旧XMLの時と同様
各自で調べてください^^;

後は色々変えてみて、自分オリジナルのメニューを作ってみたりすると
色々理解できると思います。

出来上がりは・・・上のXMLファイルのリンクをクリックすると見れます。

今回から、ソースは落としてもらって見てもらうようにしましたが・・・
どうなんだろう、やっぱりこっちに書いたほうがいいのかなぁ。
とりあえず、このまま続けてみるかな・・・

次回は、What's Newの作成を説明ですね。

次はもうちょっと早めに書くようにしないとな・・・