前の記事：
標準によるJoomlaテンプレートの作成-パート1
標準でJoomlaテンプレートを作成します-パート1（続き）
Joomla 1.5用のクリーンなCSSテンプレートの作成-パート2.1
Joomla 1.5用のクリーンなCSSテンプレートの作成-パート2.2
テンプレートのメニュー
メニューの表示方法を決定する多くのオプションがあることを知っています。
繰り返しますが、テーブルの代わりにCSSリストを使用すると、コードが少なくなり、マークアップが簡単になります。 リスト形式ですべてのメニューの表示を構成した後、残りのテーブルは12個だけになります（バージョン1.5の新しい出力オーバーライド機能を使用して残りを削除する方法を確認します）。 「リスト」オプションは新しいバージョン1.5でのみ使用可能であり、「フラットリスト」（フラットリスト）はバージョン1.0からのものであり、その使用は推奨されません。
リストは表よりも優れています。テキストブラウザ、スクリーンリーダー、CSSをサポートしないブラウザ、CSSが無効になっているブラウザ、および検索ボットがコンテンツにアクセスしやすくなるためです。
メニューにCSSを使用するもう1つの利点は、CSS開発者サイトに多くの例があることです。 それらのいずれかを見て、それを使用する方法を見つけてください。
maxdesign.comのWebページ[翻訳者注：このサイトには既に何か他のものがあるようです]は、30を超えるメニューの選択肢を提供し、それらはすべて同じコードを使用しています。 これは、Listamaticと呼ばれます。 これらのメニューをJoomlaに適合させるには、コードを少し変更する必要があります。
最初に、次のコードが使用されます。
<div id = "navcontainer"> <ul id = "navlist"> <li id = "active"> <a href="/ #" id="current">アイテム</a> </ li> <li> <a href="#">アイテム2 </a> </ li> <li> <a xhref="#">項目3 </a> </ li> <li> <a href="#">アイテム4 </a> </ li> <li> <a href="#">アイテム5 </a> </ li> </ ul> </ div>
これは、「navcontainer」と呼ばれる外部<div>があり、<ul>にid = "navlist"が設定されていることを意味します。 Joomlaでこの効果を繰り返すには、さらに外部の<div>が必要です。
モジュールのサフィックスを使用してこれを行うことができます。 思い出すと、XHTMLスタイルのモジュールの出力は次のとおりです。
<div class = "moduletable"> <h3> modChrome_xhtml </ h3> modChrome_xhtml </ div>
モジュールの接尾辞を指定すると、次のようなmoduletableクラスに追加されます。
<div class = "moduletablesuffix"> <h3> modChrome_xhtml </ h3> modChrome_xhtml </ div>
そのため、Listamaticのメニューを使用して、CSSの「navcontainer」クラスのスタイルを「moduletablesuffix」に置き換える必要があります。
ご注意
モジュールのサフィックスにより、Webサイトの設計と管理の境界がある程度曖昧になります。 Joomlaコアのさらなる開発のタスクの1つは、これらの役割を明確に区別することです。 これは、1.5に続くバージョンからモジュールサフィックスの機能を削除できるという意味で懸念されます。
モジュールクラスサフィックスを使用すると便利です。 モジュールクラスサフィックスのみを変更して、さまざまなカラーブロックを作成できます。
知っておくべきこと
常に箇条書きまたはフラットリストを使用してメニューを表示することをお勧めします。 その後、Webで利用可能な無料のCSSデザインソースの多くを使用できます。
このサイトでは、Mark Newhouseリストを使用します。 CSSは次のようになります。
.moduletablemenu {
色：＃333;
マージン底：1em;
パディング：0;
}
.moduletablemenu h3 {
背景：＃666;
色：#fff;
text-align：center;
フォントサイズ：1.1em;
border-bottom：1px solid #fff;
マージン：0;
パディング：0.25em 0;
}
.moduletablemenu ul {
リストスタイル：なし;
マージン：0;
パディング：0;
}
.moduletablemenu li {
border-bottom：1px solid #ccc;
マージン：0;
}
.moduletablemenu li a {
ディスプレイ：ブロック;
ボーダー左：10pxソリッド＃333;
ボーダー右：10pxソリッド＃9D9D9D;
背景色：＃666;
色：#fff;
テキスト装飾：なし;
パディング：3px 5px 3px 0.5em;
}
html> body .moduletablemenu li a {
幅：自動;
}
.moduletablemenu li a：ホバー、＃active_menu：リンク、＃active_menu：訪問済み{
border-left：10px solid＃1c64d1;
ボーダー右：10pxソリッド＃5ba3e0;
背景色：＃2586d7;
色：#fff;
}
その後、これらのスタイルを適用するすべてのメニューモジュールに「メニュー」モジュールのサフィックス（この場合はアンダースコアなし）を追加する必要があります。 結果は、図に示すようなメニューになります。メニューのスタイルが事前設定された基本テンプレート
ヒント：
メニューを機能させる場合は、次の便利なヒントを使用してください。空のJoomlaインストールを作成し、メインメニューを形成するコードを確認します。 このコードをHTMLエディター（Dreamweaverなど）にコピーします。 すべてのリンクを「＃」に置き換えます。その後、目的の効果が得られるまでCSSルールを適用できます。 メニューを作成するためのコードは次のとおりです。
<！DOCTYPE html PUBLIC "-// W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "Content-Type" content = "text / html; charset = iso-8859-1" />
<title>無題ドキュメント</ title>
<style type = "text / css">
<！-.astyle {}->
</ style>
</ head>
<本体>
<div class = "moduletable">
<h3>メインメニュー</ h3>
<ul class = "mainmenu">
<li id = "current" class = "item1 active"> <a href="#">ホーム</a> </ li>
<li class = "item2"> <a href="#"> Joomla！ 概要</a> </ li>
<li class = "item3"> <a href="#"> 1.5の新機能</a> </ li>
<li class = "item4"> <a href="#"> Joomla！ ライセンス</a> </ li>
<li class = "item5"> <a href="#"> Joomla！の詳細</a> </ li>
<li class = "item6"> <a href="#"> FAQ </a> </ li>
<li class = "item7"> <a href="#">ニュース</a> </ li>
<li class = "item8"> <a href="#"> Webリンク</a> </ li>
<li class = "item9"> <a href="#">ニュースフィード</a> </ li>
</ ul>
</ div>
</ body>
</ html>
CSSは、編集を容易にするためにHTMLコードに直接挿入されます。
ここに続く