CSS(とJS)でシンプルなドロップダウンメニュー - 2

シンプルなドロップダウンメニューの詳細版になります。
マウスカーソルをメニューの見出しに重ねると垂れ幕のようにメニューが表示される…と言うよくあるドロップダウンメニューです。好きなように使って下さい。
ただし、このページのスクリプトはあくまでサンプルであって素材ではありません。このままでも使えなくは無いですが、以下の点に注意を払う必要があります。
標準準拠ブラウザの場合、CSSが機能していなくてもメニューとしての構造を保つように作っています。 が、CSSオン・javascriptオフのIEではメニュータイトルしか見えない状態になります。
このシチュエーションをフォローするには、IEが読めないようにCSSのpositionとdisplayにハックコード(例えば、dl[id=foo]など)を入れ、代わりにJavascriptでpositionとdisplayのスタイル指定を書き出せばどうにかなります。


コメント
プルダウンのメニューを作らなくてはならなかったので とても参考になりました。
ありがとうございます。

質問があるのですが、
htmlソース内で<dl>タグ個々にクラス指定をしたら IEプレビューでプルダウンしなくなってしまいました。javascriptはどのように訂正したらよいのでしょうか?

もう1点あるのですが、
現在、プルダウンするメニューの下にswfファイルを配置してます。
プルダウンしたメニューがFlashコンテンツの下にどうしても隠れてしまいます。
どのように指定すればよいのでしょう?

お忙しい中大変申し訳ございません。
よろしくお願い致します。
  • aya
  • 2006/07/09 7:53 AM
ayaさん、こんちには。

>タグ個々にクラス指定をしたら
正規表現の修正が必要になります。
javascriptの3行目の部分、
省略…<dl>/gi,"<dl onmouse…省略

省略…<dl (.*?)>/gi,"<dl $1 onmouse…省略
と修正して下さい。(.*?)と$1が追加されます。
個別に用意したクラスに対してスタイルを設定している場合、スタイルの見直しが必要になるかも知れません。

>Flashコンテンツの下にどうしても隠れてしまいます
objectのparamタグとembedタグに
wmode=opaque
を追加してみて下さい。
ただし、メニューがチラつく可能性が高いので、ムービー内にメニューを用意したり、先にムービーを置くレイアウトなども検討されては如何でしょうか。
Dreamweaverをご利用の場合はそちらでメニューを作成するのが無難かも知れませんね^^;
Adobeのサイトもayaさんのレイアウトと同じ構成だと思いますので参考にして下さい。
  • Faro管理人
  • 2006/07/09 1:20 PM
お返事ありがとうございます!
解決できました!
調子にのってプルダウンの部分を半透明にしてみましたよ。
IE、Operaでは実現できなかったのですが、
その他のブラウザでは成功しました!
 
Falogはとてもわかりやすく 参考になりました。本当にどうもありがとうございました!
  • aya
  • 2006/07/10 7:04 AM
おお、良かったー
推敲するのが苦手なので分かり易いと言ってもらえるとホッとします。
半透明はアイキャッチになって良いかもですね。
確認はしていませんが、#menu_containerにfilter:alpha(opacity=50)追加でIEでも透過するかも知れません。
  • Faro管理人
  • 2006/07/10 9:18 PM
プルダウン半透明 解決出来ました!
IEでfilter:alphaを使用するときwidthを指定してあげないと機能しないんですね。
恥ずかしながら始めて知りました(^^;)
Operaに関しても、アルファのかかったpng画像を読ませることによって解決しましたよ。
一時は、プルダウンすらあきらめかけていたので、本当に助かりました!
ありがとうございました(^^)
  • aya
  • 2006/07/12 1:34 AM
解決おめでとうございます。
補足ですが、Opera9とSafariは"opacity:0.8;"で透過処理されます。
ただ、古いOperaが対応していたか記憶に無いのと、CSSだと文字まで薄くなるのでPNGの方が用途に合ってますね。
機会があれば私もPNG画像を使ってみます。
  • Faro管理人
  • 2006/07/12 10:40 PM
