ブログの右サイド
カテゴリ：備忘録(WEB)
まだ、どんなデザインにするか具体的には決まっていませんが、右サイドのイメージを思いついたのでメモ。
後々変更するかもしれないですし、デザインも何もないのですが、jQueryでアコーディオン開閉に変更しました。
クリックするとスライドして開閉するやつです。
jQueryのライブラリを読み込んだ後、
作ったアコーディオンのjsファイルを読み込むだけです。
(※html部分やcssは導入するサイトに合わせて変更してください。)
HTML
-
<aside>
-
<dl>
-
<dt>ブログカテゴリ</dt>
-
<dd>コンテンツ</dd>
-
<dt>その他</dt>
-
<dd>コンテンツ</dd>
-
</dl>
-
</aside>
CSS(カーソルをポインターに変更する為のもの)
-
aside dt.over,
-
aside dt.selected { -
cursor: pointer;
-
}
jQueryのソースコード
-
$(function(){ -
// 1つ目のdd以外をdisplayをnoneにする
-
$("aside dd:not(:first)").css("display","none"); -
//1つ目のdtにselectedというクラスを追加する
-
$("aside dt:first").addClass("selected"); -
//asideの中のdtがクリックされたら中身が実行される
-
$("aside dt").click(function(){ -
//selectedクラスがあれば除去、無ければ追加する
-
$(this).toggleClass("selected"); -
//ddがアニメーションしていない時にスライドしての表示・非表示
-
$("+dd:not(:animated)",this).slideToggle(500); -
//asideの中のdtにマウスオーバーしたとき
-
}).mouseover(function(){ -
//asideの中のdtにoverクラスを追加
-
$(this).addClass("over"); -
//asideの中のdtからマウスアウトしたとき
-
}).mouseout(function(){ -
//asideの中のdtにoverクラスを除去
-
$(this).removeClass("over"); -
});
-
});
コメントを残す