retujyou.com どうにもならない劣情の種子を植え付けられたばかりに

jQueryのLavaLampとゆうプラグインを使って、ナビゲーションを作りました。

LavaLamp

このサイトUMLANDのデザインがあまりに素敵だったので、ナビゲーションメニューの部分を真似てLavaLampを使いました。

LavaLamp サイト：Ganesh » Blog Archive » LavaLamp for jQuery lovers!

LavaLampに必要なもの

LavaLampには、jQuery と jQuery Easing プラグインが必要です。

まずjQueryを入手します。
jQuery: The Write Less, Do More, JavaScript Library

LavaLampは、そのままだと最新の jQuery 1.2.* には対応していないので、修正版をダウンロード。
jquery.lavalamp.js 修正版

また最新の Easing プラグインは、関数名が変更されているので注意が必要。
jQuery Easing Plugin

Easing プラグインの関数名変更に注意

LavaLampサイトのチュートリアルでは

$(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});

こうなってますが、Easing プラグインの関数名を以下のように新しく変えます

$(function() { $(".lavaLamp").lavaLamp({ fx: "easeOutCubic", speed: 700 })});

Easing プラグインの新しい関数名はこのサイトで確認出来ます。関数と一緒にその動作が目視出来て便利です。
jQuery Easing Plugin Test

千代紙

千代紙の模様は、このサイトで公開されてる素材を使用しました。高品質な和柄模様の素材がたくさんあります。
和柄・和風デザイン用AI・EPSファイル無料ダウンロード－粋屋 日本の伝統文様と伝統色－

Safari の input 要素に表示されるブルーラインを消す

Firefox, IE7, Safari でうまく表示されるかどうか確認しました。

safari だと検索フォームの input要素にフォーカスした時、青のラインでブロックが囲われてしまいます。これを解決するには、CSSでfocus 疑似クラスに「outline: none;」と指定してやれば良かったです。

input:focus{
    outline:none;
}

参考：RedLine Magazine : 油断大敵 focusさん

参考・参照

LavaLamp導入参考：jQuery メニュープラグインLavaLamp – ［JavaScript］All About

photo by kurafire