tomemo

ナビゲーションメニューを追加しました

ナビゲーションメニューをつけました。
d0112463_1173099.jpg

作成にあたっては、以下の記事を参考にしました。
ulタグでメニュー2 ~CSSテクニック~




HTML/CSSは以下のとおりです。

HTML


<div id="menu-wrapper">
<ul class="menu">
<li><a href="http://asazuki508.exblog.jp/11879381/" target="_self"> 紹介</a></li>
<li><a href="http://asazuki508.exblog.jp/tags/%E3%82%B9%E3%82%AD%E3%83%B3%E4%B8%80%E8%A6%A7/" target="_self">スキン一覧</a></li>
<li><a href="http://asazuki508.exblog.jp/tags/%E5%85%AC%E5%BC%8F%E3%82%B9%E3%82%AD%E3%83%B3/" target="_self">スキン詳細</a></li>
<li><a href="http://comemo508.wordpress.com/contact/" target="_self">お問い合わせ</a></li>
</ul>
</div>


CSS


#menu-wrapper {
border-bottom:solid 1px #ccc;
text-align: center;
margin-bottom: 10px;
/padding: 5px 0;
}

ul.menu{
list-style:none;
width:800px;
font-size:14px;
margin: 7px auto;
padding:3px 0px;
text-align:left;
background-color:#ffffff;
}
ul.menu li{
list-style:none;
display:inline;
background-color:#ffffff;
margin:0px 15px;
}
ul.menu a{
padding: 8px 10px;
text-decoration:none;
}
ul.menu a:hover{
border-top : 4px solid #FF8A00;
/position: relative;
}



リンク先を修正すれば、他のスキンでもそのまま使えると思います。HTMLは一番上に貼り付けてください。CSSはどこでも構いません。
[PR]
by asazuki508e | 2011-07-03 01:22 | Comments(0)