人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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


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

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

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

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

●質問者: boochi
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● mafumafuultu
ベストアンサー

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

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: #;


boochiさんのコメント
mafumafuultu様 具体的なソースまでいただいてありがとうございます! WordPressにあてこんでみて、正常に動きました。 ありがとうございます!感謝いたします。

boochiさんのコメント
mafumafuultu様 すみません、アコーディオンメニュー自体はできたのですが、 リンク先にURLを入れると、リンクを押すたびに アコーディオンで開いた子メニューが閉じてしまいます。 これを、開いたままの状態で次のページに行くこと、 行った先でも開いたままの上体にすること、 は可能でしょうか。。 重ね重ねすみません。。

mafumafuultuさんのコメント
それでしたらCookieの保存、読み込みで解決します。 <a href="http://5509.me/log/control-slide-navigation-with-jquery-cookie">こちら</a>のサイト下側に詳しい説明が乗っています。

boochiさんのコメント
良いページを教えていただき、ありがとうございます。 時間ができたときにがんばってみたいと思います。 できたらまたご報告いたします。 ありがとうございました><
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