前回に続き今回もjQueryネタ。ちょっとしたアニメーションネタです。

本ブログではサイドバーにあるカテゴリーにマウスカーソルを持っていくと下にびよーんと伸びます。これの実装方法について。

blog40

 

まずカテゴリ部分は以下のように実装してsidebar.phpから<?php get_template_part( ‘/widgets/category’ ); ?>で呼び出しています。

category.php

<div class="sub_content">
	<ul class="tree-menu">
		<?php wp_list_categories('orderby=order&show_count=1&title_li=');?>
	</ul>
</div>

 

すると以下のようなHTMLが出力されます。

<div class="sub_content">
	<ul class="tree-menu">
			<li class="cat-item cat-item-107"><a href="http://hi-rom.com/blog/archives/category/adobe" title="Adobe に含まれる投稿をすべて表示">Adobe</a> (15)
				<ul class='children'>
					<li class="cat-item cat-item-141"><a href="http://hi-rom.com/blog/archives/category/adobe/aftereffects" title="AfterEffects に含まれる投稿をすべて表示">AfterEffects</a> (8)</li>
					<li class="cat-item cat-item-4"><a href="http://hi-rom.com/blog/archives/category/adobe/flash" title="Flash に含まれる投稿をすべて表示">Flash</a> (1)</li>
					<li class="cat-item cat-item-153"><a href="http://hi-rom.com/blog/archives/category/adobe/illustrator" title="Illustrator に含まれる投稿をすべて表示">Illustrator</a> (1)</li>
					<li class="cat-item cat-item-108"><a href="http://hi-rom.com/blog/archives/category/adobe/photoshop" title="Photoshop に含まれる投稿をすべて表示">Photoshop</a> (4)</li>
					<li class="cat-item cat-item-171"><a href="http://hi-rom.com/blog/archives/category/adobe/premiere" title="Premiere に含まれる投稿をすべて表示">Premiere</a> (1)</li>
				</ul>
			</li>
 
			<li class="cat-item cat-item-160"><a href="http://hi-rom.com/blog/archives/category/cgcad" title="CG/CAD に含まれる投稿をすべて表示">CG/CAD</a> (30)
				<ul class='children'>
					<li class="cat-item cat-item-170"><a href="http://hi-rom.com/blog/archives/category/cgcad/123ddesign" title="123D Design に含まれる投稿をすべて表示">123D Design</a> (13)</li>
					<li class="cat-item cat-item-168"><a href="http://hi-rom.com/blog/archives/category/cgcad/3dprinter" title="3Dプリンタ に含まれる投稿をすべて表示">3Dプリンタ</a> (8)</li>
					(略)
	</ul>
</div>

 

出力されるHTMLを踏まえて以下のようにjQueryで料理しています。

script.js

$(function(){
	//カテゴリの折り畳み
	$(".tree-menu .children").hide();
	$(".tree-menu li").hover(function() {
		$(this).children('ul').slideDown(200);
	}, function() {
		$(this).children('ul').hide(200);
	});
});

トラックバック

コメント

  1. […] [WordPress]jQueryによるカテゴリのアコーディオン表示 | HI-ROM.COM BLOG […]

  2. […] ・WordPressで、CSS3とhtmlだけでアコーディオンメニューを作る方法 ・jQueryとCSS3で作るアコーディオンメニュー ・[WordPress]jQueryによるカテゴリのアコーディオン表示 […]

  3. TaiGameDanhBai より:

    There are a couple of interesting points over time in this article but I do not determine if these people center to heart. There exists some validity but I’m going to take hold opinion until I investigate it further. Very good post, thanks and that we want more! Added to FeedBurner likewise

  4. Andre Medvec より:

    Thank you for another informative site. Where else could I get that type of info written in such a perfect way? I have a project that I am just now working on, and I’ve been on the look out for such info.

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です