logo
 

Wayfinderスニペットで横並びメニューを作るには

このウェブサイトのメインメニューのような横一列メニューをWayfinderスニペットで作る方法について解説します。

Wayfinderスニペットは、<ul>タグと<li>タグを使ったリストを生成します。横一列メニューを作るには、

  1. 予めCSSで<ul>タグと<li>タグを横一列に並べるディビジョンを作っておき、
  2. MODxサイトの管理画面でテンプレートを開き、横一列メニューを配置したい箇所に、そのディビジョンを設定する

という流れになります。

1. CSSにメニュー用のディビジョンを作る

CSSにmainmenuという名前のディビジョンを作ります。このサイトのメニューを例示します。

#mainmenu {
background: url(images/index_menu.gif) no-repeat;
float:left;
height: 61px;
margin: 0px;
padding:0px;
width: 100%;
}
  • background:背景画像。【任意】
  • float:左寄せにする場合はleftに、右寄せにする場合はrightに。【必須】
  • height:メニューのエリアの高さ。設定しなければ、文字の高さ+内余白(padding)+外余白(margin)になります。【任意】
  • margin:ボックスの外側の余白。【任意】
  • padding:ボックスの内側の余白。【任意】
  • width:メニューのエリアの幅。設定しなければ、文字の高さ+余白(padding)+外余白(margin)になります。【任意】

次に、リスト表示(<ul>)に関する属性を設定します。

#mainmenu ul {
margin-left :51px;
}
  • margin-left :リスト表示するエリアの左マージン。このサイトのメインメニューは、左端から51px離れたところから表示したかったので指定。【任意】

次に、リスト項目(<li>)に関する属性を指定します。

#mainmenu ul li {
background: url(images/index_menu_over.gif) no-repeat;
display:inline;
float:left;
text-align:center;
}
  • background :リスト項目の境界線の画像。このサイトでは、境界線に 境界線 を表示したかったので指定。【任意】
  • display :表示方式を横一列にするにはinlineに設定。【必須】
  • float:左寄せにする場合はleftに、右寄せにする場合はrightに。【必須】
  • text-align:文字の表示位置。文字を左寄せにする場合はleftに、右寄せにする場合はrightに。【必須】

次に、リンク属性を指定します。

#mainmenu ul li a {
color: #545454;
display: block;
position: relative; /* for IE6 */
text-decoration: underline;
padding: 5px 15px;
*padding: 6px 15px; /* for IE */
}
  • color :リンクした文字列の色。【必須】
  • display : リスト項目の設定を文字列単位でなくボックス単位にするにはblockに設定。【必須】
  • position:ボックスの配置方法。relativeに。【必須】
  • text-decoration:文字の装飾。このサイトでは下線を表示する設定。【任意】
  • padding : ボックスの内側の余白。このサイトでは上下方向を5pxに、左右方向を15pxに設定。【任意】

最後に、マウスオーバー時のリンク属性を指定します。

#mainmenu ul li a:hover{
color: #0d56c9;
text-decoration: none;
}
  • color :リンクした文字列の色。【必須】
  • text-decoration:文字の装飾。このサイトでは何も装飾しない設定。【任意】

2. Wayfinderスニペットによる自動生成メニューを横一列で表示

テンプレートを開き、メニューを挿入する箇所に上記のディビジョンを指定し、Wayfinderスニペットによる自動生成メニューを挿入します。

<div id="mainmenu"> [[Wayfinder? &startId=`0` &level=`1` &sortBy=`id`]] </div>

上記は、第一階層のエレメントをID順にメニュー表示する設定です。

MODXとは

新着情報

 
RSS