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

2008/08/22

カテゴリ：: jQuery plugin紹介

タグ：: javascript; jquery; メニュー

LavaLamp menuを使ったメニューを作ってみるその２

昨日書いた
「jQueryを使ってメニューを装飾：LavaLamp menuを使ったメニューを作ってみる」
いろいろ間違い等もあったのですが、現在IE6以外では正常に動作するようになりました。

IE6では、なぜか動作中の背景画像を毎回ダウンロードしに行っているようで、
かなり動作が重くなってしまい、それ故スムーズに動作しなかったようです。

画像があるところのサーバーが違うからなのだろうか？

自分のパソコン内で実験してみたときは、
IE6でも、画像が途切れてしまうCSSの設定ミスはあるものの、
スムーズに動作していたので、たぶん読み込みの問題なのだろうなって思います。

さて、昨日は画像だけでやってみたのですが、
参考サイトをみてみたところ、他のサンプルもあって、
画像じゃなくてもできるようだったので、
そちらのサンプルも作ってみる事にしました。

今回は背景色やボーダーの設定で作ってみました。

若干バランスは悪いですがご了承ください。

サンプル　その１

■サンプルHTML（プレビューその１の場合）

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

■サンプルCSS（プレビューその１の場合）

.lavaLamp01 {
    position: relative;
    width:450px;
    background-color:#ff00ff;
}

.lavaLamp01:after{
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.lavaLamp01 li {
    float:left;
}

.lavaLamp01 li a {
    padding-left: 10px;
    _padding-left: 15px;/*for IE6*/
    margin: 4px;
    height: 20px;
    display:block;
    _display:inline;/*for IE6*/
    font-weight:bold;
    font-size:120%;
    text-align:center;
    color:#fff;
    position: relative;
    z-index: 10;
}

.lavaLamp01 li.back {
    padding: 0px;
    margin-top: 4px;
    margin-left: 4px;
    position: absolute;
    background-color:#0000ff;
    height:30px;
    z-index: 8;
}

.lavaLamp01 li a:hover{
    text-decoration: none;
    color: #fff;
}

.lavaLamp01 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() { $(".lavaLamp01").lavaLamp({ fx: "backout", speed: 1000 })});
</script>
<style type="text/css">

■プレビューその１

目立つ色で作ったら、なんだか変な感じに・・・
色合いも各自調節してみてください。

サンプル　その２

■サンプルHTML（プレビューその２の場合）

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

■サンプルCSS（プレビューその２の場合）

.lavaLamp02 {
    position: relative;
    width:450px;
    background-color:#fff;
}

.lavaLamp02:after{
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.lavaLamp02 li {
    float:left;
}

.lavaLamp02 li a {
    padding-left: 10px;
    _padding-left: 15px;/*for IE6*/
    padding-top: 4px;
    margin: 4px;
    height: 20px;
    display:block;
    _display:inline;/*for IE6*/
    font-weight:bold;
    font-size:120%;
    text-align:center;
    position: relative;
    z-index: 10;
}

.lavaLamp02 li.back {
    padding: 0px;
    margin-top: 4px;
    margin-left: 4px;
    position: absolute;
    border-bottom:2px solid #0000ff;
    height:30px;
    z-index: 8;
}

.lavaLamp02 li a:hover{
    text-decoration: none;
}

■サンプルスクリプト（プレビューその２の場合）

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