WordPress、2カラムサイトでサイドに置く”カスタムメニュー”をアコーディオンメニューにしたい


上記の内容のとおり、カスタムメニューの1階層目6つを初めに「タイトル(テキストボタン)」として表示させて、各タイトルボタンを押すと、その2階層目が4個ほどビロンと下に現れるメニューを作りたいと悪戦苦闘しております。


”tabbed widgets”というプラグインを見つけて使ってみたのですが、
カスタムメニューだと、表示されて欲しくないところにまでカスタムメニューが表示されたり、
5つまでしか1階層目を表示できないので使えませんでした。。

jQueryを利用して施行すればよいのでしょうか。。
調べると、管理画面に使っているものと被らないようにソースを書き足すなど
ちょっとハードルが高いです。。

何かいい方法はないでしょうか。
また、jQueryを使うにしても比較的簡単でオススメのものがあれば教えていただきたいのですが。

どうぞよろしくお願いいたします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/11/28 16:35:02
  • 終了:2011/11/29 16:44:14

ベストアンサー

id:266586389@twitter No.1

mafumafuultu回答回数135ベストアンサー獲得回数402011/11/28 17:35:41

たぶんこんな感じでいいと思うんですが

jQueryとメニューのツリー HTML


<script type="text/javascript" src="jQueryを選択">
$(function(){
$("ul.menu").hide();
$("div.category").click(function(){
$("ul.menu").slideUp();
if($("+ul",this).css("display")=="none"){
$("+ul",this).slideDown();
}
});
});
</script>

<ul class="navigation">
<li>
<div class="category">親メニュー1</div>
<ul class="menu">
<li><a href="#1-1">子1</li>
<li><a href="#1-2">子2</li>
<li><a href="#1-3">子3</li>
</ul>
</li>
<li>
<div class="category">親メニュー2</div>
<ul class="menu">
<li><a href="#2-1">子1</a></li>
<li><a href="#2-2">子2</a></li>
<li><a href="#2-3">子3</a></li>
</ul>
</li>



</ul>

CSS

ul.navigation{
width: Xpx;
margin: 0;
}

ul.navigation,ul.menu{
list-style: none;
margin: 0;
padding: 0;
}

div.category{
height: Xpx;
background-color: #;
cursor: pointer;
}

ul.menu a{
display: block;
height: Xpx;
color: #;

他2件のコメントを見る
id:266586389@twitter

それでしたらCookieの保存、読み込みで解決します。
こちらのサイト下側に詳しい説明が乗っています。

2011/12/07 19:33:45
id:boochi

良いページを教えていただき、ありがとうございます。
時間ができたときにがんばってみたいと思います。
できたらまたご報告いたします。
ありがとうございました><

2011/12/08 02:13:30

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません