jQuery ドロップダウンメニュー

input内のテキスト表示しfocusするjQueryプラグイン

ナビゲーションにマウスオーバーした際にドロップダウン式にサブメニューみたいな感じで表示してくれる jQuery のプラグインです。

demo page

…ここからが続き

ダウンロード・使い方

ダウンロード元「jQuery project page.

head内

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/yuga.js"></script>
<script type="text/javascript" src="js/jquery.droppy.js"></script>
<script type="text/javascript">
    $(function() {
  	  $("#nav").droppy();
    });
</script>

yuga.js は画像のロールオーバーのみで使ってます。

帯上のbackground指定

navi

#globalNavi	{ background: url(image/navi.jpg) repeat-x; height: 28px; padding-top: 7px; text-align: center; }

#nav 、#nav li 指定

忘れずにposition:relative;をかけておきましょう。

#nav { width: 900px; margin: 0 auto; position: relative; line-height:1; text-align: left; }
#nav li { list-style: none; float: left; position: relative; }

プルダウンに表示される部分共通指定

#nav ul { display: none; position: absolute; top: 29px; left: 0; }
* html #nav ul { line-height: 0; }
#nav ul li { float: none; }

#nav ul { width: 120px; }

#nav ul a { 
	display: block;
	width: 108px;
	background:#121212;
	padding: 6px;
	color: #FFF;
	border-bottom: 1px solid #FFF;
	opacity: 0.7;
	filter: alpha(opacity=70);
	zoom: 1;
	line-height: 1;
}
#nav ul a.hover { background: #444; }

※マウスオーバー時にclass="hover"とつく用になっております。

プルダウン 2段目以降の指定

#nav ul ul { top: 0; left: 121px; }

demo page

Comments

MIYA

MIYA

そもそも同じ ID を同一ページに二つ指定する事は出来ないですし、今のままでは複数設置は無理になります。

二つ設置した場合は、両方の見た目が同様であればそれぞれを class 指定に変更し

$(function() {
$("#nav").droppy();
});

こちらの指定も変更し、CSS も変更・作成すれば複数設置する事は可能かと思います。

2010年12月02日 17:40

hizirida

hizirida

はじめまして。

質問なんですが、
同ページにドロップダウンメニューを
複数設置することは可能なんでしょうか?

少し試して見たのですが
2個以上はうまく動きません。
多分スタイルシートの変更・追加等必要なんでしょうね。

もし可能であればご伝授お願いいたしますぅ。

2010年11月26日 19:50

Y.Enomoto

Y.Enomoto

こんにちは

droppy使用時に
IE6,7で、position:relative;が指定されたブロックに画像があると、絶対配置されているドロップダウンメニューが隠れてしまうという現象に出会い
色々と探していたところ、このサイトに行き着きました。

someさんの書き込み
>z-index: 100;
>を指定することで回避できました。

とのことですが、私の場合、親要素に
z-index:1;
を記述したところ、回避できました。

以下は、参考CSSとなります。
/* ローカルナビゲーション */
ul#pwed_lonv li {
padding:0px 1px 15px 0px;
position:relative; /* for droppy */
float:left;
z-index:1;
}

以上、ご参考まで。

2010年05月26日 13:58

tomy

tomy

MIYAさん
お礼が遅くなり失礼しました!
ご指摘通りの方法で解決しました。
ありがとうございます!

ですのでie8だけ指定して
filter: alpha(opacity=70);
を消すという対応を取りました。

2010年03月12日 15:43

MIYA

MIYA

tomyさんこんばんは!

ご質問の内容ですが ie8 だけ残像的なものが残ってしまいますね…

#nav ul a に指定してある filter: alpha(opacity=70); を消してみるととりあえず
現象が解消できました。

背景に透過pngが使っているならその指定はいらないのでなんとかなるかもしれません。


ですが filter: の指定はそのような現象になるのは初めて知りました><

2010年03月10日 00:56

tomy

tomy

こんばんは。
制作中のサイトにdroppyを設置していじくっている最中です。
ひとつ質問させてください。
droppyを設置したページを各ブラウザで検証したのですが、僕が見た中ではie8だけドロップダウンメニューに残像のような線が残ってしまいます。
これを回避するために、cssの背景色の指定を透過pngの背景画像に置き換えてみたのですが、改善されずでした。。
なにか手はないものでしょうか?
ご指摘いただければと思います。

2010年03月09日 22:43

MIYA

MIYA

Someさんありがとうございます!

nakaさんすみません…すっかりこの問題の事忘れてしまってました…

2009年12月09日 12:16

Some

Some

同様のトラブルでこちらにたどり着きました。

すでに解決済みかもしれませんが
IE6、IE7はz-indexの解釈に問題があるようで、
親要素のボックスに(私の場合は#header)
z-index: 100;
を指定することで回避できました。

2009年12月08日 15:12

MIYA

MIYA

nakaさんお力になれなくてすみません><

>position:relative;が指定されたブロックに画像があると、絶対配置されているドロップダウンメニューが隠れてしまうようでした
本当ですか…今ちょっと忙しくて検証する時間がないのですが、今週末あたりにでも自分の方でも一度検証してみてみますね><

2009年09月08日 18:46

naka

naka

MIYAさん

ご返信遅くなりまして申し訳ございません!
色々と検証しましたところ、内の要素で、position:relative;が指定されたブロックに画像があると、絶対配置されているドロップダウンメニューが隠れてしまうようでした。。

いろいろと粘ってみたのですが、今のところ解決策はposition:relative;の指定を外すしかないようでした。レイアウト上内でも絶対配置で表示させたい要素があったのですが、そもそものそういった設計を見直すことで解決したいと思います。

久々のコーディング仕事だったのですが、IE6、IE7はやっぱりつらいブラウザですね!
ありがとうございました!

2009年09月06日 14:58

MIYA

MIYA

nakaさんはじめまして!

まず検証して頂きたい事は今回で使っている部分#globalNaviや#nav要素で指定してるCSS以外の部分を一度コメントアウトなどをして、表示がどうなるのか見て頂きたいです。

おそらく他で指定しているul要素が今回使っている部分にも反映されているので表示がおかしくなっているものだと思われます。

2009年09月04日 10:48

naka

naka

はじめまして
現在製作中のサイトにjQuery ドロップダウンメニューを組み込んだのですが、例えば下記のようにグローバルメニューブロック以下のコンテンツ部分に画像があると、IE6、IE7でドロップダウンされるサブメニューがその画像の下に隠れてしまうようです。(IE8は未確認です)

この現象を回避する方法はございますでしょうか?何卒お力添えのほどよろしくお願いいたします。

<div id="globalNavi">
<ul id="nav">
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a>
<ul>
<li><a href="#">sub_menu1</a></li>
<li><a href="#">sub_menu2</a></li>
<li><a href="#">sub_menu3</a></li>
</ul>
</li>
<li><a href="#">menu3</a></li>
</ul>
</div>
<div id="contents">
<div><img src="hogehoge.gif" width="800" height="600"></div>
</div>

2009年09月03日 14:37

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article