ナビゲーションバーの作り方

はてな

位置の調整以外はわりとカンタンです。
私はこんな感じで、HTMLとCSSを書いています。（その部分のみ抜粋）
HTML部分はそのままでも、CSSを工夫すると枠色の濃淡でボタンのように見せたり、画像のボタンにしたりもできるようです。

【HTMLの例】
<div id="nav">
<a href="リンク先のURL">コンテンツ</a>
　(中略)
<a href="リンク先のURL">プロフィール</a>
</div>

【CSSの例】
#nav a{
	width:100%;
	background: #d0e4fc;
	border:solid #83b2f8 1px;
	color:#777777;
	display:block;
	float:left;
	font-size:80%;
	fontweight:bold;
	padding:5px 0px 5px 0px;
	text-align:center;
	text-decoration:none;
	width:16%;
	margin:0px 0px 0px 5px;
}
#nav a:hover{
	background:#83b2f8;
	color:#ffffff;
}