JavaScript + Ajax 実践サンプル集 - jQueryのLavaLampプラグインを利用したラバランプ型メニュー

jQueryのLavaLampプラグインを利用したラバランプ型メニュー

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのLavaLampプラグインを利用してラバランプ型メニューを表示します。マウスを「サイトマップ」上に移動してクリックすると当サイトのホームページが表示されます。

このサンプルで使用しているイメージです。イメージを右クリックしてダウンロードしてください。

    $(function() {   
      $("#lavaLamp").lavaLamp({   
        fx: "backout",   
        speed: 700,   
        click: function(event, menuItem) {   
          return false;   
        }   
      });   
    });

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery - Lava Lamp</title>
  <link href="jQuery/LavaLamp/lavalamp_test.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script>
  <script src="jQuery/LavaLamp/jquery.easing.min.js" type="text/javascript"></script>
  <script src="jQuery/LavaLamp/jquery.lavalamp.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {
      $("#lavaLamp").lavaLamp({
        fx: "backout",
        speed: 700,
        click: function(event, menuItem) {
          return true;
          //return false;
        }
      });
    });    
  </script>

</head>
<body>
  <ul id="lavaLamp" class="lavaLampWithImage">
    <li class="current"><a href="#">ホーム</a></li>
    <li><a href="#">新着情報</a></li>
    <li><a href="#">商品情報</a></li>
    <li><a href="#">会社案内</a></li>
    <li><a href="http://jsajax.com">サイトマップ</a></li>
  </ul>
</body>
</html>

CSS部HEAD部BODY部

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
.lavaLampWithImage
{
  position: relative;
  height: 29px;
  width: 421px;
  background: url("bg.gif") no-repeat top;
  padding: 15px;
  margin: 10px 0;
  overflow: hidden;
}
.lavaLampWithImage li
{
  float: left;
  list-style: none;
}
.lavaLampWithImage li.back
{
  background: url("lava.gif") no-repeat right -30px;
  width: 9px;
  height: 30px;
  z-index: 8;
  position: absolute;
}
.lavaLampWithImage li.back .left
{
  background: url("lava.gif") no-repeat top left;
  height: 30px;
  margin-right: 9px; /* 7px is the width of the rounded shape */
}
.lavaLampWithImage li a
{
  font: bold 14px arial;
  text-decoration: none;
  color: #fff;
  outline: none;
  text-align: center;
  top: 7px;
  text-transform: uppercase;
  letter-spacing: 0;
  z-index: 10;
  display: block;
  float: left;
  height: 30px;
  position: relative;
  overflow: hidden;
  margin: auto 10px;
}
.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited
{
  border: none;
}

.lavaLampNoImage
{
  position: relative;
  height: 29px;
  width: 421px;
  background-color: white;
  padding: 15px;
  margin: 10px 0;
  overflow: hidden;
  border: 1px solid gray;
}
.lavaLampNoImage li
{
  float: left;
  list-style: none;
}
.lavaLampNoImage li.back
{
  border: 1px solid #000;
  background-color: #e6e8ea;
  width: 9px;
  height: 30px;
  z-index: 8;
  position: absolute;
}
.lavaLampNoImage li a
{
  font: bold 14px arial;
  text-decoration: none;
  color: #000;
  outline: none;
  text-align: center;
  top: 7px;
  text-transform: uppercase;
  letter-spacing: 0;
  z-index: 10;
  display: block;
  float: left;
  height: 30px;
  position: relative;
  overflow: hidden;
  margin: auto 10px;
}
.lavaLampNoImage li a:hover, .lavaLampNoImage li a:active, .lavaLampNoImage li a:visited
{
  border: none;
}

.lavaLampBottomStyle
{
  position: relative;
  height: 29px;
  width: 421px;
  background-color: white;
  padding: 15px;
  margin: 10px 0;
  overflow: hidden;
  border: 1px solid gray;
}
.lavaLampBottomStyle li
{
  float: left;
  list-style: none;
}
.lavaLampBottomStyle li.back
{
  border-bottom: 5px solid blue;
  width: 9px;
  height: 30px;
  z-index: 8;
  position: absolute;
}
.lavaLampBottomStyle li a
{
  font: bold 14px arial;
  text-decoration: none;
  color: #000;
  outline: none;
  text-align: center;
  top: 7px;
  text-transform: uppercase;
  letter-spacing: 0;
  z-index: 10;
  display: block;
  float: left;
  height: 30px;
  position: relative;
  overflow: hidden;
  margin: auto 10px;
}
.lavaLampBottomStyle li a:hover, .lavaLampBottomStyle li a:active, .lavaLampBottomStyle li a:visited
{
  border: none;
}

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
  <link href="jQuery/LavaLamp/lavalamp_test.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script>
  <script src="jQuery/LavaLamp/jquery.easing.min.js" type="text/javascript"></script>
  <script src="jQuery/LavaLamp/jquery.lavalamp.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {
      $("#lavaLamp").lavaLamp({
        fx: "backout",
        speed: 700,
        click: function(event, menuItem) {
          return true;
          //return false;
        }
      });
    });    
  </script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
  <ul id="lavaLamp" class="lavaLampWithImage">
    <li class="current"><a href="#">ホーム</a></li>
    <li><a href="#">新着情報</a></li>
    <li><a href="#">商品情報</a></li>
    <li><a href="#">会社案内</a></li>
    <li><a href="http://jsajax.com">サイトマップ</a></li>
  </ul>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

jQueryのLavaLampプラグインを利用したラバランプ型メニュー

JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

jQueryのLavaLampプラグインを利用したラバランプ型メニュー

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!