引き出すナビゲーションメニュー:CSS小技

ブログが作りたい!CSSの小技 > 引き出すナビゲーションメニュー:CSS小技

引き出すナビゲーションメニュー:CSS小技

引き出すナビゲーションメニュー:CSS小技

CSSの小技(20)

私はどうも、整理整頓が苦手です。すぐ机の上を書類でワサワサさせてしまったり、読みかけの本が部屋に散らばっていたりもします。

使うものは、必要になったときだけ取り出して使えばいいんですよね。分ってはいるのですが、なかなか難しいものです。

さて今回は、必要なときだけ引き出すナビゲーションメニューを CSSで作ります。ナビも必要なときだけ引き出せば、邪魔にならないかもしれません。


引き出すナビゲーションメニューとは?

普段は隠れているナビゲーションメニューが、マウスをのせると引き出されるという仕組みです。

引き出すナビゲーションメニュー

しかし、メニュー自体の存在が分り難いので、ターゲットユーザのネットリテラシーが低いようなブログで使うのは、厳しいかもしれません。

上述の画像だけではイメージしにくいと思います。実際にさわって見たい人は、サンプルをご覧になってみてください

追記(2009/05/15)、余計なスペースが入らない「position: absolute;」を使ったサンプルも作りました。


引き出すナビゲーションメニューを作る方法(1)

position: relative;」を使っている余計なスペースが入る方法です。

1:ソースコード

(1)HTMLコード
(2)CSSコード

clearfixについては、記事『サムネイル画像をきれいに並べる(1):CSS小技』をご覧ください。

2:ポイント解説

大きくは、「div#header」と「div#navi1」があります。もちろん「div#navi1」の中には、ナビゲーションメニュー(ulリスト)が入っています。

この「div#header」と「div#navi1」は、通常なら縦に並ぶわけですが、「div#navi1」に相対配置(position: relative;)で「top: -25px;」をすることで重なります。

そして、「div#header」の z-indexの値の方を大きくしてあるので、上に表示されます。「div#navi1」の重なっている部分が隠れるわけですね。

あとは、画像にマウスのカーソルがのった(a:hover)ときに、相対配置(position: relative;)でプラスの値(top: 25px;)を与えて戻しています。


引き出すナビゲーションメニューを作る方法(2)

position: absolute;」を使っている方法です。(あまり安定していません)

1:ソースコード

(1)HTMLコード
(2)CSSコード

clearfixについては、記事『サムネイル画像をきれいに並べる(1):CSS小技』をご覧ください。

2:ポイント解説

おおまかには、relativeを使った方法(1)と同じなんですが、「div#navi1」で「position: absolute;」を使っているところが、大きく違うところです。絶対配置なので、見出しの上にもかぶってきます。

あとは、ちまちまとpaddingやtopの値をいじって調整しています。

それから『引き出して使うプルダウンメニュー』を作っているときに気付いたんですが、Google Chromeや Safariは、単位なしのリセット(margin: 0; padding: 0;)が効かない場合があるようです。

ゆえに、px単位つきでリセット「h1 { margin: 0px; padding: 0px; }」を追加しています。よく分からないですけどね。

前の記事へ
次の記事へ

次回予告

次回は、ナビゲーションメニューか、あるいは文章と画像の透過に関する CSSの小技をご紹介したいと思います。


関連記事

CSSに関連する記事の一部を、ご紹介します。

作成日:2009/05/12 更新日:2009/05/15

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/506-d1e77ecc
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて