ざっくり説明すると…
- グローバルナビをつくってヘッダー部分に配置
- グローバルナビのliの中にドロップダウン部分を追加
- jQueryを使って見え隠れの動きをつける
って感じです。
HTML&CSSの部分
まずはHTMLから
ulを使った横並びのナビゲーションです。
liにナビゲーションの部分のaとドロップダウン部分のdiv.navContを設定しています。
.innerは、CSSのバグを回避するためのものなので本来はこの記事とは関係ありません。
<ul id="gNav" class="clearFix">
<li id="nav1" class="nav">
<a href="http://ameblo.jp/designs-blog/">PCってめんどくさいTOP</a>
</li>
<li id="nav2" class="nav">
<a href="#">アメブロカスタマイズ</a>
<div class="navCont">
<div class="inner">中身</div>
</div>
</li>
<li id="nav3" class="nav">
<a href="#">おすすめ記事</a>
<div class="navCont">
<div class="inner">中身</div>
</div>
</li>
<li id="nav4" class="nav">
<a href="#">
たかだについて
</a>
<div class="navCont">
<div class="inner">中身</div>
</div>
</li>
<li id="nav5" class="nav">
<a href="#">
おすすめリンク
</a>
<div class="navCont">
<div class="inner">中身</div>
</div>
</li>
</ul>
こんな感じ。
これの改行を取ったものをフリープラグインに書きます。
CSSのところ
CSSはこんな感じ。
/*グローバルナビ*/
#gNav{
position: absolute;
z-index:20;
top:-160px;
right:0;
margin: 0;
padding: 0;
list-style: none;
width:460px;
}
li.nav{
margin: 0;
padding: 0;
float: left;
height: 40px;
}
li.nav a{
margin:0;
padding:0;
text-indent: -9999px;
background: url(画像のurl);
height: 40px;
display: block;
}
#nav1 a{
width: 71px;
background-position: -300px 0;
}
#nav1 a:hover,#nav1.active a{
background-position: -300px -40px;
}
#nav2 a{
width: 98px;
background-position: -371px 0;
}
#nav2 a:hover,#nav2.active a{
background-position: -371px -40px;
}
#nav3 a{
width: 136px;
background-position: -469px 0;
}
#nav3 a:hover,#nav3.active a{
background-position: -469px -40px;
}
#nav4 a{
width: 84px;
background-position: -605px 0;
}
#nav4 a:hover,#nav4.active a{
background-position: -605px -40px;
}
#nav5 a{
width: 71px;
background-position: -689px 0;
}
#nav5 a:hover,#nav5.active a{
background-position: -689px -40px;
}
.navCont{
position: absolute;
top: 40px;
right: 0;
width: 940px;
z-index:20;
display:none;
}
.navCont .inner{
padding: 15px 20px;
border: #cccccc 1px solid;
border-radius: 10px;
background: #ffffff;
box-shadow: 0 1px 2px #cccccc;
}
ポイントはCSSスプライトを使って一枚の画像で対応しているところ。
これについては、そのうち書きます。
グローバルナビ(#gNav)をposition:absolute;で絶対配置しています。
#subFirstContentsAreaにposition:relative;を設定していますので、#subFirstContentsAreaが基準点となります。
グローバルナビの中身のdiv.navContもposition:absolute;を指定していますので絶対配置なのですが、これは#gNavが基準点となります。
z-indexを20くらいで指定してください。(11~1999の間)
あとでjQueryを使ってこの部分は見えないようにしますが、ページをロードするときにチラっとみえてしまうとダサいのでdisplay:block;を指定しています。
jQueryの部分
<script type="text/javascript">
$(function(){
$("div.navCont").hide();
$("#gNav li").hover(function(){
$(this).addClass("active");
$("div.navCont",this).slideDown("normal");
},function(){
$(this).removeClass("active");
$("div.navCont",this).fadeOut("fast",function() {
if ( !jQuery.support.leadingWhitespace ) { this.style.removeAttribute('filter'); }
});
});
});
</script>
まず、.hide()でdiv.navContの部分を消します。
.hover()を使って#gNavi liをマウスオーバーした時と離れた時の処理を設定する。
ソースを見ると分かり辛いのですが、「,」で仕切ってます。
マウスオーバーしたとき
.addClass()で、activeというクラスを付けてます。
これでliの部分をマウスオーバーしたら
<li id="○○">ナビ</li>
↓
<li id="○○" class="active">ナビ</li>
となります。
CSSで.activeをa:hoverと同じ効果を与えています。
次に.slideDown("normal")で動きを見せながら表示します。
normalの部分をfastにすると早く、slowにすると遅くなります。
$("div.navCont",this)は、#gNav liの中のdiv.navContという意味です。
マウスが離れた時
離れたときは逆です。
.removeClassでactiveというクラスを外します。
.fadeOut("fast")でフェイドアウトされてます。
スライドダウンしたのでスライドアップ「.slideUp()」でもよかったのですが、なんかうるさかったのでフェイドアウトにしました。
フェイド系を使うと、IEで文字がジャギっちゃう問題が出るので、コールバック関数を使ってIE独自のフィルター機能をオフにしています。
まとめ
出来てしまえば簡単です。
ただ、ここまで色々問題がありました。
IEで、表示されると記事の部分の下に来ちゃったり…
IEで、文字がつぶれちゃったり…
IEで、中身がずれちゃったり…
…あれ？IEばっかか…
でも、アクセス解析を見ると半分の人はIEだったり…
て、ことで見え方は微妙に変わりますがIEでも見れるようにしました。
まだ、問題が…
JavaScriptをoffにしている人は見れません。
これは…どうしたもんか？
とにかく今回の一番の目的はこの"メガグローバルナビ"だったので一応今回でカスタマイズシリーズは終了です。
これから細かいところを直して行きますので、随時…まったりと…更新して行きます。
htmlとcssまでは、頑張れば誰でも出来ると思います。
やりたい事をGoogleで検索すると大抵の情報は手に入れられます。
何か問題が出たときにGoogleで検索すると、大抵他の人も同じ問題にぶつかっていて、大抵誰かが助けてくれてます。
ネット上には無数の情報が転がっていますので、これからHTMLとCSSを覚えようと思っている人が最初にしなければ行けないことは検索をすることです。
検索すればするほど、検索するスキルが上がります。
…と、自分に言い聞かせてみる。