jQueryを使用してのメガメニューの記述

質問

色々試してみたのですが、どうしてもわからず、
どうかお知恵をおかしください。
宜しくお願いいたします。

こちらの紹介サイトを参考に、メガメニューを作成しております。↓
http://codesign.verse.jp/jquery/2009/08/megamenu.html

メガメニューボタンにマウスオーバーしたときに、
DIVに指定しているmm-div内のものが表示されるよう指定されているのですが、
そのメニューの中でいくつかmm-divのサイズを変更したく、
それに伴いjQueryで表示させる位置の指定を複数記述したいのですが、
jQueryを勉強不足のため、どうしてもうまくいきません。

mm-divはCSSでサイズを記述しているので、
別途指定するものとして新しいDIVに指定するタグとして
mm-div2を準備しましたが、１つに連動してしまいます。

説明べたで申し訳ありませんが、
mm-divとmm-div2それぞれに別の位置が指定できる記述に仕方を教えてください。

$(function(){

var target=$("div#megamenu");
var tli=$("ul#mm-ul > li.mm-li");
var tdi=$("div.mm-div",tli);
/*
if($.browser.msie && ($.browser.version<8)){
var th=;
}else{
var th=0;
}
*/

tli.hover(
function(){
$("*:animated",tdi).hide();
$(this).animated();
},
function(){
tdi.hide();
}
);

$.fn.animated=function(){
var posx=$(this).offset().left+tdi.width();
var posbase=tli.offset().left+target.width();

/*地味に計算するための場所orz
$("p#showpos").text(posx);
$("p#winwidth").text(posbase);
*/

tdi.hide();

if(posx>posbase){
$(this).children()
.css("left",-posx+target.width())
.css("top","25px")
.fadeIn("fast");
}else{
$(this).children()
.css("left","5px")
.css("top","25px")
.fadeIn("fast");
}

return $(this);
}

});

回答No.1

fujillin · ベストアンサー

回答がないみたいなので…

＞１つに連動してしまいます。
div要素の幅を計算するのに、tdi.width()を使っていますが、tdiは各メニュー下のdivの配列なので、widthの計算にはその最初の要素が使用されるようです。
（作者さんは、CSSでdivの幅を一律にするつもりなのでしょうから、これで問題はないのですが）
このために、いつでも最初の要素の幅が計算に使われることになっているので、この部分の計算にそれぞれの要素の幅を参照するようにしてあげればよろしいかと。
一方、ご提示のスクリプトでは、表示する時に毎回位置の計算をするようになっていますが、divのサイズが動的に変化するのでもない限り毎回計算する必要はなく、最初に1度だけ計算するようにしたほうが効率的です。
そうすることで、animated()というメソッドの追加も必要なくなるので、イベント処理は単に対象divをfadeInするだけで済むようになると思われます。

＞mm-divとmm-div2それぞれに別の位置が指定できる記述に仕方を教えてください。
サイズを指定したいのか位置を指定したいのかで変わってきますが、それぞれをCSSでちゃんと指定するのなら、スクリプトで位置を調整している部分をはずしてしまえばよいのでは？
（基本の位置は基本のCSSで指定しておいて、特殊なものだけ個別指定するといった感じです。現状はCSSに指定が無いみたいなので、基本の部分を追加する必要はありますが）
表示/非表示の制御だけなら以下で済むでしょう。

（全角空白は半角に）
$(function(){
　var tli=$("ul#mm-ul > li.mm-li");
　var tdi=$("div.mm-div",tli);

　tli.hover(
　　function(){
　　　tdi.hide();
　　　$(this).children("div.mm-div").fadeIn("fast");
　　},
　　function(){
　　　tdi.hide();
　　});
});

お礼

ご回答ありがとうございます！
効率のよいイベント処理教えてくださってありがとうございます！

＞この部分の計算にそれぞれの要素の幅を参照するようにしてあげればよろしいかと。

mm-divとmm-div2はCSSで幅だけ指定、jQueryで位置を指定するには
どのようにしたらいいのでしょうか…；；
要素の幅を参照させるとありますが、記述に仕方がわからず…
勉強不足で本当に申し訳ないのですが、教えていただけないでしょうか。

mm-divを440pxとmm-div2を800pxでCSSに下記、
表示させる位置を思った位置になるよう指定したいのですが、
CSSでうまくマイナス位置に指定ができなかったので、
jQueryで位置を指定している箇所を
.css("left","-400px")
のように書いたら指定したら思った位置にできたので、
こちらを利用させていただこうと思ったのですが…
イメージとして下記のように左側にmm-div、mm-div2を表示させるイメージです。

mm-divを指定したサブメニュー１ 　　　　メニュー１（mm-li）
mm-divを指定したサブメニュー２ 　　　　メニュー２（mm-li）
mm-div2を指定したサブメニュー３　　　　メニュー３（mm-li）

#megamenu{
margin:0;
width:700px; /*ナビゲーターの最大横幅です。*/
}
ul#mm-ul{
height:20px;
padding:10px;
padding-left:0;
margin:0;
}

ul#mm-ul li.mm-li{
position:relative;
display:inline;
cursor:pointer;
}

ul#mm-ul li.mm-li div.mm-div{
display:none;
position:absolute;

/* -- divのサイズ指定 -- */
width:440px;
padding:10px;
border:solid 3px #000;
/*-----------------------*/

ul#mm-ul li.mm-li div.mm-div2{
display:none;
position:absolute;

/* -- divのサイズ指定 -- */
width:800px;
padding:10px;
border:solid 3px #000;
/*-----------------------*/

補足

すみません、CSSでの位置指定がわかりました！
教えていただいた記述で解決いたしました。
本当にありがとうございます！