マウスオーバーでメニューが回転するAnimated Navigation

マウスオーバーで下からニョキニョキと回転してくるメニュースクリプト。
かなり目を引くメニューに仕上がると思います。

使用するAjaxライブラリはjQuery。

ダウンロード

使用するのはjquery-1.3.2.min.jsのみ。
ダウンロードしてサーバーにアップしておいてください。
jQueryダウンロード

実装手順

<head>～</head>に以下を挿入。
ご自身のサイトURLに変更（2か所）することをお忘れなく。

使用した背景画像
（a-bg.gif）
100px × 80px

<script type="text/javascript" src="http://サイトURL/jquery-1.3.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
	$("#topnav li").prepend("<span></span>");
	$("#topnav li").each(function() {
		var linkText = $(this).find("a").html();
		$(this).find("span").show().html(linkText);
	});
	$("#topnav li").hover(function() {
		$(this).find("span").stop().animate({
			marginTop: "-40"
		}, 250);
	} , function() {
		$(this).find("span").stop().animate({
			marginTop: "0"
		}, 250);
	});
});
</script>

<style type="text/css">
ul#topnav {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font-size: 1.1em;
}
ul#topnav li{
	margin: 0;
	padding: 0;
	display: block;
	overflow: hidden;
	float: left;
	height:40px;
}
ul#topnav a, ul#topnav span {
	padding: 10px 20px;
	float: left;
	text-decoration: none;
	color: #fff;
	background: url(http://サイトURL/a_bg.gif) repeat-x; /* 背景画像を指定 */
	text-transform: uppercase;
	clear: both;
	height: 20px;
	line-height: 20px;
}
ul#topnav a{
	color: #555;
	background-position: left bottom;
}
ul#topnav span{
	background-position: left top;
}
</style>

使用場所に以下を記述。

<ul id="topnav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

割と簡単に実装出来ると思います。
では、がんばってください。

Script（Animated Navigation with CSS & jQuery – Torrance Web Design）

«
»

コメントはまだありません

コメントは管理者の承認後に表示されます




Comment