SmartyとCSSをつかって、Xoopsでも、現在ページがハイライトするメニューの作り方。ロールオーバー付き。 #xoops
2010/04/10

Xoopsの場合、theme.htmlがひとつしかないので、
現在ページをハイライトさせるには、すこし工夫がいります。
自分用にメモしておきます。

結論から言ってしまうと、
Smartyをつかって、特定のURLの時にだけ、
メニューコードのclass属性を変化させます。

まず完成品から。

http://www.kartepost.com

このサイトでは、d3forumのforumを上メニューに置いて、
Smartyでforum_idを指定しています。

上メニューのページへ移動したとき、
現在ページがハイライトしているのが確認できると思います。

用意する画像

メニューにつかう背景画像です。

ロールオーバー時の画像と合わせて一枚にしているので、
background-positionを足し算引き算しながら、つかいます。

サンプルhtmlコード

モジュールのURLを表示している時だけ、
class属性にnowをくわえています。

<div id="main-menu">
<ul>
	<{if $xoops_requesturi == '/'}>
		<li id="top-now"><a href="<{$xoops_url}>">トップページ</a></li>
		<{else}>
		<li id="top"><a href="<{$xoops_url}>">トップページ</a></li>
	<{/if}>

	<{if $xoops_requesturi == '/modules/d3forum/'}>
		<li id="d3forum-now"><a href="<{$xoops_url}>/modules/d3forum/">掲示板</a></li>
		<{else}>
		<li id="d3forum"><a href="<{$xoops_url}>/modules/d3forum/">掲示板</a></li>
	<{/if}>

	<{if $xoops_requesturi == '/modules/d3blog/'}>
		<li id="d3blog-now"><a href="<{$xoops_url}>/modules/d3blog/">ブログ</a></li>
		<{else}>
		<li id="d3blog"><a href="<{$xoops_url}>/modules/d3blog/">ブログ</a></li>
	<{/if}>

	<{if $xoops_requesturi == '/modules/pico/'}>
		<li id="pico-now"><a href="<{$xoops_url}>/modules/pico/">ページ</a></li>
		<{else}>
		<li id="pico"><a href="<{$xoops_url}>/modules/pico/">ページ</a></li>
	<{/if}>
</ul>
</div>

サンプルCSSコード

CSSは特に変わったことはありません。
一般的なロールオーバーの作り方どおりです。

/* ヘッダーメニュー
--------------------------------------------------*/
div#main-menu{
	width: 800px;
	height: 40px;
	margin: 0;
	padding: 0;
}
div#main-menu img{
	margin: 0;
	padding: 0;
	display: block;
}
div#main-menu ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
div#main-menu li{
	display: block;
	float: left;
	height: 40px;
	text-indent: -9999px;
	margin:0;
	padding: 10px 0 10px 0;
}
div#main-menu a{
	background: url(../../images/main-menu.gif);
	background-repeat: no-repeat;
	display: block;
	text-decoration: none;
	/* ¥*/ overflow: hidden; /* */
}
/*トップページ
------------------------*/
div#main-menu li#top a{
	background-position: 0px 0px;
	width:80px;
	height:40px;
}
div#main-menu li#top a:hover{
	background-position: 0px -40px;
	width:80px;
	height:40px;
}
div#main-menu li#top a:active{
	background-position: 0px -40px;
	width:80px;
	height:40px;
}
div#main-menu li#top-now a{
	background-position: 0px -40px;
	width:80px;
	height:40px;
}
/*掲示板
------------------------*/
div#main-menu li#d3forum a{
	background-position: -80px 0px;
	width:120px;
	height:40px;
}
div#main-menu li#d3forum a:hover{
	background-position: -80px -40px;
	width:120px;
	height:40px;
}
div#main-menu li#d3forum a:active{
	background-position: -80px -40px;
	width:120px;
	height:40px;
}
div#main-menu li#d3forum-now a{
	background-position: -80px -40px;
	width:120px;
	height:40px;
}
/*ブログ
------------------------*/
div#main-menu li#d3blog a{
	background-position: -200px 0px;
	width:100px;
	height:40px;
}
div#main-menu li#d3blog a:hover{
	background-position: -200px -40px;
	width:100px;
	height:40px;
}
div#main-menu li#d3blog a:active{
	background-position: -200px -40px;
	width:100px;
	height:40px;
}
div#main-menu li#d3blog-now a{
	background-position: -200px -40px;
	width:100px;
	height:40px;
}
/*ページ
------------------------*/
div#main-menu li#pico a{
	background-position: -310px 0px;
	width:110px;
	height:40px;
}
div#main-menu li#pico a:hover{
	background-position: -310px -40px;
	width:110px;
	height:40px;
}
div#main-menu li#pico a:active{
	background-position: -310px -40px;
	width:110px;
	height:40px;
}
div#main-menu li#pico-now a{
	background-position: -310px -40px;
	width:110px;
	height:40px;
}

参考URL

こちらのページに、Smartyをつかった小技がたくさん紹介されています。
http://www.xugj.org/modules/xpwiki/?Smarty%E5%B0%8F%E3%83%8D%E3%82%BF

Add to Google このブログをRSS購読する

関連する記事