" />

Blog ページトップのナビバー

2007年12月30日 | Blog | コメント (0)

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

[242 Viewd (RSS: 0)] [Edit]
記事情報
  • 投稿日:
  • 更新日:
リンクソース
■記事用リンクソース:

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

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

■短縮URL:
コメントの追加









名前、アドレスをブラウザに記憶させますか?


※投稿には、名前とメールアドレスが必要です。
※メールアドレスは、表示されません。
※コメントにはタグは使えません。
※コメント中のURLは自動的にクリッカブルに変換します。





画像の中に見える文字を入力してください。



同カテゴリの人気記事
マイブログアンテナ
Feeds
EarlGrey Tearoom
メアド
counter
Powered by Movable Type