こんにちは。
私もプルダウンで悩んでいたのでこのサイトは大変助かりました。
早速設置してみたのですが、なぜかMacのIEだとプルダウンで出たメニューが、その下にレイアウトされている文字と画像の下にもぐってしまいます(このページのサンプルを例にとると、下にある見出し「Require」の文字が出てきたメニューの上にかぶさってしまう)。

なんとか強制的に上に表示されるようにする方法はないものでしょうか?
  • オノユン
  • 2006/07/31 3:43 PM
オノユンさん、こんにちは。

同じ環境でこのページを見ても現象が発生するなら、他に設定されたスタイルを変更する必要があるかも知れません。
取りあえず#menu_containerのCSSに
 z-index:9999;
を追加して見てください。
  • Faro管理人
  • 2006/07/31 7:12 PM
お返事遅くなってすみません。
z-index追加してみましたが改善されませんでした。
このページでは現象が発生していないので、こちらのCSSやHTMLの他の要素が何か悪さをしているんだと思います。
時間が出来たらまた一から導入しなおしてみます。
  • オノユン
  • 2006/08/06 11:44 AM
あー、駄目でしたか。MacIEは難しいですね。
私もMacIEでよく悩みます…諦める事が多いですが。
怪しそうなスタイルを削り、少しずつ戻して原因特定するしか無さそうですね。
頑張って下さい。
  • Faro管理人
  • 2006/08/08 7:49 PM
Faro管理人様

はじめまして。あると申します。

このスタイルシートのメニューを利用させていただいています。

ayaさんの質問と似てますが、WinのIEだと、どうしてもフラッシュの下にメニューが隠れてしまいます。

WinのIE対策になにかご存知でしたら、知恵を貸していただけないでしょうか。

宜しくお願いします。
  • ある
  • 2006/08/23 11:59 PM
あるさん、こんにちは。初めまして。
お返事が遅くなりました。ごめんなさい。

WinのIEで、Flashの下にメニューが潜り込んでしまうとの事ですが、私はayaさんのケースで提案した程度の知識しか持ち合わせていません。
IE6+FlashPlayer8xでチェックした時は"wmode=opaque"の追加のみでFlashの上に表示出来ましたが、それ以外の環境では不明です。
こちらでも確認してみたいので、宜しければIEとFlashプレーヤーのバージョンを教えて下さい。
  • Faro管理人
  • 2006/08/26 10:32 AM
管理人様

お返事ありがとうございました。
IEについては自己解決しました。

ネスケやfirefoxには管理人様がおっしゃっていたタグを追加でOKでした。

IEの場合はFLASHのタグに<param name="wmode" value="transparent">を追加でやっと見えました。


以上はすべてWinではOKでしたが、やはりMacになるとsafariではちらつきというか選択しているメニューしか現れず。
ネスケはダメですね。

ちなみにWinのIEはver6で、SP2です。

お忙しいところお返事頂きありがとうございました。

メニュー利用させていただきます。
感謝しております。
  • ある
  • 2006/08/27 10:15 PM
解決されたようで安心しました。
Safariでのちらつき、使用には問題無さそうですが気になる所ですね…
結果の報告をありがとうございます。参考にさせて頂きます。
お疲れ様でした。
  • Faro管理人
  • 2006/08/30 7:23 PM
初めまして。CSSでプルダウンを作りたかったので、こちらのサイトが大変参考になりました。

ひとつご質問させてください。
当初に見えるdtメニュー部分のみ画像で、プルダウンはテキストで作成しているのですが、下のプルダウンの方が上のdt画像より横幅が長い場合、デフォルトのdtメニューの横幅間隔が下のテキストの長さに合わせて開いてしまいます。
一段目dtメニュー部分の横幅を変えずに下にプルダウンを出すには、どうすればよいのでしょうか。。?
  • yumi
  • 2006/11/02 8:43 PM
yumiさん、こんにちは。初めまして。

横幅の指定は基本的にDLで行うように作ってますので、DTとDDの長さを揃えるのが無難です。
ブラウザの種類はIEでしょうか?
無理矢理収める事になりますが、以下を試してみて下さい。

画像とDDの横幅が皆同じである事が前提です。
「#menu_container dl」にwidth:70px(画像の横幅です)
「#menu_container dd」にwidth:100px
を指定した場合、

