Flashの用な動きのあるサイドメニュー

Flashの用な動きのあるサイドメニュー

マウスオーバーした Flash の伸縮するアニメーションをしてくれる jQuery のプラグインです。

demo page

…ここからが続き

ダウンロード・使い方

ダウンロード元「jQuery "flash like" menu

head内

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
 <script type="text/JavaScript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/JavaScript" src="js/jquery.menuZoomer.js"></script>

XHTML

<ul class="menu">
  <li><a href="#">CSS</a></li>
  <li><a href="#">Javascript</a></li>
  <li><a href="#">Webデザイン</a></li>
  <li><a href="#">Movable Type</a></li>
</ul>

CSS

.menu	{ margin:0; padding:0; line-height: 200%; }
.menu a	{ text-decoration: none; }
.menu li { list-style-type: none; margin:0; padding:0; }

jquery.menuZoomer.js

$(document).ready(function() {
	$(".menu a").menuZoomer({
		speed:400,
		fontColor:"#d7df23",
		fontSize : "200%",
		lineHeight:"40px",
		easing : "easeOutExpo"
	})
});

jQuery.fn.menuZoomer = function(settings) {
	 settings = jQuery.extend({
		speed:400,
		fontColor:"#d7df23",
		fontSize : "200%",
		lineHeight:"40px",
		easing : "easeOutExpo"
	}, settings);

				~ 省略 ~

  • speed:400, マウスオーバー時のスピードの指定です。
  • fontColor:"#d7df23", マウスオーバー時の色の指定です。
  • fontSize : "200%", マウスオーバー時のフォントサイズの指定です。
  • lineHeight:"40px", マウスオーバー時の lineHeight の指定です。

demo page

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article