今回は、メニューを作成してみましょう。

元のメニューは、よく見慣れたJoomla!をインストールするとデフォルトで選択されているテンプレートのメニュー（右側の画像）です。それを下のような横型のメニューに変えてみましょう。

手順は、オンラインでメニューを作成してくれるサイト
「CSS MENU MAKER」
で作成したイメージとCSS Codeを利用してそれをJoomla!のテンプレートに適用します。

まず、下記サイトへ行ってください。

CSS MENU MAKER

今回は、横型なので右側のHorizontalの中から気に入ったメニュー左の「Customize」をクリック。出てきた画面の１番にメニューの数を入力します。面倒なので１でOKです。それから「Update your Menu」ボタンをクリック。２番の「Button Label」と「Link」は、いらないので「Generate Menu Code」をクリック。

上のような画面が出てくるので「Click here to download image files」をクリックしてイメージをダウンロード。そして下の「CSS Code」欄の内容をコピーします。サイトテンプレートのCSSを開き、一番下部にでもペーストし、以下のように変更します。

を

のように変更し、ダウンロードしたイメージをサイトテンプレートのimagesフォルダに入れます。そして管理画面から、モジュール一覧を開き、変更したいメニューモジュールの設定画面を開きます。（今回はメインメニュー）設定項目の「メニュースタイル」でフラットを選択し、保存。

以上で横型メニューができあがりました。

まだ、試していませんが、サブメニューのあるソースもダウンロードできますのでSublevelのメニューが欲しい方も工夫すればJoomla!に適用できるのではないでしょうか。

Joomla!のテンプレート作成時に便利なツールです。

XMLファイル作成時によくあるのが

などよくありますよね。このツールを使えばテンプレートフォルダを指定するだけで
良いので忘れることはありません。

http://www.mediensozialismus.de/home.html←こちらのサイトで配布されています。

ただ・・・どうもcssフォルダとimagesフォルダのみを読み取るらしく他のフォルダ名を追加した場合は読み取ってくれません。その場合は手作業なのですが、どちらにしろ作業を軽減してくれるので大変便利です。
注意しないといけないのはiso-8859-1で出力されますから、日本語をXMLファイルに書き入れる場合は忘れずにUTF-8に変更しましょう。