横からスライドするグローバルメニューをjQueryで作ってみました。

矢印のボタンをクリックすることで、グローバルメニューが横からスライドして出てきます。

↓以下が実際のソースサンプルです。

<script>
$(function () {
	var hantei = true;
	$("#sideBtn").click(function () {
		if(hantei){
			$("#gNav").animate({
				"margin-right": "0"
			}, 500, "swing", function(){
				$("#sideBtn img").attr("src","image/arrow2.gif");
				hantei = false;
			});
		} else {
			$("#gNav").animate({
				"margin-right": "-450px"
			}, 500, "swing", function(){
				$("#sideBtn img").attr("src","image/arrow.gif");
				hantei = true;
			});
		}
	});
});
</script>

<style>
		* {
			margin: 0;
			padding: 0;
			border: 0;
		}

		#main {
			position: relative;
			width: 960px;
			height: 500px;
			border: 1px solid #000;
			margin: 0 auto;
			overflow: hidden;
		}

		#gNav {
			position: absolute;
			top: 0;
			right: 0;
			width: 480px;
			margin-right: -450px;
			background: #000;
			color: #fff;
		}

		#sideBtn {
			position: absolute;
			top: 0;
			left: 0;
			width: 30px;
			height: 190px;
		}

		#sideBtn img {
			padding-top: 70px;
		}

		#gNav ul li {
			box-sizing: border-box;
			border: 1px solid #fff;
			margin-left: 30px;
			text-align: center;
			list-style-type: none;
		}

		#gNav ul li a {
			display: block;
			width: 100%;
			padding: 10px 0;
			color: #fff;
			text-decoration: none;
		}
</style>

<div id="main">
		<div id="gNav">
			<div id="sideBtn"><img src="image/arrow.gif"></div>
			<ul>
				<li><a href="#">メニュー1</a></li>
				<li><a href="#">メニュー2</a></li>
				<li><a href="#">メニュー3</a></li>
				<li><a href="#">メニュー4</a></li>
				<li><a href="#">メニュー5</a></li>
			</ul>
		</div>
	</div>

デモページは、こちら