[CSS]ごくシンプルな水平型のナビゲーションを実装するチュートリアル
Post on:2009年9月7日
sponsors
ごくシンプルな水平型のナビゲーションを実装するチュートリアルをCSS Newbieから紹介します。
A Super Simple Horizontal Navigation Bar
demo
デモの水平型のナビゲーションはリスト要素で実装されており、アンカー箇所は大きく、ホバー時に背景色が変わるようになっています。
下記、そのポイントをピックアップして紹介します。
HTML
シンプルなリスト要素で実装します。
|
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="html" cols="60" rows="5"> <ul id="nav"> <li><a href="#">About Us</a></li> <li><a href="#">Our Products</a></li> <li><a href="#">FAQs</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Login</a></li> </ul> </textarea> |
※「id="nav"」はこのリストをCSSで指定できるように、親にヘッダなどのdiv要素があれば不要です。
CSS
まずは、リストを水平に配置します。
|
1 2 3 4 5 6 7 8 9 10 |
<textarea name="code" class="css" cols="60" rows="5"> #nav { width: 100%; float: left; margin: 0 0 3em 0; padding: 0; list-style: none; } #nav li { float: left; } </textarea> |
ナビゲーションバーに背景と境界線を記述します。
|
1 2 3 4 5 6 7 8 9 10 11 |
<textarea name="code" class="css" cols="60" rows="5"> #nav { width: 100%; float: left; margin: 0 0 3em 0; padding: 0; list-style: none; background-color: #f2f2f2; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; } </textarea> |
ナビゲーションバーのリンク箇所のエリア全体をクリックできるように記述します。
|
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="css" cols="60" rows="5"> #nav li a { display: block; padding: 8px 15px; text-decoration: none; font-weight: bold; color: #069; border-right: 1px solid #ccc; } </textarea> |
最後に、ホバー時に背景の色を変更できるようにします。
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> #nav li a:hover { color: #c00; background-color: #fff; } </textarea> |
終わりに
このチュートリアルは、ここからスタートしてさまざまなナビゲーションバーを制作するためのものです。
有用なフレームワークとして、活用してください。
sponsors
