- ベストアンサー
jQueryでメニューの開閉スライド
fujillinの回答
- fujillin
- ベストアンサー率61% (1594/2576)
ANo4です。 CSSはあまりよくわからないのですが… ＞・カテゴリや機能の名称を縦中央揃えにしたいです 縦方向の中央配置はHTMLの性格上少々面倒だと思いますが、いくつかの方法が考え出されているようです。 http://www.bing.com/search?q=CSS+%E4%B8%8A%E4%B8%8B%E4%B8%AD%E5%A4%AE&src=IE-SearchBox&FORM=IE8SRC 概ね、内部のboxを中央配置する方法か、vertical-alignを利用可能なtable-cell（IEは不可）を利用する方法のようです。 表示する文字列部分を要素として独立させておけば、上記の方法が利用できると思いますが、現状のHTMLそのままだと難しそうな気がします。（少し構成を変えれば可能でしょう。） 文字列が必ず1行で納まるものという条件下であれば、line-heightを指定する方法とかpaddingで調整してしまうとかできそうなので、現状のままでも比較的簡単に実現できるのではないかと想像します。（メニューということなので、この方法でいけるのではないでしょうか？） ＞ウィンドウサイズを超えて描画すると階層が崩れるのですが～～ inline要素としてレイアウトしていますので、改行と同じことが起きます。（floatでも同様ですね） 事前に何階層あるかはわかっているはずですので、最上位のUL又はその外側のDIVの幅を指定して、全体の横幅を確保しておくことで予定通りの表示になるものと思います。
関連するQ&A
- 【jQuery】クリックで開閉するメニュー
今、クリックで開閉するプルダウンメニューを以下のように作っているのですが 【HTML】 <div class="menu">メニュー</div> <div class="a"> <p>カテゴリー１</p> <p>カテゴリー2</p> </div> 【jQuery】 $(".menu").click(function(e){ if($(".a").css("display") == "none"){ $(".a").show(); }else{ $(".a").hide(); } }); ".munu"の要素をクリックした場合、メニューの".a"の要素が開き もう一度".munu"の要素をクリックすると、メニューの".a"の要素が閉じます。 基本的な動作はこれでいいのですが ".munu"や".a"の要素以外の場所をクリックしたら ".a"を閉じるようにしたいのですが、どのようにすればいいのでしょうか？ OKWaveサイトのメニューバーの開閉みたいに、メニューバー以外の場所をクリックしたら 表示されているメニューのカテゴリーが閉じる動作にしたいです。
- ベストアンサー
- JavaScript
- jQueryスライドプラグイン
jQueryスライドプラグイン FLASHを使用せずにjQueryのプラグインで以下のような表現は可能でしょうか？ http://www.starcat.co.jp/ 以下が実現したいです。 ・メイン画像がフェードまたは、スライドで切り替わる ・メイン画像クリックで別のページへリンク ・サムネイルクリックでメイン画像が切り替わる ・ランダムで表示できる ・自動で遷移する。
- 締切済み
- JavaScript
- jquery
初心者になります。 jqueryなのですが スライド式のメニュー表示で その他のブラウザではスライド表示されますが Ieはクリックしても全然スライドしません jqueryはIeには未対応なのでしょうか？ それとも何か設定があるのでしょうか？ すみませんよろしくお願いします。
- ベストアンサー
- JavaScript
- jquery スライドしながらフェード
jqueryで.clickで横にスライドしながら表示されるボックスのメニューを作成しました。 $(function(){ $("#button").click(function(){ $('#box').toggle('slide',{ origin: ['top','left'] }); return false; }); }); これで意図した動きはしているのですが、更にfadeを加えてスライド表示される際に 透明度を0から1にしたいのですが、どのように処理をすれば良いのかわかりません。 スライドの処理とわけてしまうと完全にスライドした後にfadeの処理が行われてしまいます。 スライドしながら透明度も変更するにはどうすれば良いのかどなたかご教示お願います。
- ベストアンサー
- JavaScript
- jQueryでの開閉メニューについて
jQueryでアコーディオン（開閉）メニューを作成しています。 メニューの右端に、マークを表示していますが、開閉状態に応じて変えることはできますでしょうか？ 単に変えるだけならできますが、開閉状態に応じて変えるとなると、なかなかできませんでした。 画像のように閉じているときは右端に[+]マークを表示し、開いたときは[-]マークを表示したいのです。 皆様の知恵をご教示いただけると幸いです。 以下ソースです。よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="../js/jquery/jquery.js"></script> <script><!-- $(document).ready(function(){ var marks = { closedMark: '[+]', openedMark: '[-]' }; //開閉状態表示 $("h4.conmenu").append("<span>"+ marks.closedMark +"</span>"); //オンマウスでカーソル変更 $("h4.conmenu").hover(function(){ $(this).css("cursor","pointer"); },function(){ $(this).css("cursor","default"); }); //最初に表示するか？ $("ul.sub").css("display","none"); //クリック処理 $('h4.conmenu').click(function(){ // 開閉する速度 $(this).next().slideToggle('fast'); // マークを変える // $(this).find("span").html(marks.openedSign); }); }); //--> </script> <style type="text/css"> .leftmenu { float: left; width: 200px; background: #ff0000; list-style: none; } .leftmenu h4 { padding: 0; /* margin: 0;*/ margin: 5px 2px 5px 5px; } .leftmenu ul { padding: 0; margin: 0; list-style-type: none; } .leftmenu li { padding: 0; margin: 0; } .leftmenu a, .leftmenu a:visited { #text-transform:uppercase; display: block; height: 25px; line-height: 25px; padding: 0 10px 0 20px; color: #ffffff; background: #303030; text-decoration: none; } .leftmenu a:hover { color: #000; background-color: #acac23; } .leftmenu span{ float:right; } </style> <title>sample</title> </head> <body> <div class="wrapper"> <div class="leftmenu"> <h4 class="conmenu">Menu-1</h4> <ul class="sub"> <li><a href="#">Menu-1a</a></li> <li><a href="#">Menu-1b</a></li> <li><a href="#">Menu-1c</a></li> <li><a href="#">Menu-1d</a></li> </ul> <h4 class="conmenu">Menu-2</h4> <ul class="sub"> <li><a href="#">Menu-2a</a></li> <li><a href="#">Menu-2b</a></li> <li><a href="#">Menu-2c</a></li> <li><a href="#">Menu-2d</a></li> <li><a href="#">Menu-2e</a></li> </ul> <h4 class="conmenu">Menu-3</h4> <ul class="sub"> <li><a href="#">Menu-3a</a></li> <li><a href="#">Menu-3b</a></li> <li><a href="#">Menu-3c</a></li> </ul> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- jQueryスライドメニューの初歩的な質問です
以下のスライドメニューは、それぞれブロック要素で構成されていて、リンク文字や余白をクリックするとスライドトグルで開閉が行われます（htmlファイルにコピーすれば動作すると思います）。 ひとまずイメージ通りに完成したのですが、1つ困ったことがあります。それはリンク文字をクリックしたときにトグルが実行されてしまうことです。ページ遷移する間にメニューが一度開閉してしまうので見た目にあまりスマートではありません。 それを修正するためいろいろ試行錯誤したのですが、どうやってもわからなかったので質問いたしました。リンク文字をクリックしたときは、ページ遷移のみでトグルを実行しないようにするにはどのように書けばよいのでしょうか？ また、このソースはjQueryを1.7.2以上にすると動作しなくなってしまいます。この原因が分かる方がいらしたらぜひお教えください。 どうぞよろしくお願いいたします。 <!----------------------------------> <script type='text/javascript' src='http://www.google.com/jsapi'></script> <script type='text/javascript'>google.load('jquery', '1.7.1')</script> <script type='text/javascript'> <!-- $(function(){ $('span.tree_a').click(function() { $(this).next().slideToggle(); }).next().hide(); }); //--> </script> <!----------------------------------> <style type="text/css"> span.tree_a{ width: 100%; display: block; } </style> <!----------------------------------> <ul> <li><span class='tree_a'><a href='http://www.google.co.jp/'>親メニュー1</a></span> <ul> <li><span class='tree_a'><a href='http://www.google.co.jp/'>子メニュー1</a></span> <ul> <li><a href='http://www.google.co.jp/'>孫メニュー1</a></li> </ul> </li> </ul> </li> <li><span class='tree_a'><a href='http://www.google.co.jp/'>親メニュー2</a></span> <ul> <li><span class='tree_a'><a href='http://www.google.co.jp/'>子メニュー2</a></span> <ul> <li><a href='http://www.google.co.jp/'>孫メニュー2</a></li> </ul> </li> </ul> </li> </ul> <!---------------------------------->
- ベストアンサー
- JavaScript
- 縦と横へ同時にアニメーションするスライドメニュー
javacriptで縦もしくは横へスライドするアコーディオンメニューの サンプルスクリプトはよくあるのですが、ボタンをクリックまたはロールオーバーすると そのボタンから同時に縦と横へメニューが伸びていくようなメニューを作成したいと思っています。 （ボタンを基点にＬ字型にのびていくようなかんじです） http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-display-elements-sequentially-with-jquery/ で紹介されているjQueryのスクリプトは近いのですが、これはクリックすると 一つ一つliタグでコーディングされた部分がスライド的に現れるものですが このスクリプトの場合開くにあたる動作しかできません。 ロールオーバーで展開し、マウスアウトで閉じたいと思っています。 できれば開くときの逆方向のアニメーションでできればベストなのですが こういった動きをどうすればよいのか、 こういった動きが再現できるプラグインやスクリプトの書き方など、 ご存知のかたがいらっしゃいましたらご教授お願いします。
- 締切済み
- JavaScript
- jqueryで画像を切り替えたい
以下ソースがあります。 ●main.js $(function(){ jQuery.ajax({ url : "./news.txt", type : "get", success : function(data){ alert(data); } }); }); ●news.txt test と記述しています。 ●index.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>jQuery Sample</title> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="main.js"></script> </head> <body> <h1>jQueryサンプル</h1> <p>非同期通信の処理</p> </body> </html> この三つのファイルを同じ階層に置き、index.htmlで実行したところ 非同期通信(testのアラート)が表示されました。 そこで、 index.htmlファイルの左側にメニューを設けて、 メニューをクリックすると、画像のみが切り替わるという 内容で、jqueryによるajax実装を行いたいのです。 (左のメニュー1がクリックされれば、リンゴの画像。 メニュー2がクリックされれば、みかんの画像等) ulタグと、jquery関数にどういう仕掛けを入れると 果物画像の入れ替えが行えるでしょうか。 ご教授お願いします。
- ベストアンサー
- AJAX
- jQuery アコーディオンメニューについて
jQuery アコーディオンメニューについていくつか質問させていただきます。 当方、はじめてjQueryを使っています。 以下のページを参考にアコーディオンメニューを作成しています。 http://triplexxx.jp/archives/150 <ul class="acc"> <li><a href="1" class="open">category1</a> <ul> <li><a href="#">menu 1-1</a></li> <li><a href="#">menu 1-2</a></li> <li><a href="#">menu 1-3</a> <ul class="fxmn"> <li><a href="#>menu1-3-1</a></li> <li><a href="#">menu1-3-2</a></li> <li><a href="#">menu1-3-3</a></li> </ul> </li> </ul> </li> <li><a href="2" class="open">category2</a> <ul> <li><a href="#">menu 2-1</a></li> <li><a href="#">menu 2-2</a></li> <li><a href="#">menu 2-3</a></li> </ul> </li> <li><a href="3" class="open">category3</a> <ul> <li><a href="#">menu 3-1</a></li> <li><a href="#">menu 3-2</a></li> <li><a href="#">menu 3-3</a></li> <li><a href="#">menu 3-4</a></li> </ul> </li> </ul> var $j = jQuery; $j(function(){ $j(".acc").each(function(){ $j("a.open", this).each(function(index){ var $this = $j(this); if(index !=n) $this.next().hide(); $this.click(function(){ var params = {height:"toggle",opacity:"toggle"}; $j(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); return false; }); }); }); }); (1)：具体的にあげますと、上記のmenu1-3をクリックしてmenu1-3-1、1-3-2、1-3-3のアコーディオン を開き、 1-3-1をクリックしてリンク先に飛んだ際に、直前に開いていたアコーディオンをそのままの状態 にしておきたいというものです。 （↓こんな感じです） category1 ・ menu 1-1 ・ menu 1-2 ・ menu 1-3 ・・ menu1-3-1 ・・ menu1-3-2 ・・ menu1-3-3 category2 category3 教えて！gooの過去の質問を参考させていただきながら、 if(index !=n) $this.next().hide(); で、 n を指定することで、それぞれのサブメニューを開いた状態にすることには成功したのですが、その下の階層のメニューをどのように指定すればよいかがわかりません。 (2)：また、リンク先のページに飛んだ時に、アコーディオン部分は動かないのが望ましいのですが、 可能でしょうか？ （タブのようにページが切り替わる感じが理想的ですが、ページ数が大変多いため難しいとおもっ ています） (3)：(1)、(2)はページごとにscriptを書き換えるのではなく、htmlをいじることで（li タグにclass指定をす るなど）変更するのは可能でしょうか？ 外部scriptが使えればと思っています。 複数の質問になりましたが、どうぞよろしくお願いいたします。
- 締切済み
- JavaScript
- 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
お礼
度々ありがとうございます。 私などよりよほど精通されており、大変助かっています。 縦中央揃えは、 <span>で<a>をくくり、<span>をdisplay:inline-block、<a>をdisplay:table-cellとすることで実現できました。 IE8でも動作しています。(他はしりませんが・・・。） メニューの階層は、DBから取得してくる関係上、何階層まで、というのがないため、予め幅を決定するということができません。 （動的スクリプトによりMAX階層を取得してごにょごにょしてwidthを固定指定する、ならいけそうですが。） やはりそこまでするには、がらっと作り方を変えるしかないでしょうか・・・。