引き出して使うプルダウンメニュー:CSS小技

ブログが作りたい!CSSの小技 > 引き出して使うプルダウンメニュー:CSS小技

引き出して使うプルダウンメニュー:CSS小技

引き出して使うプルダウンメニュー:CSS小技

CSSの小技(21)

前回、引き出すナビゲーションメニューを作りながら、「これって、プルダウンメニューみたいになったら、おもしろいんじゃないかしら?」と思ったので、今回ちょっと試しに作ってみました。

CSSだけで作る「必要なときだけ引き出すナビゲーションリスト」と言った感じです。

決して良い出来(ひでき感激)とは言えないので、いろいろとアドバイスをいただけると嬉しいです。(いつものことながら、よろちくび)


引き出して使うプルダウンメニューとは?

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

引き出して使うナビゲーションリスト

サンプルを用意したので、良かったら サンプルをご覧になってみてほしいんですけれども・・・これ、かなりやばそうな雰囲気がぷんぷんするはずです。

お~こわ。なんてことを言うておりますけれども。

さて、私といっしょに地獄の果てにランデブーしてくれる稀有な人は、引き続き作成してみてくださいませ。

このサンプルは、IE6では正常に動作しません。対応方法については後述しています。


引き出して使うプルダウンメニューを作る方法

1:ソースコード

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

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

2:ポイント解説

必要なリセットは、CSSの冒頭にて「margin:0 padding:0」でいいと思うのだけれど、safariと、Google Chromeでリセットが効いていなかったので、px単位付きでもやっています。

それから、やっていることは、前回の記事とあまり変わらないんですが、今回の「div#navi1」の中に入っている ulリストが複数個になっています。

そして、liでfloatさせるのではなく、ulでfloatさせて、それぞれ縦にリスト表示される形です。

あとは、マウスーオーバーが、aリンクではなく、ulにかけています。そこで、positionにて、topの数値をプラスにして引き出しています。

また、ヘッダーの上に marginを入れると、ナビゲーションの画像が顔を出してしまう好ましくない問題もあります。(間にbodyと同じ背景色のdivをかましておく方が良いのかしら)

position(top)の数値、ulの heightなど薄氷をふむ感じでできています。リストの項目が多いと、はみ出すしね。そんな感じです。


IE6でaリンク以外のhoverに対応させる方法

1:IE6でaリンク以外のhoverに対応させる方法

csshover.htc」をダウンロードして、CSSで次のように書いておくと、IE6でも aリンク以外のhoverが使えるようになります。

ちなみに、FC2ブログでは、HTCファイルはサーバにアップロードできないので、利用できません。残念。

2:HTCファイルとは?

「csshover.htc」の拡張子は「.htc」とあります。これ、私ははじめて見ましたが、HTML Components (HTC)というものみたいです。

おそらく関連する話だと思うんですが、Microsoftさんのページ『HTML Components を使った DHTML Behaviors のスクリプトによる実装』にて、それらしいことが書いてあります。(以下、引用)

Internet Explorer 5 で導入された HTC~(中略)~HTCファイルとは、.htcという拡張子付きで保存される HTML ファイルにすぎません。

う~ん、おそらく主たる HTMLファイルではなく、副次的な HTMLファイルということなのかな。(呼び出すライブラリのような扱い?)

ちなみに、「csshover.htc」の中身は JavaScriptで書かれているようです。あれれ?と言うことは、ブラウザでJavaScriptが OFFになっていたら、やはり使えないということですか?

3:参考になるサイト・ページ

前の記事へ
次の記事へ

次回予告

次回は、文章と画像の透過に関する CSSの小技をご紹介したいと思います。


関連記事

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

作成日:2009/05/14 更新日:2009/05/14

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

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

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

コメントの投稿

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

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/507-8ed27f84
 | トップページ | 

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
ありのごとくあつまりて