グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

できるだけ簡単にできるアコーディオンメニューをさがしていて
下記の記事を見つけました。

jQuery アコーディオンメニュー
http://php.o0o0.jp/article/4138817358715040

もーすばらしく簡単で便利です。
デフォルトで空けておきたい部分も指定できます。
自分で作ってみたサンプル


【javascript】
----------------------------------------------

$(function () {
  // デフォルト開く部分を指定
  $('ul').eq(0).show();
  $('span').click(function() {
    // メニュー表示/非表示
    $(this).next('ul').slideToggle('fast');
  });
});

【CSS】
----------------------------------------------

ul {
  display: none;
}
span {
  cursor: pointer;
}

【HTML】
----------------------------------------------

<span>メニュー 1</span>
<ul>
<li><a href="#">メニュー 1-1</a></li>
<li><a href="#">メニュー 1-2</a></li>
<li><a href="#">メニュー 1-3</a></li>
</ul>
<span>メニュー 2</span>
<ul>
<li><a href="#">メニュー 2-1</a></li>
<li><a href="#">メニュー 2-2</a></li>
<li><a href="#">メニュー 2-3</a></li>
</ul>
<span>メニュー 3</span>
<ul>
<li><a href="#">メニュー 3-1</a></li>
<li><a href="#">メニュー 3-2</a></li>
<li><a href="#">メニュー 3-3</a></li>
</ul>

jQueryで開閉メニューなどを作るとき、.show() や .hide() だけでは
思い通りにならなかったのでメモ。
.slideup() や .slidedown()、.animate() でも同様です。

クリックしないタイプの開閉メニューを作るときなど、
マウスオーバー時に .show()、マウスアウト時に .hide() というように素直に作ると、
メニューの上をマウスが行ったり来たりしたときにその回数分開閉してしまいます。
マウスを止めても何度も開閉し続ける・・。
そういうとき次のようなメソッドを上手く組み合わせることで、
余計な動作をなくすことができます。


■.stop([clearQueue], [gotoEnd])

現在のアニメーションをストップさせます。
show()やhide()の前に実行することで、それまでのアニメーションを中断してから動作させることができます。

clearCueue を true にするとアニメーションがいくつも予約されている場合、それらも中断します。
gotoEnd を true にすると中断＋アニメーション完了の状態にジャンプします。
デフォルトはどちらもfalse。

（例）$(this).stop().animate( ... );

.stop()
.stop(true,false)
.stop(false,true)

■.not(':animated')

対象要素から指定した条件に合致するものを除外します。
上記のように :animated を指定すると、対象がアニメーション中の場合は処理が実行されなくなります。

（例）$(this).not(':animated').animate( ... );


そのときそのときでどう使うかは変わってきますが、上記の.stop()と.not()の使い分けや、
オーバーだけに使う、アウトだけに使うなどの組み合わせで理想の動作を実現できると思います。

・オーバーのみに .stop(true,false)

WEB制作にパララックス効果を取り入れるべく、いろいろなJSを試しています。
まだ種類は少ないですが、下記は弊社で制作したサンプルです。


■Jarallax.js
http://www.jarallax.com/

要素を動かすのに特に強いJSです。
1つ1つの要素を細かく動かせて、記述もわかりやすい。
ただし、背景を動かしたりワイプするような動きは苦手なようです。

・サンプル1
・サンプル2
・サンプル3


■Parallax-JS
https://github.com/razorfish/Parallax-JS
http://razorfish.github.io/Parallax-JS/（デモ）

初期状態でパララックスの動きが設定されており、
背景が動くだけのような簡単なものならほぼクラスを当てるだけで作れる。

画像や文字などの要素も動かせるが、
動きを細かく設定するのは苦手。

・サンプル1

探していて気付いたのですが、
selectタグのデザインを自由に変更できるものって意外と少ないようです。

こちらは先日の記事とはまた違うJSになります。
プルダウン後のリストまでデザインでき、さらにIE6まで対応。


CUSTOM-SELECT：セレクトボックスをカスタマイズするJS（恐らくIE6も対応）


使い方は上記のページにありますので割愛ですが、
↓こんな感じのフォームが作れます。



初期表示部分は<dt>、
プルダウン後のリストは<dd>で囲んだ<ul>・<li>リストに置き換えられるようなので、
それぞれスタイルを当てることで自由にデザインすることができます！

細かいデザイン指定がある場合などに是非。

グローバルメニューをssiなど、外部ファイルで管理したい時があるじゃないですか。
さらに表示してるページに対応して、メニューの状態を変えたいときあるじゃないですか。
例えば「会社情報」のページの時は、メニューにある「会社情報」だけ色を変えておきたいとか・・・
見てくれてる人に「今はこのページ開いてますよ～」となんとなくわかってもらえるようにしたいときなどにやりますよね。

メニューを1ファイルで管理している関係上、ソースに直接classやスタイルを書いておくことはできないので、そういう時はページを読み込んだあとに、javascriptでclassを追加してしまうのが良いかと思います。