#menu_container dd{
display:none;
margin:0 0 0 -30px;/*DTとDDの差をマイナス数値でずらします*/
border-left:1px solid black;
border-right:1px solid black;
width: 100px;
position:relative;/*相対配置にします*/
z-index:3;/*重なり順を指定します*/
}

一応これで隙間は出なくなると思います。
ずらす方向が左向きなので、レイアウトによっては左端メニューが表示領域の外に出てしまうかもしれません。
その場合は「#menu_container」のmargin指定を
margin: 0 0 0 30px;
に設定して全体を右にずらします。
DDだけ右にずらした方がシンプルなのですがMacIEに合わせてます。

もっと良い方法があるかも知れませんが取り敢えず如何でしょう。
  • Faro管理人
  • 2006/11/03 7:23 PM
はじめまして。ちゃると申します。

かなりの初心者でjavascriptなんて全くわからないのですが、このサイトを見てなんとかプルダウンメニューができました。

自分のブラウザはIE7でちゃんとプルダウンするのですが、IE6で見るとプルダウンされません。

ayaさんのときのコメントを見て同じようにやってみましたが無理でした。(自分も<dl>タグ2つにスタイル指定したので)

どうすればよいのでしょうか…?
  • ちゃる
  • 2006/11/21 11:47 PM
ちゃるさん、はじめまして。
ちょっと情報が足りないので解決するか分かりませんがスクリプトを以下のものに変えてみてください。

if(document.getElementById && document.all && navigator.userAgent.indexOf("Opera")<0){
var obj = document.getElementById("menu_container").getElementsByTagName("dl");
for(var i=0; i<obj.length; i++)
{
obj[i].onmouseover = function(){pull(this)};
obj[i].onmouseout = function(){pull(this)};
}
}

function pull(obj){
for(var i=0;i<obj.childNodes.length;i++)
if(obj.childNodes[i].nodeName.toUpperCase()=="DD")
obj.childNodes[i].style.display=obj.childNodes[i].style.display=="block"?"none":"block";
}
  • Faro管理人
  • 2006/11/22 8:08 PM
Faro管理人様
はじめまして ゆうと申します。
いつも勉強させてもらってます。

少しCSSとは離れてしまうのですが検索してもなかないい参考サイトがなくて質問させてください。

Dreamweaverでドロップダウンメニューをつくったんですが、IE7でポップアップメニューのテキストが縦に表示されるのですが、どうにか設定して直るものなのでしょうか?

全くのjavascriptが初心者なのですか。。。

おそがしいと思いますがよろしくお願いします。
  • yuto
  • 2006/12/11 5:57 PM
ゆうさん、こんにちは。はじめまして。
申し訳無いですが提示された情報が少ないので、気の利いた事も言えません。

Dreadweaverの問題でしたら、以下のフォーラムで質問するor似た様な事例を探す方が良いですよ。
http://forums.adobe.co.jp/
または以下のURLから何かヒントが得られるかも知れません。
http://www.adobe.com/jp/support/dreamweaver/
http://www.adobe.com/cfusion/exchange/
  • Faro管理人
  • 2006/12/11 7:42 PM
どうもわざわざありがとうございました。

こんな質問に返信いただいて大変感謝しています。

参考させていただきます。

いまいち質問に整理がついてなかったみたいです。

ありがとうございす。
  • yuto
  • 2006/12/11 10:22 PM
はじめまして。ブラウザに幅広く対応しているドロップダウンメニューを探していてたどりつきました。
とても分かりやすく書かれていて、jsに不慣れな私でも実現することができました。ありがとうございます。

一つ質問なのですが、このリストはulを使うことは可能でしょうか?
ulにしてjsで該当しそうな箇所(といってもdl等と書かれているところ程度ですが。。)
を書き換えてみましたが、うんともすんともいわず。
可能であればulを使いたいなと思っていますので、
何かアドバイスいただけたらとてもうれしくおもいます。
  • nada
  • 2006/12/12 10:15 AM
すみません、ソースを書き忘れました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>無題ドキュメント</title>

<style type="text/css">
* { margin:0; padding:0; }

