- ベストアンサー
アコーディオンメニューを使ったサイトを探しています。
joy_28の回答
AS2.0ですが、以前、「憲ちゃん」サイトに投稿した際のサンプルがありましたので、下に、FLAをアップしておきます。ダウンロードして、弄ってみて下さい。
関連するQ&A
- PukiWikiでAccordionが動かない。
お世話になります。 pukiwiki 1.4.7を利用しており、メニューバーの項目が多くなってきたため、 綺麗に表示させたいと思い、jqueryを利用したAccordion機能を実装しようと試みています。 そこで、下記サイトをお手本に色々と編集してみました。 ■質問箱/349 http://pukiwiki.cafelounge.net/plus/?%E8%B3%AA%E5%95%8F%E7%AE%B1%2F349 cssは正常に反映出来ているようなのですが、 いざpukiwikiを開くと、メニューバーの隠れている部分が全て表示されており、 動くはずの部分をクリックするも、スライドせず考えている動作をしない状況です。 恐らく、jsが正常に読み込まれていないのではないか？と感じているのですが、 正直お手上げ状態です。 お手数ではございますが、ご教示頂けないでしょうか。 大変困っています。 （それともpukiwiki plus!でしか動かないのでしょうか。） ■実画面 http://www.tenmusu.org/pso3/index.php?FrontPage
- 締切済み
- PHP
- jQuerey、アコーディオンメニューに関して
質問させて頂きます。 jQueryの知識が乏しいため、質問の内容がザックリとなってしまい申し訳ありませんが、ご存知の方は回答頂けると助かります。 jQueryにてアコーディオンメニューで検索すると、多くのプラグインが用意されています。 今回もそういったプラグインを使用して、アコーディオンメニュー(のようなもの？)を作成したいと考えています。 ですが、今回私が作成したいと考えているのは、 ボタンをクリックした際に表示される領域が、最初から少しだけ表示されている状態にしておきたいと考えています。 ＜例＞ //1行目部分は最初から表示 ■■■■■■■■ 1行目 ---------------- ↓■部分をクリックすると、スライドして2行目と3行目も表示 ■■■■■■■■ 1行目 2行目 3行目 ---------------- 全て表示or全て隠れているといった形のアコーディオンプラグインであれば、検索してすぐに見つかるのですが、上記のような1行目のみ表示された状態といったことが出来るプラグインは見つけられずにいます。 jQueeryの知識も乏しく、自分で作成するということも厳しいので、そういったことの出来るプラグイン、または、方法など教えて頂ければ幸いです。 質問の内容的に回答が難しいかもしれませんが、ご存じの方がいらっしゃいましたら、よろしくお願い致します。
- ベストアンサー
- JavaScript
- jQueryのアコーディオンメニューについて
下記デモページを参考に同じアコーディオンのメニューを設置したのですが、 デモ http://www.queness.com/resources/html/accordion/index.html 上記サイトのクリックするバーを下記参考サイトの「カテゴリで探す」箇所のように 再度クリックして閉じるようにしたいです。 http://ccm.stylestore.allabout.co.jp/mojo?language=ja 下記スクリプトのどの部分をいじればいいのか、 どなたかお分かりの方がございましたらご教授頂けませんでしょうか。 ■javascript $(document).ready(function () { $('#accordion li').click(function () { //slideup or hide all the Submenu $('#accordion li').children('ul').slideUp('fast'); //remove all the "Over" class, so that the arrow reset to default $('#accordion li > a').each(function () { if ($(this).attr('rel')!='') { $(this).removeClass($(this).attr('rel') + 'Over'); } }); //show the selected submenu $(this).children('ul').slideDown('fast'); //add "Over" class, so that the arrow pointing down $(this).children('a').addClass($(this).children('li a').attr('rel') + 'Over'); }); }); 宜しくお願い致します。
- ベストアンサー
- 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でアコーディオンメニュー
jQueryのaccordionでメニューを作っています。 初期のページは大項目1～3がアコーディオンで開閉し、 開いた中にある小項目がリンクボタンになっています。 【HTML 1】 小項目1（index_01.html）では、大項目1が開いたままになり、 大項目2、3のみアコーディオンで開閉します。【HTML 2】 ここからがご教示頂きたいところで、 小項目2（index_02.html）を表示している時は 大項目2が開いたままで、大項目1、3をアコーディオンさせたいと考えております。 【HTML 3】 アコーディオンではさむ形になるので、新しいid「slider2」を作りましたが、 お互いが開いたままの状態になってしまうのが難点です。 解決案として、「slider」で大枠を囲み、アコーディオンに左右されないddを作るか、 「slider」と「slider2」を同期させてどちらか片方が開いている時は片方が閉じるように する・・・と考えています。 ★印の部分のfor文に手を加えるのではないかと思うのですが、 どうにもお手上げです・・・ お手すきの方、どうかお力添え下さい よろしくお願い致します。 //______jQuery______// var accordion=function(){ var tm=sp=10; function slider(n){this.nm=n; this.arr=[]} slider.prototype.init=function(t,c,k){ var a,h,s,l,i; a=document.getElementById(t); this.sl=k?k:''; h=a.getElementsByTagName('dt'); s=a.getElementsByTagName('dd'); this.l=h.length; ★for(i=0;i<this.l;i++){var d=h[i]; this.arr[i]=d; d.onmouseover=new Function(this.nm+'.pro(this)'); if(c==i){d.className=this.sl}} l=s.length; for(i=0;i<l;i++){var d=s[i]; d.mh=d.offsetHeight; if(c!=i){d.style.height=0; d.style.display='none'}} } slider.prototype.pro=function(d){ for(var i=0;i<this.l;i++){ var h=this.arr[i], s=h.nextSibling; s=s.nodeType!=1?s.nextSibling:s; clearInterval(s.tm); if(h==d&&s.style.display=='none'){s.style.display=''; su(s,1); h.className=this.sl} else if(s.style.display==''){su(s,-1); h.className=''} } } function su(c,f){c.tm=setInterval(function(){sl(c,f)},tm)} function sl(c,f){ var h=c.offsetHeight, m=c.mh, d=f==1?m-h:h; c.style.height=h+(Math.ceil(d/sp)*f)+'px'; c.style.opacity=h/m; c.style.filter='alpha(opacity='+h*100/m+')'; if(f==1&&h>=m){clearInterval(c.tm)}else if(f!=1&&h==1){c.style.display='none'; clearInterval(c.tm)} } return{slider:slider} }(); //______HTML 1______// <div id="accordion"> <dl class="accordion" id="slider"> <dt>▼大項目1</dt> <dd> <span class="bank_top"><a href="index_01.html">小項目1</a></span> </dd> <dt>▼大項目2</dt> <dd> <span><a href="index_02.html">小項目2</a></span> </dd> <dt>▼大項目3</dt> <dd> <span><a href="index_03.html">小項目3</a></span> </dd> </dl> </div> //______HTML 2______// <div id="accordion"> <dl class="accordion"> <dt>▼大項目1</dt> <dd> <span class="bank_top"><a href="index_01.html">小項目1</a></span> </dd> <dl class="accordion" id="slider"> <dt>▼大項目2</dt> <dd> <span><a href="index_02.html">小項目2</a></span> </dd> <dt>▼大項目3</dt> <dd> <span><a href="index_03.html">小項目3</a></span> </dd> </dl> </div> //______HTML 3______// <div id="accordion"> <dl class="accordion" id="slider"> <dt>▼大項目1</dt> <dd> <span class="bank_top"><a href="index_01.html">小項目1</a></span> </dd> </dl> <dl class="accordion"> <dt>▼大項目2</dt> <dd> <span><a href="index_02.html">小項目2</a></span> </dd> <dl class="accordion" id="slider2"> <dt>▼大項目3</dt> <dd> <span><a href="index_03.html">小項目3</a></span> </dd> </dl> </div> <script type="text/javascript"> var slider1=new accordion.slider("slider1"); slider1.init("slider"); var slider2=new accordion.slider("slider2"); slider2.init("slider2"); </script>
- ベストアンサー
- JavaScript
- アコーディオンメニューの最初に開く場所について
こちらのサイト http://coliss.com/articles/build-websites/operation/javascript/jquery-tutorial-simple-accordion.html で紹介されているアコーディオンメニューを使用しているのですが アクセス時に自動で開く場所の変更を行う場合 どの様に変更をしていいのかわかりません。 //Set default open/close settings $('.acc_container').hide(); //Hide/close all containers $('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container おそらくこの部分ではと思うのですがどうにもうまくいきません。 ご教授お願いいたします。
- ベストアンサー
- AJAX
- 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を利用したアコーディオンメニュー
wordpress上でjQueryを使用したアコーディオンメニューを作成しようと思います。 サイトの左カラムに設置して、ボックス化されたリストの一部をクリックするとメニューの開閉、 テキストリンクの部分をクリックするとカテゴリのリンクに飛ぶように作成したいと考えております。 アコーディオンの開閉までは作成できたのですが、そこからカテゴリへのリンクがうまく行きません。。 javascriptがあまり詳しくないので、ぜひともお力を貸してください。 よろしくお願いします。 <!--javascript--> <script type="text/javascript"> 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.click(function(){ var params = {height:"toggle", opacity:"toggle"}; j$(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); return false; }); }); }); }); </script> <!--/javascript--> <!--php--> <ul class="acc"> <?php wp_list_categories('hide_empty=0&title_li='); ?> </ul> <!--/php-->
- ベストアンサー
- JavaScript
- jQuery アコーディオンメニューについて
とあるサイトを参考にアコーディオンメニューを作成しています。 おおよその動作はうまくいっているのですが、1点どうしても実装できません。 例えば、menu2.htmlへ遷移した場合は、<ul class="menu2">内のメニューは 閉じることなく開いたままにしておきたいのです。他のページへ遷移した場合も同様です。 該当ページへ遷移した時に該当メニューのクラス名を変えること(open→block)で読み込み時は開いたままになるようになりましたが、他のメニューをクリックすると該当ページメニューも閉じてしまいます。 メニュー部分を開いたまま保てる方法をどなたかご教授いただけませんでしょうか。 何卒よろしくお願いいたします。 --------------------------------------- html <ul class="acc"> <li> <h3 class="h3_menu1 open"><a href="#">Menu1</a></h3> <ul class="menu1"> <li class="menu1_1"><a href="menu1_1.html">Menu1_1</a></li> <li class="menu1_1"><a href="menu1_2.html">Menu1_2</a></li> <li class="menu1_1"><a href="menu1_3.html">Menu1_3</a></li> <li class="menu1_1"><a href="menu1_4.html">Menu1_4</a></li> <li class="menu1_1"><a href="menu1_5.html">Menu1_5</a></li> </ul> </li> <li> <h3 class="h3_menu2 block"><a href="#">Menu2</a></h3> <ul class="menu2"> <li class="menu2_1"><a href="menu2.html#Menu3_1">Menu2_1</a></li> <li class="menu2_2"><a href="menu2.html#Menu3_2">Menu2_2</a></li> <li class="menu2_3"><a href="menu2.html#Menu3_3">Menu2_3</a></li> <li class="menu2_4"><a href="menu2.html#Menu3_4">Menu2_4</a></li> <li class="menu2_5"><a href="menu2.html#Menu3_5">Menu2_5</a></li> </ul> </li> <li> <h3 class="h3_menu3 open"><a href="#">Menu3</a></h3> <ul class="menu3"> <li class="menu3_1"><a href="menu3.html#Menu3_1">Menu3_1</a></li> <li class="menu3_2"><a href="menu3.html#Menu3_2">Menu3_2</a></li> <li class="menu3_3"><a href="menu3.html#Menu3_3">Menu3_3</a></li> <li class="menu3_4"><a href="menu3.html#Menu3_4">Menu3_4</a></li> </ul> </li> </ul> jQuery var $j = jQuery; $j(function(){ $j(".acc").each(function(){ $j("h3.open", this).each(function(index){ var $this = $j(this); if(index > 0) { $j("h3.open").next().hide(); } else { $j(".menu1").hide(); } $this.click(function(){ var params = {height:"toggle", opacity:"toggle"}; $j(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params,{complete: function(){$j("h3.block").css("display","block");}}); return false; }); }); }); });
- ベストアンサー
- JavaScript
- サイトデザイン メニュー部分について。
例に挙げたサイトのように、２段になっている上部メニューを作成しています。 大分類をタブのような形、その下にメニューといったものです。 ただ作る分には問題ないのですが、どうしてもデザインがうまくいきません。 そこで、このようなメニューを使用しているサイトをできるだけ多く知りたいのです。 企業・個人・内容などは問いません。 知っているところがありましたらお願いいたします。 例） amazon(https://www.amazon.co.jp) アスキー(http://ascii24.com/news/)
- 締切済み
- CSS
お礼
ありがとうございます！参考にさせて頂きます。