THE HAM MEDIA BLOG

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

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

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

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

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

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

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

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

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

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

サンプル その1

■サンプルHTML(プレビューその1の場合)

<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(プレビューその1の場合)

.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;
}

■サンプルスクリプト(プレビューその1の場合)

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

■プレビューその1

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

サンプル その2

■サンプルHTML(プレビューその2の場合)

<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(プレビューその2の場合)

.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;
}

■サンプルスクリプト(プレビューその2の場合)

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

■プレビューその2

注意

CSSはあくまでここでのブログの場合です。
リストの数や幅などはケースによって変更してください。

IEだと、設定によって誤差がでるようだったので、
for IE6と書かれた部分で調整してあります。
(前回の説明で抜けていますが、アンダーバーをつけることで、
 その部分はIEに適応されるようになります。)

それとCSSの設定が悪いと、IE6だとブラウザが強制終了かかる場合があるようです。
どんな場合に起きるかは検証できませんでしたが、強制終了がでるようでしたら、
CSSの修正をしてみてください。

尚、今回のサンプルはIE7で未検証です。すみません・・・

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

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

ホームページアドレス:

コメント: [必須入力]

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


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/105166656
※ブログオーナーが承認したトラックバックのみ表示されます。

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

トップに戻る

×

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