- 2009-02-19 (木) 18:10
- CSS
tinyMCEや大手サイトなどでよく使われてる、メニューボタンの画像を１枚にまとめてしまう手法。
ボックスなどにも応用出来るので覚えとくと便利じゃないかなと思います。
完成すると上のようなメニューになるとする。
この場合、a:linkとa:hoverを１枚にまとめて作成します。
横メニューなら上下、縦メニューなら左右に並べて作る。
HTMLは次のようなソースになる。
HTML:
-
<ul id="navigation">
-
</ul>
aタグかliタグに各ボタンを判別するためのclassが必要です。
セレクタが少ないaタグにつけるのが妥当と思うがお好みで。
CSS
まずはボタン以外と共通部分。
CSS:
-
ul#navigation {
-
width:920px;
-
margin:0;
-
overflow:hidden; /*float解除*/
-
zoom:100%; /*float解除*/
-
}
-
ul#navigation li {
-
float:left; /*次の要素を右側へ回り込ませる*/
-
list-style:none; /*リストの●を消す*/
-
}
-
ul#navigation li a {
-
display:block; /*インラインからブロック要素へ変更*/
-
height:37px; /*高さ*/
-
width:180px; /*横幅*/
-
text-align:center; /*テキストの位置*/
-
font-weight:bold; /*テキストの太さ*/
-
letter-spacing:1px; /*文字間隔*/
-
text-indent:-9898px; /*テキストを横に飛ばして見えなくする*/
-
background-image:url(../images/menu.png); /*メニュー画像*/
-
background-repeat:no-repeat; /*画像の繰り返しをオフに*/
-
}
CSSでメニューボタン作る時のセオリー通りに書けばおｋ。
以下はボタンのソース
CSS:
-
ul#navigation a.topics {background-position:0px 0px;width:190px;}
-
ul#navigation li a.topics:hover {background-position:0 -37px;}
-
-
ul#navigation a.policy {background-position:-190px 0px;}
-
ul#navigation li a.policy:hover {background-position:-190px -37px;}
-
-
ul#navigation li a.outline {background-position:-370px 0px;}
-
ul#navigation li a.outline:hover {background-position:-370px -37px;}
-
-
ul#navigation li a.activities {background-position:-550px 0px;}
-
ul#navigation li a.activities:hover {background-position:-550px -37px;}
-
-
ul#navigation li a.base {background-position:-730px 0px;}
-
ul#navigation li a.base:hover {background-position:-730px -37px;}
画像に合わせてbackground-positionで位置指定する。
指定の仕方はbackground-position : 横 縦 ;です。
数値で指定した場合は 横→左から、縦→上から の位置になります。
関連記事
- Newer: [mootools]Fx.Morphで弾幕
- Older: [mootools]スクロールに追随させる - mooFollow.js
