このサイトのページトップに複数のサイトを行き来できるように、ナビバーを設置しています。
HTMLソースにメニュー項目を羅列し、あとはスタイルシートでボタン風にするなどの飾り付けをしています。
まず、次のようなナビバーの項目をHTMLソースの最後の方、つまり</body>の手前に記述します。
なぜソースの下かというと、アクセシビリティの関係でそうします。
<div id="navibar">
<div class="navi">
<a href="……">メニュー項目1</a>
<a href="……">メニュー項目2</a>
</div>
</div>
次にスタイルシートを編集します。
ナビバーのスペースを空けるために、ページ全体を下げます。body {ナビバーをページトップに表示させます。
margin-top:20px;
}
#navibar {ナビバーの文字色や背景色を指定します。
position: absolute;
top: 0;
left: 0;
border: none;
width: 100%;
}
.navi {リンクする文字列には、ボタン風に囲みを入れます。
color:#000;
background:#CCC;
font-size: 10px;
padding:5px;
}
.navi a,マウスをのせると文字色などを変化させることができます。
.navi a:link,
.navi a:visited {
color: #555;
text-decoration: none;
padding:2px;
border-top:1px solid #FFF;
border-left:1px solid #FFF;
border-bottom:1px solid #555;
border-right:1px solid #555;
}
.navi a:hover {マウスをクリックするとボタンがへこんだようにします。
color: #000;
}
.navi a:active {
color:#F00;
background:#999;
border-top:1px solid #555;
border-left:1px solid #555;
border-bottom:1px solid #FFF;
border-right:1px solid #FFF;
}