前回に続き今回もjQueryネタ。ちょっとしたアニメーションネタです。
本ブログではサイドバーにあるカテゴリーにマウスカーソルを持っていくと下にびよーんと伸びます。これの実装方法について。
まずカテゴリ部分は以下のように実装してsidebar.phpから<?php get_template_part( '/widgets/category' ); ?>で呼び出しています。
category.php
すると以下のようなHTMLが出力されます。
出力される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);
});
});