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

Category
： Javascript

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

ダウンロード・使い方

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 の指定です。