グローバルナビゲーションの仕様は、その時の流行によって左右されやすいものです。その中でも、安定してそのスタイルが良く扱われている「固定ナビゲーション」の指定方法をご紹介しておきます。今回はjQueryを使って、グローバルナビゲーションのデフォルトの位置を取得し、それ以上の値がスクロールされたら上部に固定するというものを作成していきます。 まずはサンプルを確認してみてください。 DEMO スクロールをすると横に5つ並んだグローバルナビゲーションが上部に固定されるのが確認できると思います。 サンプルを見ながら確認していきましょう。 HTMLを記述 まずは、サンプルにも使っている横に5つのボタンを配置した場合のhtmlコードを記述します。 <div id="globalNavi"> <ul> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2

WAIT! Animate アニメーションは、CSSの方がスピードも速くていいのですが、面倒なのがCSSの指定方法です。 そんな場合に簡単に、CSSアニメーションを作れるのが、「WAIT! Animate」です。 作例では、待機時間と14種類の動きを指定でき、その場でプレビューできます。 コピペできるので、ペーストするだけで動く簡単さです。 カスタムでは、アニメーションの時間や角度など細かく指定できます。 アイコンは、Webフォントを使うと簡単に動きます。 待機時間が指定できるので、ちょっとしたアクセントに便利ですね！

（2014-07-07 追記） フォーム値取得＆設定するjQueryプラグイン作ったので、良ければそちらも。 https://github.com/ginpei/jQuery.formval.js （追記おわり） 共通: 要素検索 name属性で検索するのが手っ取り早くて良いと思います。 <form id="my-form"> <input type="text" name="my-text" value="This is text." /> </form>

jQueryはとても便利なプラグインです。 JavaScriptの普及を助けたといっても過言ではありません。 jQueryのおかげで煩雑なコードをかかずに綺麗なコードで色々なものが作れるようになりました。 今回は少し忘れやすい、jQueryでフォームから値を取得する方法をまとめていきます。 テキスト よく使われる1行のテキストボックスです。 これはとても簡単でform要素に .val() で値を取得することが出来ます。 HTML <form id="test-form"> <input type="text" name="test-form" value="56"> </form> JavaScript var formValue = $('#test-form [name=test-form]').val(); var val = Number(formValue) || 0; // N

個人的なメモ。普段さほど使うことが 無いので、必要な時に探すのに時間 掛からないようにまとめておきます。 沢山ある必要はさほど無いのですが、 勉強用も兼ねていろいろと数を揃えて おきました。 お問い合わせフォームのユービザリティ向上として導入されるバリデーション用のjQueryプラグインのまとめと、その他Tipsやフォームデザイン周りの情報をちょろっと。一応動作だけIE6、7でも確認しています。 exValidation 安心(?)の国産プラグインです。複雑なフォームにも対応できるのでとりあえずこれを覚えておけば安心ではないかと思います。 どんなフォームにも使えるjQueryのフォームバリデーション exValidation jquery.validate.js Validationの日本語Ver.です。シンプルなので使い勝手いいですね。日付の確認用プラグインも派生していますので合わせて。