jQuery ドロップダウンメニュー
ナビゲーションにマウスオーバーした際にドロップダウン式にサブメニューみたいな感じで表示してくれる jQuery のプラグインです。
ダウンロード・使い方
ダウンロード元「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指定
#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; }
こんにちは
droppy使用時に
IE6,7で、position:relative;が指定されたブロックに画像があると、絶対配置されているドロップダウンメニューが隠れてしまうという現象に出会い
色々と探していたところ、このサイトに行き着きました。
someさんの書き込み
>z-index: 100;
>を指定することで回避できました。
とのことですが、私の場合、親要素に
z-index:1;
を記述したところ、回避できました。
以下は、参考ＣＳＳとなります。
/* ローカルナビゲーション */
ul#pwed_lonv li {
padding:0px 1px 15px 0px;
position:relative; /* for droppy */
float:left;
z-index:1;
}
以上、ご参考まで。
2010年05月26日 13:58