body{
font-size:13px;

font-family:'ヒラギノ角ゴ Pro W3', 'MS Pゴシック', sans-serif;
color:#4A4A4A;
text-align:center;
}

ul,ol { list-style-type:none; }

#naviarea{position:relative;}

#navi{
width:760px;
height:37px;
}

li.menu_01 , li.menu_02 , li.menu_03 ,li.menu_04{
width:127px;
list-style-type:none;
float: left;
}

li.menu_01 a , li.menu_02 a , li.menu_03 a , li.menu_04 a{
display: block;
background-color:#CC9966;
height:100%;
}

#navi .naka li{
display:none;
width: 127px;
}

#navi li:hover .naka li{
display: block;
}

#navi .naka li a{
display: block;
border-bottom: 1px solid black;
background: #fff;
padding: 3px;
text-indent:0;
}

#navi .naka li a:hover{
background-color: #ccc;
}

</style>
</head>

<body>

<div id="naviarea">
<ul id="navi">
<li class="menu_01"><a href="#">MY MENU 1</a>
<ul class="naka">
<li><a href="#">MENU 1</a></li>
<li><a href="#">MENU 2</a></li>
<li><a href="#">MENU 3</a></li>
<li><a href="#">MENU 4</a></li>
</ul>
</li>
<li class="menu_02"><a href="#">MY MENU 1</a></li>
<li class="menu_03"><a href="#">MY MENU 1</a></li>
<li class="menu_04"><a href="#">MY MENU 1</a></li>
</ul>
<script type="text/javascript" src="js/dropdownmenu.js"></script>
</div>

</body>
</html>


実際には画像を使っていますが背景色に置き換えてます。
FFやサファリはクリアできているので、あとはjsの設定だと思うのですが、いかがでしょうか。。
  • nada
  • 2006/12/12 11:43 AM
nadaさん、こんにちは。はじめまして。

>このリストはulを使うことは可能でしょうか?
はい、可能です。が、記事の冒頭でも書いている通り「サンプル」の上、DL+正規表現と言うヒネクレた方法なのでそのまま流用するのは難しいです。

記事の場合、dl:hoverでddの表示を切り替えていますが、ulの入れ子の場合、li:hoverで子のulの表示を切り替える事になります。

nadaさんのケースだと、子にulが存在するli.menu_01にclassを与えるだけで処理が可能で、
見栄えを個別に変える必要が無ければ、他のliは特にclassやIDを指定する必要はありません。

li.menu_01 ul{
display:none;
}
li.menu_01:hover ul{
display:block;
}

javascriptはこの”menu_01”を判断基準に処理するようにします。

