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

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

Firefoxで画像置換をすると表示される点線を消す方法

画像置換とは、「text-indent:-9999px;」を使いテキストを画面外に飛ばし、代わりに背景画像を表示させる方法です。Firefox環境の場合、この方法を使って表示させた画像にaタグが付いていると、クリックしようとした時に点線が現れることがあります。きちんとした企業さんのサイトでもたまに見かけることがありますよね。

点線を消すだけなら方法はとても簡単です。画像置換を行っているaタグに「overflow: hidden;」を指定するだけでOKです。ですが、このままだとMac版のIE5で問題が発生するようなので別途CSSハックが必要になってきます。

/* \*/ overflow: hidden; /* */

このCSSハックを使えば、Mac版のIE5に対して「overflow: hidden;」を無視させることができます。

参考書籍

Webプロフェッショナルのための黄金則 XHTML+CSS虎の巻 (Web Designing BOOKS)
大藤 幹
毎日コミュニケーションズ
売り上げランキング: 9089

ほぼCSSのみで作る縦型プルダウンメニュー

確認ブラウザは IE7、Firefox2、Opera9、Safari3.1 です。
CSS のみでは IE6 対応が不可能ですが、IE の独自機能(DHTML)を併用することで IE6 でもプルダウンメニューを実現しています。
[使える CSS テクニック] CSSで実現するプルダウンメニュー – バシャログ。

こちらで紹介されているソースを利用して、縦型のプルダウンメニューを作成してみました。少しだけソースをいじって、カーソルを合わせたときに右側にメニューが表示されるようにしています。

サンプルとして、HTMLとCSSを紹介しておきます。

HTML

<div id="pulldownmenu">
	<ul>
		<li class="top"><a href="">トップページ</a></li>
		<li class="kind">スポーツ
			<ul>
				<li class="kindtop"><a href="">野球</a></li>
				<li><a href="">サッカー</a></li>
				<li><a href="">バスケ</a></li>
			</ul>
		</li>
		<li class="kind">食べ物
			<ul>
				<li class="kindtop"><a href="">カレー</a></li>
				<li><a href="">ラーメン</a></li>
				<li><a href="">ステーキ</a></li>
			</ul>
		</li>
	</ul>
</div>

CSS

div#pulldownmenu {
	width:200px;
}
div#pulldownmenu ul { /* IE6 対策 */
	behavior:url("csshover.htc");
}

div#pulldownmenu ul a {
	color:#FFFFFF;
	text-decoration: none;
	font-size:small;
}
div#pulldownmenu ul a:link,
div#pulldownmenu ul a:visited {
	background: #fff;
	color:#0099FF;

}
div#pulldownmenu ul a:hover,
div#pulldownmenu ul a:active {
	background-color:#fff;
	color:#FF6600;
}

div#pulldownmenu ul li {
	float:left;
	position: relative;
	width:194px;
	height:1.5em;
	margin: 0;
	font-weight:bold;
	color:#0099FF;
	border-left:5px solid #FF66FF;
	border-bottom:1px solid #999999;
	border-right:1px solid #999999;
}
div#pulldownmenu ul li.kind{
	width:184px;
	padding:5px 0 2px 10px;
}
div#pulldownmenu ul li.top {
	border-top:1px solid #999999;
	font-size:medium;
	padding:2px 0 0 0;
}
div#pulldownmenu ul li:hover,
div#pulldownmenu ul li:active {
	background-color:#fff;
	border-left:5px solid #0099FF;
	border-bottom:1px solid #999999;
	border-right:1px solid #999999;
	color:#FF6600;
}
div#pulldownmenu ul li a {
	display: block;
	font-weight:bold;
	height:1.5em;
	color:#000000;
	padding:0 0 0 10px;
}

/* 下層のメニューを不可視に */
div#pulldownmenu ul li ul {
	display: none;
}

/* 疑似要素 :hover で下層のメニューを可視に */
div#pulldownmenu ul li:hover ul {
	display: block;
	position:absolute;
	z-index:100;
	left:180px;
	top:0px;
}
* html div#pulldownmenu ul li:hover ul {
	display: block;
	position:absolute;
	z-index:100;
	left:190px;
	top:0px;
}
div#pulldownmenu ul li ul li{
	float:none;
	width:130px;
	margin: 0;
	background:#fff;
	padding:3px 0 0 0;
}
div#pulldownmenu ul li ul li.kindtop{
	border-top:1px solid #999999;
}
div#pulldownmenu ul li ul li a{
	float:none;
	font-size:small;
	font-weight:bold;
	background:#fff;
}

このサンプルでは、プルダウンを表示するメニュー(スポーツと食べ物)をリンクしていないため、aタグが付いていないhoverを使って、レイアウトを調節しています。

また、このコードだけではIE6で表示がうまくいかないため、DHTMLを利用するファイルを別途アップロードする必要があります。詳しくは上記リンク先をご覧ください。

現場のプロから学ぶXHTML+CSS
益子 貴寛 堀内 敬子 小林 信次 千貫 りこ 伊藤 学 山田 あかね 西畑 一馬
毎日コミュニケーションズ
売り上げランキング: 5814
Webプロフェッショナルのための黄金則 XHTML+CSS虎の巻 (Web Designing BOOKS)
大藤 幹
毎日コミュニケーションズ
売り上げランキング: 78453