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

元のメニューは、よく見慣れた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!に適用できるのではないでしょうか。