横並びメニュー｜CSSの小技(指定テクニック)
ここでは横並びメニューサンプルとサンプルソースのみ掲載します。ロールオーバー及びfloatについては特に解説しません。 グローバルナビゲーション部分が#wraaper、#header等のボックス内に配置されているものとします。 テキストのみの場合 横並びメニューサンプル表示 HTML <div id="globalnavi"> <ul> <li><a href="#">Home</a></li> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> </ul> </div> css #gl
横並びメニューのロールオーバーをJavaScriptを使わずCSSで実現
かなり色んなサイトで見かけるようになった、JavaScriptを使わずにロールオーバーをCSSのみで実現するテクニック、そのやり方です。 以前のエントリーで、縦並びのメニューで同様のを紹介しましたが、横並びのメニューは随分勝手が違います。 またメニューをテキストではなく、画像で行っているのでその部分についても説明していきます。 サンプル： サンプルページを見る ダウンロード： サンプルをダウンロード 使用画像 ロールオーバー用画像 ナビ背景画像 では、やり方をば、、、 まずはロールオーバー用の画像を用意します。 今回使用してる画像は上記の2枚のみです。 また、メニューの背景画像として、全てがオフの状態の画像を用意しています。 コレは、サーバーや回線の都合でたまに読み込みが遅れて、メニュー部分が真っ白になってしまうのを防ぐ為です。 必要無いといえば無いですが、結構気になっちゃうので（ボクは）
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
