Joomler!.net - Decided on Joomla!

Wiki or Wordpress? No it is JContentPlus.

 

Archives

Blog

Demo

Home » Blog » このままいくとWEB上ですべて・・・?#02
Nov
24
2007

このままいくとWEB上ですべて・・・?#02

EMailPrintPDF
1 votes
Written by:Joomler! 8412 hits
content_view_38_40.jpg

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

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

 

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

content_view_5_6.png

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

CSS MENU MAKER

cssmenumaker_com.jpg

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

cssmenumaker_com_process_step3_php.jpg 

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

css_before.jpg

css_after.jpg

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

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

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

 

ADD A COMMENT

Subject*
:
Color Swatch




Email Link Page Code Text Align Center Text Align Justify Text Align Left Text Align Right Text Bold Text Quote Text Italic Text List Bullets Text List Numbers Text Strikethrough Text Underline World Link
Sun Unhappy Smile Evilgrin Wink Tongue Lightning Surprised Grin Rain Clouds Cloudy Snow Waii
Name*
:
EMail*
:
Please answer....
Submit Preview

JContentPlus for Joomla!1.5 powered by Joomler!.net

デル株式会社

Related Items

joomler.net is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla!(R) name is used under a limited license from Open Source Matters in the United States and other countries.
joomler.net is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.