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

<< お盆帰省日記２ | TOP | jQueryを使ってメニューを装飾：LavaLamp menuを使ったメニューを作ってみるその２ >>

2008年08月21日

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

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">