プルダウンボタン実装後ロールオーバーしない親ボタン
お世話になります。
連日CSSとJavaScriptのことで質問させていただいている者です。
皆様のご親切で、すこしずつ理想のCSSを記述することができています、ありがとうございます。
さて、またボタンのドロップダウン機能関連のCSSのことでひとつ疑問が出てきましたので、皆様のお知恵を再度拝借させていただきたく質問させていただきました。
現在添付画像のように、Webサイトのメニューボタンにマウスオンすると下部にダウンメニューが飛び出す仕様を作りたいと考えています。親ボタンはカーソルオンさせるとロールオーバーさせたいと、http://www.kyosuke.jp/yugajs/で配布されているyuga.jsというファイルを利用させていただいております。
ドロップダウンボタンはきちんと表示されるようになったのですが、問題はそのドロップダウンボタン機能を記述した親ボタンのみ、ロールオーバーしなくなってしまいました。他のボタンは通常通りロールオーバーしてくれます。できたら親ボタン、またドロップダウンボタン領域にカーソルオンしている時は親ボタンは常にロールオーバーさせていたいと思っています。そのような仕様にするにはどうしたらいいでしょうか。どうかアドバイスいただけたらうれしいです、よろしくお願いします。
HTML---
<nav id="global_nav">
<ul>
<li><a href="index.html"><img src="images/button_top.gif" alt="TOPボタン" class="btn"/></a></li>
<li><a href="002.html"><img src="images/button_a.gif" alt="Aボタン" class="btn"/></a>
<ul>
<li><a href="007.html">サブページ01</a></li>
<li><a href="008.html">サブページ02</a></li>
<li><a href="009.html">サブページ03</a></li>
</ul>
</li>
<li><a href="003.html"><img src="images/button_b.gif" alt="Bボタン" class="btn"/></a></li>
<li><a href="004.html"><img src="images/button_c.gif" alt="Cボタン" class="btn"/></a></li>
<li><a href="005.html"><img src="images/button_d.gif" alt="Dボタン" class="btn"/></a></li>
<li><a href="006.html"><img src="images/button_e.gif" alt="Eボタン" class="btn"/></a></li>
</ul>
</nav>
CSS---
#global_nav {
float:right;
width:720px;
margin:0;
padding-right:15px;
}
#global_nav img {
float:left;
display:block;
border:0;
}
#global_nav ul {
list-style:none;
margin:0;
padding:0;
}
#global_nav li {
min-width:120px;
white-space:nowrap;
float:left;
}
#global_nav ul ul {
display:none;
position:absolute;
z-index:10;
padding-top:52px;
}
#global_nav ul ul a {
display:block;
font-family:"ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", sans-serif;
font-size:0.75em;
color:#FFF;
background-image:url(../images/dawnmenu_button.gif);
height:25px;
width:120px;
text-decoration:none;
text-align:center;
padding-top:5px;
}
#global_nav ul ul a:hover {
background-image:url(../images/dawnmenu_button02.gif);
}
#global_nav li li {
clear:left;
position:relative;
width:100%
}
#global_nav ul li:hover > ul {
display:block;
}
Java Script(yuga.js)---(一部抜粋です)
$(function() {
$.yuga.rollover();
$.yuga.externalLink();
$.yuga.thickbox();
$.yuga.scroll();
$.yuga.tab();
$.yuga.stripe();
$.yuga.css3class();
});
//ロールオーバー
rollover: function(options) {
var c = $.extend({
hoverSelector: '.btn, .allbtn img',
groupSelector: '.btngroup',
postfix: '_on'
}, options);
//ロールオーバーするノードの初期化
var rolloverImgs = $(c.hoverSelector).filter(isNotCurrent);
rolloverImgs.each(function(){
this.originalSrc = $(this).attr('src');
this.rolloverSrc = this.originalSrc.replace(new RegExp('('+c.postfix+')?(\.gif|\.jpg|\.png)$'), c.postfix+"$2");
this.rolloverImg = new Image;
this.rolloverImg.src = this.rolloverSrc;
});
//グループ内のimg要素を指定するセレクタ生成
var groupingImgs = $(c.groupSelector).find('img').filter(isRolloverImg);
//通常ロールオーバー
rolloverImgs.not(groupingImgs).hover(function(){
$(this).attr('src',this.rolloverSrc);
},function(){
$(this).attr('src',this.originalSrc);
});
//グループ化されたロールオーバー
$(c.groupSelector).hover(function(){
$(this).find('img').filter(isRolloverImg).each(function(){
$(this).attr('src',this.rolloverSrc);
});
},function(){
$(this).find('img').filter(isRolloverImg).each(function(){
$(this).attr('src',this.originalSrc);
});
});
//フィルタ用function
function isNotCurrent(i){
return Boolean(!this.currentSrc);
}
function isRolloverImg(i){
return Boolean(this.rolloverSrc);
}
お礼
たくさん教えていただいてありがとうございました。 ボタン以外にも参考になるものがいっぱいあって、とっても助かります。 早速勉強させていただきます！