jQueryプルダウンメニュー個別着色
- jQueryを使用してプルダウンメニューの個別着色を行いたいです。
- CSSクラス名ごとにスクリプトを書かなければならないのでしょうか？
- $('.btn')の部分を省略できるのか知りたいです。
- ベストアンサー
jqueryプルダウンメニュー個別着色
すみません。デザイナーでjqueryの配布しているものをお借りしているのですが、 プルダウンメニューで、メニューの色を個別に変えたいのですが、 CSSクラス名ごとに、下記のスクリプトを書かないといけないのでしょうか？ それとも、$('.btn')のところを、＄（'.btn','.btn2','.btn3')とかって省略はできますか？ 基本を解ってなくてすみません； どうぞ宜しくお願い致しますm（＝＝）m <script type="text/javascript"> $(function(){ $('.btn').hover(function(){ var btn = $(this).find('li').length; $(this).animate({'height':24 * btn + 'px'},'fast'); },function(){ $(this).animate({'height':'24px'},'fast'); }); }); </script>
- powbluesky
- お礼率90% (29/32)
- JavaScript
- 回答数6
- ありがとう数5
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
リンクによって個別に色を変えたい場合は、属性セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html#attribute-selectors )で指定するのが楽です。いちいちidを振るのは馬鹿げています。後々メンテナンスで困るのが目に見えている。 なお、製作する立場になるとホムペなんて変な略語は使わないようにしましょう。 ウェブサイトとかウェブページとか・・ ホームページとは、ブラウザを最初に起動した時に表示されるホーム(基点)のページです。「私はホームページはgoogleにしています。」と使います。 ホームページ - Wikipedia( http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8 ) まだ、始めたばかりのようですから、アドバイスを まず基礎となる仕様書 HTML 4.01 仕様書邦訳( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html ) CSS 2.1仕様（日本語訳）( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html ) は一応、目を通しておきましょう。巷には本当にたくさんの？？？？のマニュアルサイトがたくさんあります。基本を身につけていれば、無駄なおかしなものを身につけて、本堂に戻るのに苦労するなんて事は減ります。 DIVやSPANはclassやidを併用して文書構造を補完するためのものでデザインのためじゃない。その文書構造に基づいてスタイルシートでデザインする。という基本中の基本すら説明されていないことが多い。
その他の回答 (5)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
私の示したサンプル、ゆっくりと開くはずです。 スタイルシートのこの三行がそれです。 transition-property:height;/* 高さを時間で制御する。 */ transition-duration:1s;/* 一秒 */ transition-timing-function:ease-in-out;/* 変化の仕方 */ ＞普通、あのような、サンプルはプロの方は使わないってことでしょうか～？ ど素人なクライアント受けはよいのですが(苦笑)。あまり使うとプロ間では馬鹿にされます。 最後に、サンプルコード全体を上げて置きますが、試されたら分かるように印刷には適用されませんね。代わりに印刷ではリンク先が表示されます。 なによりも、HTMLもCSSもメンテナンスが楽なのは分かりますよね。デザインを変更する時にHTMLを弄(いじ)くる必要ありませんし、スタイルシートも慣れればHTML見なくても良い。 ★タブは＿に置換してあるので戻す。 ★リキッドでスマホにも対応 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> <style type="text/css"> <!-- body{line-height:1.6em;} h1,h2,h3,h4,h5,h6 p{margin:0;} p{text-indent:1em;} --> </style> <style type="text/css" media="screen"> <!-- html,body{margin:0;padding:0;} div.header,div.section,div.footer{width:90%;min-width:470px;max-width:900px;margin:0 auto;padding:5px;} div.section div.section{min-width:0;width:auto;} div.header div.nav ul{ list-style:none; margin:0 auto;padding:0; width:80%; line-height:30px; text-align:center; font-size:0; z-index:100; } div.header div.nav ul li{ display:inline-block; margin:0;padding:0; width:20%; position:relative; height:30px; font-size:16px; } div.header div.nav ul li ul{ display:block; overflow:hidden; width:100%; transition-property:height; transition-duration:1s; transition-timing-function:ease-in-out; position:absolute; height:0; top:30px;left:0; } div.header div.nav ul li:hover ul{ height:120px; } div.header div.nav ul li ul li{ display:block; width:100%; } div.header div.nav li a{ display:block; width:100%; height:100%; text-decoration:none; } div.section{position:relative;} div.section div.aside{ position:absolute; top:0;right:0; width:180px;height:100%; font-size:0.8em; } div.section h2,div.section p{margin-right:190px;} div.section div.section p{margin-right:5px;} /* 色を指定 */ body{background-color:silver;} div.header,div.section,div.footer{color:white;background-color:gray;} div.header div.nav ul li a:link{color:yellow;background-color:silver;} div.header div.nav ul li a:hover{background-color:black;} div.header div.nav ul li a[href="/Books/2.html"]{background-color:green;} div.header div.nav ul li a[href="/Books/2.html"]:hover{background-color:lime;} div.header div.nav ul li a[href="/Profile"]+ul li a{background-color:red;} div.section div.aside{background-color:white;color:black;} --> </style> <style type="text/css" media="print"> <!-- a:after{content:"(http://hoge.com"attr(href)")";} --> </style> </head> <body> ＿<div class="header"> ＿＿<h1>ページタイトル</h1> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li><a href="/">Top</a></li> ＿＿＿＿<li><a href="/Books">Books</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="/Books/1.html">Book1</a></li> ＿＿＿＿＿＿<li><a href="/Books/2.html">Book2</a></li> ＿＿＿＿＿＿<li><a href="/Books/3.html">Book3</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><a href="/Products">Products</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="/Products/1.html">Product1</a></li> ＿＿＿＿＿＿<li><a href="/Products/2.html">Product2</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><a href="/Profile">Profile</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="/Profile/info.html">Infomation</a></li> ＿＿＿＿＿＿<li><a href="/Profile/formMail.html">ContactUs</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<div class="section"> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>本文項記事</p> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<h3>関連情報</h3> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
jqueryには無関係です。firebugで調べたらお分かりのようにCSSで色は ul.nav li:hover { background: none repeat scroll 0 0 #333; cursor: pointer; } と書かれていますよ。 そもそも、この程度のプルダウンにjquery使用するのは問題です。 javascriptが無効だとメニュー開きません。下記でも最初に否定されている。デザイナーと自称されるなら、基本的な事です。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから Lynx などのテキスト ブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。JavaScript、Cookie、セッション ID、フレーム、DHTML、Flash などの特殊な機能が使用されているためにサイトの一部がテキスト ブラウザで表示されない場合、検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［ウェブマスター向けガイドライン（品質に関するガイドライン） - ウェブマスター ツール ヘルプ( https://support.google.com/webmasters/answer/35769?hl=ja#2 )］より <div class="header"> <h1>ページタイトル</h1> <div class="nav"> <ul> <li><a href="/">Top</a></li> <li><a href="/Books">Books</a> <ul> <li><a href="/Books/1.html">Book1</a></li> <li><a href="/Books/2.html">Book2</a></li> <li><a href="/Books/3.html">Book3</a></li> </ul> </li> <li><a href="/Products">Products</a> <ul> <li><a href="/Products/1.html">Product1</a></li> <li><a href="/Products/2.html">Product2</a></li> </ul> </li> <li><a href="/Profile">Profile</a> <ul> <li><a href="/Profile/info.html">Infomation</a></li> <li><a href="/Profile/formMail.html">ContactUs</a></li> </ul> </li> </ul> </div> </div> ※多分このように、「id属性及び class属性と併用することで、文書に構造を付加( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」してマークアップされていると思います。HTML5では<header></header><nav></nav>になります。 それをスタイルシートでデザインしていけば、検索エンジンは無論、スタイルシートだけ変えるなりでスマホもフィーチャホンも印刷にも対処できる。 色は、セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html#pattern-matching )を使ってお好きに設定すればよい。順番や項目数が変わっても使えるしね。 <style type="text/css" media="screen"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;} div.header div.nav ul{ list-style:none; margin:0 auto;padding:0; width:80%; line-height:30px; text-align:center; font-size:0; } div.header div.nav ul li{ display:inline-block; margin:0;padding:0; width:20%; position:relative; height:30px; font-size:16px; } div.header div.nav ul li ul{ display:block; overflow:hidden; width:100%; transition-property:height; transition-duration:1s; transition-timing-function:ease-in-out; position:absolute; height:0; top:30px;left:0; } div.header div.nav ul li:hover ul{ height:120px; } div.header div.nav ul li ul li{ display:block; width:100%; } div.header div.nav li a{ display:block; width:100%; height:100%; text-decoration:none; } /* 色を指定 */ div.header div.nav ul li a:link{color:white;background-color:silver;} div.header div.nav ul li a:hover{background-color:black;} div.header div.nav ul li a[href="/Books/2.html"]{background-color:green;} div.header div.nav ul li a[href="/Books/2.html"]:hover{background-color:lime;} div.header div.nav ul li a[href="/Profile"]+ul li a{background-color:red;}
お礼
すみませ～ん； 丁寧にサンプル提示ありがとうございます。 CSSで個別に形や色をつけたりはできるんですけど、 プルダウンメニューのあの滑らかな動きを取り入れたく、 そこをjqueryの部分とどう対応させたらいいのかが解らないのですぅ（；；） クラスに対して、ひとつずつ、scriptいれるととっても長くなっちゃうので 嫌かなぁと。。。 でも、メニューがでないと困りますね（汗 普通、あのような、サンプルはプロの方は使わないってことでしょうか～？ 3作目のホムペなので試行錯誤してます（＾＾；
- hitomura
- ベストアンサー率48% (325/664)
> btnってクラス名はいけないのですね； 異論はあるとは思いますが、自分は btn という名前はあっても問題ないと思います。 # 自分が新たにクラス名を付けられるなら menu_list とかいう感じでそのクラス名の意図を一目で理解できるものにしますが。 自分が問題があると言っているのは、btn と同じ動作・性質を持つものに対して btn2, btn3,... といった名前を付けることです。それはあなたが id とクラスを混同していることの現れです。 id とクラスの使い分けについてもっと詳しい方が詳細な回答をなさると思いますが、とりあえず検索で見つかった以下のページをお読みください。 http://csspro.digitalskill.jp/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/css/css-id-class-%E9%81%95%E3%81%84/
お礼
なるほど。 では、画像等のボタンであれば、btnってクラス名はつけてもいいということですね。 私が混同したのはメニューリストをボタンだと思っていたことですね（汗 いつもはナビをfireworksで作っていたのですが、同じ動作ならjjqueryにしてみようと思って。 見た目が同じでもfireworksならボタンって名前ですから（＾＾； いろいろ誤解があるみたいです（汗 大変勉強になります。 ありがとうございましたm（＝＝）m
- hitomura
- ベストアンサー率48% (325/664)
> ボタンに個別に色を付ける つ nth-child() https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child 念のために言っておきますが、btn2 とかいうクラス名を作ってはいけません。それはクラスの意味を誤解したデザインです。
お礼
ご参考ありがとうございます☆ ちょっとハードルが高いですが、がんばってみます～（＾＾； btnってクラス名はいけないのですね； 多用してました（汗 ご指摘ありがとうございましたm（＝＝）m
- hitomura
- ベストアンサー率48% (325/664)
すみませんが、この中に色の指定や変更を行っているところはありません。 おそらく JavaScript/jQuery の方ではなく CSS の方にメニューの色指定を行っている個所があるのではないでしょうか。
補足
すみません； '.btn'が、CSSのクラス名なので、li タグにクラスをそれぞれ与えて色を付けるのですが、 jqueryの仕掛けを動かすために、＄の中にクラス名を入れてあげないといけないようなのです。 なので、ボタンに個別に色を付けると先程のスクリプト数行分が、 ボタンの数だけ書かないといけないので分量が多くなってしまうなと思って； わかりにくくてすみません；宜しくお願いしますm（＝＝）m 以下見本のページでこれをメニューごとに色分けしたいのです； http://zxcvbnmnbvcxz.com/demonstration/jqnav.html
関連するQ&A
- jQueryでプルダウンメニュー
jQueryでプルダウンメニューを作ろうと思いまして、 とりあえず、リストにカーソルを合わせるとネストしたリストが表示されるようにしてみましたが、 うまく動きません。どうしてでしょうか？ ソースです↓ <!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"> </script> <script type="text/javascript"> google.load("jquery", "1"); </script> <script type="text/javascript"> $(function(){ $(ul li).hover( function(){ $(this).children(ul).show();}, function(){ $(this).children(ul).hide();} ); }); </script> </head> <body> <ul> <li>MENU <ul style="display:none;"> <li>sub-MENU1</li> <li>sub-MENU2</li> </ul> </li> </ul> </body> </html>
- ベストアンサー
- JavaScript
- jqueryでのプルダウンメニューについて
jqueryでのプルダウンメニューについて こんにちは。 現在私はWEBサイトを製作中です。 メインメニューにプルダウンをつけたいのですが、うまくいきません。 メニューはロールオーバーでの表示（CSSでやってます）です。 slideDownを使用しているのですが、 マウスオーバー時にslidDownで表示された、 サブメニューの背景が、上の要素の背景になってしまいます。 つまり、下のコードでいくとid="sub"の背景がそのまま clas="sub"の"li"要素の背景になってしまうということです。 何か対策はありますでしょうか？ html <div id="head"> <ul id="globalnavi"> <li id="gh"><a href=".">メニュー</a> <ul class="sub"> <li><a href="">サブメニュー</a></li> </ul> </li> </ul> </div> <div id="main"> </div> jquery $(function(){ $("ul.sub").hide(); $("ul#globalnavi>li").hover(function(){ $("ul:not(:animated)", this).slideDown();}, function(){$("ul.sub",this).slideUp();}); }); CSS #globalnavi a{ background-image : url(../img/navi.png); background-repeat : no-repeat; display : block; width : 160px; height : 36px; color : #333333; text-decoration : none; line-height : 36px; } #header #globalnavi li { list-style-type : none; float : left; width : 160px; position : relativ; } #header #globalnavi { clear : both; width : 960px; line-height : 36px; overflow : hidden; position : relative; text-align : center; display : block; } ul,li{ margin:0; padding:0; } .sub li{ float : none; background-color : #FFF; } #gh a{ background-position :0 0; } #gh a:hover{ background-position :0 -36px; } ロールオーバー自体はうまくいっています。 他にプルダウンの方法あるよ、などありましたら教えてください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jQuery プルダウンメニュー
プルダウンメニューの一部で行き詰っています。 メニュー１のサブメニューが開いている状態で、メニュー２をクリックした時 メニュー１のサブメニューが閉じるようにする(その逆パターンも含む)。 サブメニューにカーソルがある時、メニューはhoverさせないようにする。 ▼html----------------------------------------- <ul id="gNav"> <li>メニュー1 <ul> <li><a href="">サブメニュー1-1</a></li> </ul> </li> <li>メニュー2 <ul> <li><a href="">サブメニュー2-1</a></li> <li>サブメニュー2-2 <ul> <li><a href="">サブメニュー2-2-1</a></li> <li><a href="">サブメニュー2-2-2</a></li> <li><a href="">サブメニュー2-2-3</a></li> </ul> </li> </ul> </li> <li><a href="">メニュー3</a></li> </ul> ▼jQuery----------------------------------------- $(function(){ $("#gNav > li").click(function(){ $(this).children("ul").toggle(); }); $("#gNav > li > ul > li").mouseenter(function(){ $(this).children("ul").show(); }).mouseleave(function(){ $(this).children("ul").hide(); }); $("#gNav > li").hover(function(){ $(this).css("background-color","#ff9900"); },function(){ $(this).css("background-color","#ffcc00"); }); $("#gNav > li > ul > li").hover(function(){ $(this).css("background-color","#99cc66"); },function(){ $(this).css("background-color","#669933"); }); $("#gNav > li > ul >li > ul >li").hover(function(){ $(this).css("background-color","#dddddd"); },function(){ $(this).css("background-color","#eeeeee"); }); }); 宜しくお願いします。
- 締切済み
- JavaScript
- JQUERYについて教えてください。
JQUERYについて教えてください。 readyがDOMを読み終わってから実行しろという意味は分かったのですが、 あったりなかったりするfunction()はどんな意味なのでしょうか？ function(){ $(this).stop().animate({'marginBottom':'60px'},150); },function(){ $(this).stop().animate({'marginBottom':'0px'},120); こちらにあるのですがメソッドに一個必須なのでしょうか？ 例 <script type="text/javascript"> $(document).ready(function(){ $('div#goto_top').hover( function(){ $(this).stop().animate({'marginBottom':'60px'},150); },function(){ $(this).stop().animate({'marginBottom':'0px'},120); </script>
- ベストアンサー
- JavaScript
- jQueryを使ったアコーディオンメニュー
現在、色々なサイトを見ながら、jQueryを使用した アコーディオンメニューを作成しています。(かなりの初心者です。) リンク先をクリックして、ページが移動した際に、 メニューの開いた状態が保持されるようにしたいのですが、 どうすれば良いのかわからず困っています。 //////////////////////////////////////////////// <script type="text/javascript"> <!-- var $j = jQuery; $j(function(){ $j(".acc").each(function(){ $j("a.open", this).each(function(index){ var $this = $j(this); if(index >= 0) $this.next().hide(); $this.click(function(){ var params = {height:"toggle"}; $j(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); return false; }); }); }); }); //--> </script> html部分 <ul> <li>ABC <ul> <li>A</li> <li>B</li> <li>C</li> </ul> </li>... </ul> //////////////////////////////////////////////// ↑このような感じで表記しています。 どなたかお詳しい方、ご教示よろしくお願いします。
- 締切済み
- JavaScript
- jQueryでドロップダウンメニューができない
jQueryの参考書をみながらドロップダウンメニューを実装しようとしたのですが うまくいきません。 締切が迫って焦っております。 <ul class="main"> <li><a href="index.html">メインA</a></li> <li><a href="concept.html">メインA</a></li> <li><a href="service.html">メインA</a> <ul class="sub"> <li><a href="">サブ1</a></li> <li><a href="">サブ2</a></li> <li><a href="">サブ3</a></li> <li><a href="">サブ4</a></li> <li><a href="">サブ5</a></li> </ul> </li> <li><a href="faq.html">メインA</a></li> <li><a href="access.html">メインA</a></li> </ul> ｃｓｓは .main { clear:both; width:830px; height:42px; margin:0 auto; list-style-type:none; } ul .main li { width:166px; height:42px; float:left; position:relative; background:url(../../img/index/btn.png); } .main li a { display:block; width:100%; height:100%; padding:10px 0 0 40px; font-size:14px; font-weight:bold; color:#333333; text-decoration:none; line-height:1.5em; } ul .sub{ display:none; } scriptは <script type="text/javascript"> $(function(){ $("ul.main li").hover(function(){ $(">ul:not(:animated)",this).slideDown("fast"); }, function(){ $(">ul",this).slideUp("fast"); }) }) </script> です。いろいろ試行錯誤したのですがドロップダウンメニュ－が表示されず 困っています。何か見落としがあるのでしょうか。よろしくお願いいたします。
- ベストアンサー
- HTML
- 左メニューにプルダウンメニューを適用したい
左メニューにプルダウンメニューを適用したい 全くの初心者なのですが、質問失礼します。 http://www.stone-m.com/ このサイト様の左ショップメニューのように縦に展開していくショップメニューを作りたい と考えております。 （このサイト様ではクリックで展開しますがマウスオーバーで展開する形で） いろいろなスクリプトのサンプルを探しましたが横型が多くて、どれもピタリときません。 こちらのアコーディオンメニューでもやってみました。 次のマウスオーバーに行ったときに今まで展開していたものが閉じるので、 閉じないようにしたいです。 （上からなぞって見やすいように） var j$ = jQuery; j$(function(){ j$(".acc").each(function(){ j$("li > a", this).each(function(index){ var $this = j$(this); if(index > 0) $this.next().hide(); $this.mouseover(function() var params = {height:"toggle", opacity:"toggle"}; j$(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); return false; }); }); }); }); scriptのサンプルか、上記を修正して活用する方法があれば教えていただけないでしょうか。 どうぞよろしくお願いします。
- ベストアンサー
- JavaScript
- jqueryで作ったアコーディオンメニューの挙動
jQuery初心者です。 http://triplexxx.jp/archives/150 こちらのサイトを参考にアコーディオンメニューを作成しました。 スムーズなスライドのメニューは出来たのですが、 どのメニューもリンクが効きません。 return falseをreturnに変えると効くようになりますが、 当然のことながらページのトップに遷移してしまいます。 どなたか解決策をご存知の方がいらっしゃいましたらご教授下さい。 いちお自分が書いたコードを載せておきます =================================================== var j$ = jQuery; j$(function(){ j$(".acc").each(function(){ j$("li > a", this).each(function(index){ var $this = j$(this); if(index > 0) $this.next().hide(); var params = {height:"toggle", opacity:"toggle"}; $this.click(function(){ j$(this).next().animate(params, {duration:"fast"}).parent().siblings().children("ul:visible").animate(params, {duration:"fast"}); return; }); }); }); }); ===================================================
- ベストアンサー
- AJAX
- メニューボタン画像のロールオーバー時の処理について
以下のスクリプトを用いてドロップダウンメガメニューを作成しています。 jQuery MegaMenu Plugin http://www.geektantra.com/2010/05/jquery-megamenu-2/ このメニューのボタンを画像にし、ロールオーバー時には透過して背景が見えるようにしたいと考えています。 --------------------------------------- <script type="text/javascript" src="/_js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/_js/jquery.megamenu.js"></script> <script type="text/javascript"> $(function() { .find('img.btn').hover( function(){ $(this).stop().animate({'opacity' : '0'}, 200); }, function(){ $(this).stop().animate({'opacity' : '1'}, 500); } ); }); </script> <ul id="megamenu"> <li> <a><img src="../_images/btn_01.jpg" alt"ボタン1" class="btn"/></a> <div>コンテンツA</div> </li> <li> <a class="mm-item-link-hover"><img src="../_images/btn_02.jpg" alt"ボタン2" class="btn"/></a> <div>コンテンツB</div> </li>↑※このメニューにロールオーバーしている場合、class="mm-item-link-hover"がaに追加される。 <li> <a><img src="../_images/btn_03.jpg" alt"ボタン3" class="btn"/></a> <div>コンテンツC</div> </li> </ul> ------------------------------------- 上記のように記述して、ボタン画像にロールオーバーするとドロップダウンメニューが出現、さらにそのボタン画像が透過し、背景が見えるようにできました。 しかし、画像からマウスをおろしてドロップダウンメニューに移動すると透過が戻ってしまいます。 jquery.megamenu.jsの処理で、ドロップダウンメニューにロールオーバーしている間、class="mm-item-link-hover"がaに追加されています。 これを利用して、a.mm-item-link-hoverのなかのimg.btnを透過GIFに置き換えたいと思いましたが、うまく行きません。 【追加したスクリプト】 $(function() { $("a.mm-item-link-hover").each(function() { $("img.btn").attr("src", "/img/blank.gif"); }); }); 上記の処理の方法は、考え方としては正しいでしょうか？ また、その場合のスクリプトはどのように書けばよろしいでしょうか？ ご教授頂けると非常に助かります。
- ベストアンサー
- JavaScript
- アメブロでjquaryを使ったメニューが機能しない
アメブロでヘッダーにドロップダウンのメニューを設置しようとしていて 色々なサイトを参考にしてやっていますが、なかなかうまくいかなくて困っています。 今現在の状況はマウスon、off時に画像が切り替わるだけで 孫メニューはおろか子メニューすら降りてきません…。 どこか記述などでおかしい点がありましたら教示よろしく願います。 －－－－－－－－－－－－以下CSS編集の最後に記述してます－－－－－－－－－－－ /* その他、拡張があれば記述 */ #headermenu{ margin:10px auto; width:720px; position:absolute; top:200px; left:20px; } ul.menu li{ float:left; width:180px; height:35px; background:url("ここにマウスoff時の画像のURLを入れてます"); position:relative; } ul.menu li a{ display:block; width:100%; height:100%; position:relative; } ul.menu li a:hover{ background:url("ここにマウスon時の画像のURL入れてます"); } ul.sub{ display:none; } ul.sub li{ float:none; } ul.sub li ul.sub{ position:absolute; left:180px; top:0; } ul.menu{ zoom:1; } ul.menu:after { height:0; visibility:hidden; content:"."; display:block; clear:both; } －－－－－－－－－－－フリープラグイン－－－－－－－－－ <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load('jquery', '1.6.2');</script> <script type="text/javascript">(_JQ162_=jQuery)(function(){$=jQuery=_JQ162_;});</script> <script> $(function(){ $("ul.sub").hide(); $("ul.menu li").hover(function(){ $(">ul:not(:animated)",this).slideDown("fast"); }, function(){ $(">ul",this).slideUp("fast"); }); }); </script> －－－－－－－－－－－－フリースペース－－－－－－－－－－－－ <div id="headermenu"><ul class="menu"><li> 字数の関係で省略させてもらいます。 </li></ul></div> ※cssのmenuと書かれている部分をmenusみたいに違ったものに変えると 縦メニューになってしまいますが、マウスonでメニューが降りてはくるので フリースペースは合ってるのかな？と思ったので省略させてもらいました。
- ベストアンサー
- ブログ
お礼
ORUKA1951さまm（＝＝）m 早速やってみました。確かにjqueryなど入れなくてもゆっくり表示されますね。 ○○入門ってページはよく利用させて頂いておりますm（＝＝）m ORUKA1951さんが私の作ったページをみたら失神するかもしれません。。。 いままではとりあえず形にするだけで精一杯だったので、 基本を押さえて綺麗なソースのかけるようになりたいとおもいます♪ サンプル、検索等ありがとうございました☆