ページトップのナビバー

  • 投稿日:
  • カテゴリ:

このサイトのページトップに複数のサイトを行き来できるように、ナビバーを設置しています。
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;
}
リンクソース
■記事用リンクソース:

■Wiki用リンクソース(PukiWiki):

■Wiki用リンクソース(MediaWiki):

■短縮URL: