ヘッダー下に簡単なナビゲーションメニューを設置してみる

photo credit: edenpictures

最近のサイトやブログにはヘッダー下にナビゲーションメニューが付いていることが多いですが、残念ながらアメブロにはその機能がありません。
ナビゲーションメニューを設置することで、訪問者も閲覧が非常に便利になり、それがアクセスアップにも繋がります。
そこで今回は、誰でもできる簡単なナビゲーションメニューの設置に挑戦してみようと思います。

madtag

完成したらこんな感じになるものを作成してみようと思います。



まず、javascriptでヘッダーの下にHTMLタグを挿入します。
以下のコードをフリープラグインに記述してください。
※各項目の名前（HOMEやMy Roomなど）やaタグのリンク先は自由に変えてください。

<script type="text/javascript">
$("#overHeader").after(
'<div class="top_navi_menu"><ul><li><a href="http://ameblo.jp/">HOME</a></li><li><a href="http://profile.ameba.jp/">My Room</a></li><li><a href="#">Read Me!</a></li><li><a href="#">Category</a></li><li><a href="#">Archives</a></li><li><a href="http://ameblo.jp/">Articles list</a></li><li><a href="#">link</a></li></ul><br style="clear:left"/></div>'
);
</script>

次にCSSを書き加えます。

/*ナビ全体*/
.top_navi_menu{
background:#414141; /*背景色*/
width:100%; /*サイトの幅に自動で合わせる*/
height:auto; /*文字の大きさに自動で合わせる*/
overflow:hidden;
margin-bottom:10px;
}

.top_navi_menu *{
font-weight:bold; /*文字の太さ*/
font-size:14px; /*文字の大きさ*/
font-family:"Times New Roman"; /*文字の種類*/
}

.top_navi_menu ul{
margin:0;
padding:0;
list-style-type:none;
}

/*項目リスト*/
.top_navi_menu ul li{
width:100px; /*項目一つあたりの枠の幅*/
position:relative;
display:inline;
float:left;
}

/*項目リストのリンク*/
.top_navi_menu ul li a{
display:block;
background:#414141; /*マウスが乗っていない項目の背景色*/
color:#FFFFFF; /*マウスが乗っていない項目の文字色*/
padding:4px 10px;
border-right:1px solid #778; /*項目の境界線の色*/
text-decoration: none;
}

/*IE6対策*/
* html .top_navi_menu ul li a{
display:inline-block;
}

.top_navi_menu ul li a:link, .top_navi_menu ul li a:visited{
color:#FFFFFF;
}

.top_navi_menu ul li a:hover{
background:#000000; /*マウスが乗っている項目の背景色*/
color:#FFFFFF; /*マウスが乗っている項目の文字色*/
}

簡単にカスタマイズできる部分に関してはコメントを付けてみました。
これだけで完成です。簡単でしょ！

気になった方は、是非とも挑戦してみてください。

ご質問は御気軽に・・・