グローバルナビゲーションを作る
前の「マウスオーバー処理」という記事の内容にちょっと似てるかもしれませんが、グローバルナビゲーションを作っていきましょう(。・ω・。)ﾉ
まずはデフォルト用、マウスオーバー用の画像を作ります。
自分はFireworksでこんな風に作ってみました。（即行で作ったので、カッコ悪いかと…）
上がデフォルト用、下がマウスオーバー用の画像です。
では、画像置換とCSSスプライトという手法を利用して設定していきます。
画像置換とは…
HTMLに記述されているテキストをCSSを用いて背景画像と置き換える手法です。
CSSスプライトとは…
複数の画像を一枚の画像にまとめ、画像の一部を表示させる手法です。
「マウスオーバー処理」がこの手法に当たるかと思います。
HTMLファイルのほうは、下記の通りに入力します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>グローバルナビゲーション</title>
</head>
<body>
<ul id="main-nav">
<li id="nav-home" class="current"><a href="#">ホーム</a></li>
<li id="nav-contents1"><a href="#">コンテンツ1</a></li>
<li id="nav-contents2"><a href="#">コンテンツ2</a></li>
<li id="nav-contents3"><a href="#">コンテンツ3</a></li>
<li id="nav-contents4"><a href="#">コンテンツ4</a></li>
</ul>
</body>
</html>
記述内容がちょっと多めです。
@charset "UTF-8";
#main-nav{
position:relative;
width:502px;
height:63px;
list-style:none;
}
#main-nav li{
position:absolute;
top:0;
height:63px;
}
#main-nav li a{
display:block;
}
#main-nav li a{
display:block;
height:0;
padding-top:63px;
overflow:hidden;
background-image:url(globalnav.png);
background-repeat:no-repeat;
}
#nav-home{
left:1px;
}
#nav-home,
#nav-home a{
width:100px;
}
#nav-home a{
background-position:-1px 0;
}
#nav-home.current a,
#nav-home a:hover{
background-position:-1px -63px;
}
#nav-contents1{
left:101px;
}
#nav-contents1,
#nav-contents1 a{
width:100px;
}
#nav-contents1 a{
background-position:-101px 0;
}
#nav-contents1.current a,
#nav-contents1 a:hover{
background-position:-101px -63px;
}
#nav-contents2{
left:201px;
}
#nav-contents2,
#nav-contents2 a{
width:100px;
}
#nav-contents2 a{
background-position:-201px 0;
}
#nav-contents2.current a,
#nav-contents2 a:hover{
background-position:-201px -63px;
}
#nav-contents3{
left:301px;
}
#nav-contents3,
#nav-contents3 a{
width:100px;
}
#nav-contents3 a{
background-position:-301px 0;
}
#nav-contents3.current a,
#nav-contents3 a:hover{
background-position:-301px -63px;
}
#nav-contents4{
left:401px;
}
#nav-contents4,
#nav-contents4 a{
width:100px;
}
#nav-contents4 a{
background-position:-401px 0;
}
#nav-contents4.current a,
#nav-contents4 a:hover{
background-position:-401px -63px;
}
画像を複数用意しなくても、一つだけでデフォルト用、マウスオーバー用に切り替えられるのが凄いですよね。
簡単に解説すると、li要素にそれぞれid属性を振り、id属性に対して座標、幅、デフォルト用の画像の設定、マウスオーバー用の画像の設定をしてます。
最初のホームにだけハイライトをさせる為、li要素に「current」という値をclass属性で振ってます。
完成見本はこちら
http://www6.ocn.ne.jp/~yokotchi/blog/sample01/index.html
