表示されている記事

スポンサーサイト

一定期間更新がないため広告を表示しています


Sidebar Accordion Menu を設置してみる

RoundAndRound - User Template File | 無料ブログ(blog)作成【JUGEM(ジュゲム)】

こちらのUTFで使用されているSidebar Accordion Menuを設置してみたいとおもいます。

参考にさせていただいた記述
<script type="text/javascript">
$(function() {
$(".side_content_body").css('display','none');
$(".side_content h4").hover(function(){
    $(this).css("cursor","pointer");
    $(this).css("color","#666");
    },function(){
        $(this).css("cursor","default");
        $(this).css("color","#121212");
    });
    $(".side_content h4").each(function() {
        $(this).click(function() {
        $(this).next("div").toggle("slow");
        $(".side_content_body").siblings("div:visible").slideUp("slow");
        });
    });
});
</script>
<!-- BEGIN calendar -->
<div class="side_content">
<h4>Calendar</h4>
<div class="side_content_body">
{calendar}
</div>
</div>
<!-- END calendar -->

このブログで現在使用しているテンプレート(http://jugemtemplate.jugem.jp/?tid=1)の場合サイドバーで長くなりがちな部分に設置してみたいと思います。

トラックバックの部分に設置
<!-- BEGIN recent_trackback -->
<div class="sideBox" id="tblistBox">
<h3>トラックバック</h3>
<div class="sideContents" id="tblist">
{recent_trackback_list2}
</div>
</div>
<!-- END recent_trackback -->

としてJavascriptを書き換えてみます

<script>
jQuery(function() {
jQuery("#tblistBox").css({'padding':'0 0 8px 0'});
jQuery("#tblist").css({'display':'none'});
jQuery(".sideBox h3").hover(function(){
jQuery(this).css({'cursor':'pointer','color':'#000'});
},function(){
jQuery(this).css({'cursor':'default','color':'#000'});
});
jQuery(".sideBox h3").each(function() {
jQuery(this).click(function() {
jQuery(this).next("div").toggle("slow");
jQuery("#tblist").siblings("div:visible").slideUp("slow");
});
});
});
</script>

スポンサーサイト


コメント
コメントする








   
この記事のトラックバックURL
トラックバック