THE HAM MEDIA BLOG

jQueryを使ってメニューを装飾:LavaLamp menuを使ったメニューを作ってみる

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
jquery
javascript
メニュー

LavaLamp menu

同じ会社のYさんが、動くメニューが作りたいということで、
JavaScriptでアニメーションするようなメニューを探していた。

そしてYさんが「Fancy menu」というのを見つけていた。
Mootoolsのライブラリを使って動作するものらしい。

MootoolsではなくてjQueryのプラグインで無いかなって探したところ、
LavaLamp menu」というプラグインを発見。

いろいろなところで利用できそうなので、試しに使ってみた。

※現在IEだとうまく動作しない様子。
CSSの設定がうまくいっていないのもあるので後ほど調節予定。

※追記(8/22)
IE7ではうまく動作するようです。
IE6ではここのブログ上ではうまく動作しない現状です。

※追記
全体的にうまく動作していないので後で修正します。
今はまだスムーズに動いてくれないようです。

※追記(8/22) Fx,Opera,Safariでの問題解決しました。 ただ単にjquery.easing.jsが読み込めていなかっただけでした。 IEの修正はもうしばらくかかりそうです。お待ちください。

サンプル

■サンプルHTML

<ul class="lavaLamp">
<li><a href="#">ホーム</a></li>
<li><a href="#">コンテンツ</a></li>
<li><a href="#">サイトマップ</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>

■サンプルCSS(あくまで今回の場合のCSSです)

.lavaLamp {
    position: relative;
    height: 68px; width: 458px;
    background: url("http://h2ham.up.seesaa.net/image/lavabg.png") no-repeat top;
    padding: 0;
    overflow: hidden;
}
.lavaLamp li {
    margin: 17px 0 10px 7px;
    padding:0;
    float: left;
    list-style: none;
}

.lavaLamp li.back {
    background: url("lava.png") no-repeat right bottom;
    _background: url("lava.png") no-repeat right -30px;/*for ie6*/
    width: 9px;
    height: 20px;
    z-index: 8;
    position: absolute;
}

*:first-child+html .lavaLamp li.back {/*for ie7*/
    background: url("lava.png") no-repeat right -30px;
}

.lavaLamp li.back .left {
    background: url("lava.png") no-repeat top left;
    height: 30px;
    margin: -5px 9px 0 0;
}

*html .lavaLamp li.back .left {
    display:block;
    height: 30px;
    padding:5px 0;
    
}

.lavaLamp li a {
    position: relative;
    overflow: hidden;
    text-decoration: none;
    font: bold 14px arial;
    color: #fff; 
    padding:0 0 0 13px;
    text-align: center;
    z-index: 10;
    float: left;
    margin: auto 10px;
}

*html .lavaLamp li a{/*for ie6*/
    text-decoration: none;
    color: #000;
    padding-bottom:5px;
}

*html .lavaLamp li a:hover{/*for ie6*/
    text-decoration: none;
    color: #fff;
    height: 30px;
}

.lavaLamp li a:visited{
    color:#fff;
}

■サンプルスクリプト

<script type="text/javascript" src="jquery.lavalamp.js"></script>
<script type="text/javascript" src="jquery.easing.js"></script>
<script type="text/javascript">
    $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 1000 })});
</script>
<style type="text/css">

■今回使用した画像

LavaLamp menu

LavaLamp menu

■プレビュー

注意

jQuery Easing Pluginについてですが、
上記サイトよりダウンロードしたバージョンだとエラーになって
うまく動作してくれないようです。

LavaLamp for jQuery lovers!」のエントリーの
下の方にあるzipの中にあるバージョンを使った方がいいようです。

それとIEだと、うまく表示されないようです。
CSSの設定も今後時間をみつけて修正してみます。

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。