タグ アーカイブ: ナビゲーション

LavaLampと書いてもピンときませんよね。
グローバル・ナビゲーションで、マウスをもっていくと、ビヨーンと背景ブロックが追っかけてくるやつです。
こう書いてもきっとわかりませんね。
　

こんなやつです。使い方。
頭で指定しておくのはお決まり。ULにメニューを書いていきます。
下の例は、ULの背景にメニュー画像を置いて、その上を透過パネル（少し斜がかかったもの）が移動するようにしたものです。
メニュー画像を載せられればわかりやすいんだけど、今制作中のお客様のやつなんでね。

<script type="text/javascript" src="/js/jquery.lavalamp.js">
<script type="text/javascript" src="/js/jquery.easing.1.1.js">

  jQuery(function($) {
    $("#nav1").lavaLamp(
      {
        fx: "backout",
        speed: 700
      }
    );
  });

<ul class="lavaLampNoImage">
    <li class="current"><a href="#">MENU</a></li>
    <li><a href="/party/">PARTY PLAN</a></li>
    <li><a href="/access/">ACCESS</a></li>
    <li><a href="/contact">CONTACT</a></li>
</ul>

.lavaLampNoImage {
	background:#fff url(images/top-menu.png) no-repeat;
	width: 898px;
	height: 78px;
	position: relative;
	overflow: hidden;
	padding:1px;
	margin: 0;
	border: none;
}
.lavaLampNoImage li {
	margin:0;
	padding:0;
	float: left;
	list-style: none;
}
.lavaLampNoImage li.back {
	position: absolute;
	z-index: 8;
	height: 76px;
	background-color:#fff;
	opacity:0.2;
	filter:alpha(opacity=20);
	-ms-filter:"alpha( opacity=20 )";
}
.lavaLampNoImage li a {
	position: relative;
	z-index:10;
	display:block;
	overflow: hidden;
	float: left;
	height: 76px;
	font-size:8px;
	color:#C1955C !important;
	text-decoration:none;
}
.lavaLampNoImage li a:hover, .lavaLampNoImage li a:active, .lavaLampNoImage li a:visited {
	border:none;
}
#nav1l1, #nav1l1 a { width:152px;	}
#nav1l2, #nav1l2 a { width:197px; margin-left:2px;	}
#nav1l5, #nav1l5 a { width:121px; margin-left:2px;	}
#nav1l6, #nav1l6 a { width:123px; margin-left:2px;	}