if(document.getElementById && document.all && navigator.userAgent.indexOf("Opera")<0){
var obj = document.getElementById("navi");
for(var i=0; i<obj.childNodes.length; i++)
{
if(obj.childNodes[i].className == "menu_01"){
obj.childNodes[i].onmouseover = function(){pull(this)};
obj.childNodes[i].onmouseout = function(){pull(this)};

}
}
という感じです。

…この説明だと判り難い気がするので、明日明後日にでもulでの処理を記事にしてみます。
  • Faro管理人
  • 2006/12/12 9:40 PM
Faro管理人様

丁寧なご返答ありがとうございます。
早速jsファイル内を書き直してみたのですが、
やはりIEで出てきてくれません。
(cssのほうも

li.menu_01 ul{
display:none;
}
li.menu_01:hover ul{
display:block;
}

に書き換えました。)

jsファイル内の記述はこれで合っていますでしょうか?

if(document.getElementById && document.all && navigator.userAgent.indexOf("Opera")<0){
var obj = document.getElementById("navi");
for(var i=0; i<obj.childNodes.length; i++)
{
if(obj.childNodes[i].className == "menu_01"){
obj.childNodes[i].onmouseover = function(){pull(this)};
obj.childNodes[i].onmouseout = function(){pull(this)};

}
}

function pull(obj){
for(var i=0;i<obj.childNodes.length;i++)
if(obj.childNodes[i].nodeName.toUpperCase()=="DD")
obj.childNodes[i].style.display=obj.childNodes[i].style.display=="block"?"none":"block";
}


何度も質問を重ねてしまい申し訳ありません。
何卒よろしくおねがいいたします。
  • nada
  • 2006/12/13 10:41 AM
管理人様

はじめまして。いつも参考にさせていただいております。今回、こちらのソースを参考にプルダウンメニューを作成してみたのですが、下記のアドレスの通り、どうしても表示がうまくいきません。
z-indexも記入してみたのですが、うまく効きません。これまで色々な原因を探ってみたのですが、何が干渉しているのか現段階では全く分からず、もしアドバイスいただければと藁にもすがる思いで質問させていただきました。
お手数とは存じますが、もし思い当たる箇所、良い対処法等ご指導いただければ幸いです。
それでは、失礼します。

http://geo-labo.com/pull_menu/
  • hana
  • 2006/12/13 6:33 PM
>nadaさん
すいません、ちょっと手抜きな説明でしたね。
関数pullの2行目のDDをULに変更して下さい。これで動くかも知れません。
if(obj.childNodes[i].nodeName.toUpperCase()=="UL")


>hanaさん
こんにちは。はじめまして。
Safariで見ただけですが、#g_menuにposition:absoluteを設定する事で解決しました。
記事のstyle sheet、menu_containerの設定を試してください。

  • Faro管理人
  • 2006/12/13 7:24 PM
管理人様

おはようございます。
早速のご返答ありがとうございました。
アドバイスに従ってソースを書き替え、無事に表示可能となりました。

この度は本当にありがとうございました。
  • hana
  • 2006/12/14 10:22 AM
Faro管理人

nadaです。ご丁寧な回答をありがとうございます。
あれからULにしたりLIにしたりといろいろといじってはみたのですが、結局動かすことができませんでした。
jsの知識不足が悔やまれます。
とりあえずdlタグに直して使用させていただいています。

質問を重ねてしまいましたが、その度に丁寧なレスをいただけてうれしかったです。
今後も覗かせていただこうと思いますので、
末永く続けていっていただければうれしいです。

ありがとうございました。
  • nada
  • 2006/12/14 7:51 PM
すみません、様がぬけていました。
失礼しましたm(__;)m
  • nada
  • 2006/12/14 7:52 PM
>hanaさん
お役に立ったようですね。安心しました。
修正お疲れ様でした。

>nadaさん
うーん、駄目でしたか。怪しそうな部分をチェックしただけなのが悪かったかな…JSのエラーが出ていなければクラスの指定など違うことが原因になっているかも知れません。
ULの場合も記事にしてみましたので良ければそっちも参考にどうぞ。
http://blog.faro.main.jp/?eid=591449
  • Faro管理人
  • 2006/12/14 10:43 PM
管理人様

はじめまして、みゅうと申します。いつも参考にさせていただいております。
今回プルダウンメニューサイトに組み込むことになり、こちらのソースをそのままコピペしてを作成してみたのですが、
Win IE6.0でどうしても表示がうまくいきません。
具体的におかしい箇所というのは、jsエラーが出てしまい、メニューが展開しない(動かない)です。

色々な原因を探ってみたのですが、何が理由なのか全く検討がつかず、
もしアドバイスいただければと思いコメントさせていただきました。
お忙しいところ大変お手数お懸けしますが、よろしくお願いいたします。

jsソースはそのまま貼付けていて手は加えていません。外部リンクにして呼び出しています。
出てくるエラーというのは

ライン:5
文字:2
「'obj'はNullまたはオブジェクトではありません。」

というものです。
ご教授よろしくお願いいたします。
  • みゅう
  • 2007/03/29 8:14 PM
こんにちは、みゅうさん。はじめまして。

推測ですが、HTMLに問題があるのかもしれません。
ID"menu_containe"の中にメニューは入っていますか?
HTMLにも問題が見当たらない場合は以下のエントリーのスクリプトとHTMLも試して下さい。
http://blog.faro.main.jp/?eid=591449
  • Faro管理人
  • 2007/03/31 11:02 AM
管理者の承認待ちコメントです。
  • -
  • 2007/10/28 6:13 PM
管理者の承認待ちコメントです。
  • -
  • 2007/10/28 6:15 PM
スパムと一緒くたになってコメント頂いていた事に気付いていませんでした。
すごく申し訳ないです。すいません><;
ご覧になる事は無いと思いますが返信いたします。

> プルダウンメニューの下にswfファイルを配置を置いたところ、下に潜り込み見えなっていましたが、こちらのページで解決しました。ありがとうございます。
> ところが。、メニューの下にPDFを呼び出すようにしたところ、やはり下に潜り込み困っています。FLASHの場合と同じようにしてみたのですが、やはり下に潜り込んでしまいます。どのようにしたら解決できるでしょうか?
(管理者でも投稿されたコメントは編集する事が出来ませんので引用させて頂きました)

というご質問ですが…なるほど隠れてしまうようですね。
これはプラグインの問題だと思いますので、属性値などでは解決出来ないと思います。
乱暴な方法ですが、メニューにロールオーバーしたときだけPDFを内包しているボックス要素を動かしたり消したりするぐらいしか無さそうです。

Flashに比べAdobe Readerのプラグインは重たいので、ページ内にPDFを埋め込むのは避けてPDFへのリンクを設ける形がスマートではないでしょうか。
どうしても埋め込む必要がある場合は画像やSWF形式で書き出して埋め込む事も検討してみてください。


  • Faro管理人
  • 2008/02/16 3:27 PM
はじめまして!こんにちわ

素人ですいませんが MENU部分とドロップダウン部分をリンク画像に置き換えるには どうすればいいんでしょうか…


  • makoto
  • 2008/09/15 11:10 AM
makotoさん、こんにちは、はじめまして。
すいません、お返事が遅くなってしまいました。

画像を使う場合ですが、リンクに使う画像の大きさは全て横が100px、縦が30pxと仮定して説明します。

仮に「お問合せ」へのリンクとして、リンクの部分は
<dd><a href="リンクURL">MENU 1</a></dd>

<dd><a href="リンクURL"><img src="画像までのパス" width="100" height="30" alt="お問い合わせ" /></a></dd>


カテゴリのタイトルも画像にするなら
<dt>MY MENU 1</dt>

<dt><img src="画像までのパス" width="100" height="30" alt="カテゴリのタイトル" /></dt>
にします。

CSSは

#menu_container
{
position: absolute;
margin: 0 0 0 20px;
}
#menu_container dl
{
width: 100px; /*タイトル画像の横幅*/
margin: 0;
float: left;
font-size: 80%;
background: #369;
color: #fff;
}
#menu_container dt
{
border: none;
padding: 0;
}
#menu_container dt img
{
width: 100px; /*タイトル画像の横幅*/
height: 30px; /*タイトル画像の高さ*/
}
#menu_container dd
{
display: none;
margin: 0;
border:none;
}
#menu_container dl:hover dd
{
display: block;
}
#menu_container a
{
display: block;
border: none;
width:100px; /*リンク画像の横幅*/
height: 30px; /*リンク画像の高さ*/
}
#menu_container a img
{
width: 100px; /*リンク画像の横幅*/
height: 30px; /*リンク画像の高さ*/
border: none;
}

というような感じになります。
画像の大きさに合わせて数値を調節してみて下さい。

  • Faro管理人
  • 2008/09/22 6:49 PM
管理者の承認待ちコメントです。
  • -
  • 2009/09/29 10:13 AM
管理者の承認待ちコメントです。
  • -
  • 2012/09/25 8:40 PM
コメントする








   
この記事のトラックバックURL
トラックバック
ドロップダウンメニューを作る際、通常はJavaScriptの「onmouseover」などを使ってドロップダウンを作ることが多いと思います。 しかし、CSS2.0では本来JavaSriptに頼らなくてもドロップダウンメニューが可能なのです
  • 野良のWebメモ帳
  • 2006/11/27 12:03 PM
NASA設立50周年を期に先日リニューアルされたNASAのオフィシャルサイト「...
  • WEBマーケティングブログ
  • 2007/12/03 7:14 AM
●Javascript+CSS http://phpspot.org/blog/...
  • ギジュツメモ
  • 2008/03/31 2:23 PM

selected entries

categories

archives

recent comment

recent trackback

links

profile

search this site.

others

mobile

qrcode

powered

無料ブログ作成サービス JUGEM