SmartyとCSSをつかって、Xoopsでも、現在ページがハイライトするメニューの作り方。ロールオーバー付き。 #xoops |
||
|
Xoopsの場合、theme.htmlがひとつしかないので、 結論から言ってしまうと、 まず完成品から。このサイトでは、d3forumのforumを上メニューに置いて、 上メニューのページへ移動したとき、 用意する画像メニューにつかう背景画像です。
ロールオーバー時の画像と合わせて一枚にしているので、 サンプルhtmlコードモジュールのURLを表示している時だけ、
<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をつかった小技がたくさん紹介されています。 |
||
Firefoxで画像置換をすると表示される点線を消す方法 |
||
|
画像置換とは、「text-indent:-9999px;」を使いテキストを画面外に飛ばし、代わりに背景画像を表示させる方法です。Firefox環境の場合、この方法を使って表示させた画像にaタグが付いていると、クリックしようとした時に点線が現れることがあります。きちんとした企業さんのサイトでもたまに見かけることがありますよね。 点線を消すだけなら方法はとても簡単です。画像置換を行っているaタグに「overflow: hidden;」を指定するだけでOKです。ですが、このままだとMac版のIE5で問題が発生するようなので別途CSSハックが必要になってきます。
このCSSハックを使えば、Mac版のIE5に対して「overflow: hidden;」を無視させることができます。 参考書籍Webプロフェッショナルのための黄金則 XHTML+CSS虎の巻 (Web Designing BOOKS)
posted with amazlet at 09.06.06
大藤 幹
毎日コミュニケーションズ 売り上げランキング: 9089 |
||
ほぼ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
posted with amazlet at 09.12.13
益子 貴寛 堀内 敬子 小林 信次 千貫 りこ 伊藤 学 山田 あかね 西畑 一馬
毎日コミュニケーションズ 売り上げランキング: 5814 Webプロフェッショナルのための黄金則 XHTML+CSS虎の巻 (Web Designing BOOKS)
posted with amazlet at 09.12.13
大藤 幹
毎日コミュニケーションズ 売り上げランキング: 78453 |
||




