jQueryで水平方向にスライドする開閉式メニュー

入れ子構造のリストでjQueryを使ったシンプルな開閉式メニューを自作してみたところ、CSSやjQueryで色々と不具合に遭遇しました。

CSSだとIEだけ表示が違ったりすることはよくありますが、jQueryでもブラウザー毎に挙動が違うことがあるようで久しぶりにハマりました…

XHTMLにjQuery（JavaScript）を記述する

<script type="text/javascript">
/* <![CDATA[ */
jQuery(function($){
  // ここに処理を記述
});
/* ]]> */
</script>

CDATAセクションの書き方をいつも忘れるので自分用にメモ。
「/* */」でCDATAセクションをコメントアウトしているのは、IE6で構文エラーとなるため。

LESSというCSSの記述方法を拡張（変数、ネスト化、Mixinsなど）するRuby製のライブラリを導入してみました。

Codaには「.lessファイルを.cssファイルに変換（コンパイル）するプラグイン」と「less用の構文モード」があるので、簡単にLESS環境を構築することができます。