当前位置：首页 > 网页特效 > 导航菜单 >

像栅栏一样的左右滑出式二级菜单

时间：2013-12-26 08:57 来源：互联网作者：源码搜藏收藏推荐

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery栅栏菜单左右划出菜单</title>
<title>Grooveshark风格的菜单</title>
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery1.3.2.js"></script>
<script type="text/javascript">
//jquery.grooveshark.js
jQuery.fn.grooveshark = function() {	
	return this.each(function() {
		var raw = this;
		var elm = jQuery(this);
		var width = elm.width();
		var tel = 1;
		var smw = (width - 150) + 'px';
		jQuery('.ui-gs-panel', raw).css('left', width + 'px').hide();
		jQuery('.ui-gs-panel li', raw).css(width, smw);
		jQuery('.ui-gs-main li', raw).click(function() {
			var panel = jQuery(this).attr('rel');
			jQuery('.ui-gs-main li', raw).each(function() {
				var el = jQuery(this);
				if(el.hasClass('ui-active')) el.removeClass('ui-active');
			});
			jQuery(this).addClass('ui-active');
			jQuery('.ui-gs-main', raw).animate({ width: "150px" }, 1000);
			jQuery('.' + panel, raw).css('z-index', tel += 1).show().animate({ 'left': '150px' }, 1000, function() {
				jQuery('.ui-gs-panel', raw).each(function() {
					if(jQuery(this).hasClass(panel) == false) {
						jQuery(this).css('left', width + 'px');
						jQuery(this).css('z-index', '1');
						jQuery(this).hide();
					}
				});
			});
		});
	});	
};
jQuery.fn.backhome = function() {
	return this.each(function() {
		var raw = this;
		var width = jQuery(raw).width();
		jQuery('.ui-active', raw).each(function() {
			jQuery(this).removeClass('.ui-active');
		});
		jQuery('.ui-gs-main', raw).animate({width: '100%'}, 1000).removeClass('ui-active');
			jQuery('.ui-gs-panel', raw).each(function() {
			jQuery(this).animate({'left': width + 'px'}, 1000, function() {
				$(this).hide();
			});
		});
	});
};
</script>
<style type="text/css">
body{font: 12px "Century Gothic", Tahoma, Verdana, Arial, sans-serif;margin: 0;overflow-x: hidden;}
#container{display: block;width: 100%;height: 500px;border-top: 5px solid #ccc;border-bottom: 5px solid #ccc;overflow-x: hidden;position: relative;}
.ui-gs-main{display: block;width: 100%;overflow: hidden;position: absolute;top: 0;left: 0;}
.ui-gs-main ul{list-style: none;margin: 0;padding: 0;}
.ui-gs-main ul li{display: block;width: 100%;padding-top: 15px;padding-bottom: 15px;text-indent: 25px;border-bottom: 1px solid #ccc;}
.ui-gs-main ul li: hover{background: #f0f2f5;}
.ui-gs-panel{display: block;width: 100%;overflow: hidden;position: absolute;top: 0;left: 0;}
.ui-gs-panel ul{list-style: none;margin: 0;padding: 0;}
.ui-gs-panel ul li{display: block;width: 100%;padding-top: 15px;padding-bottom: 15px;text-indent: 25px;border-bottom: 1px solid #ccc;border-left: 1px solid #ccc;background: white;}
.ui-gs-panel ul li: hover{background: #f0f2f5;}
li.ui-active{background: #f0f2f5;}
</style>
<script type="text/javascript">
$(document).ready(function() {
	$('#container').grooveshark();
	$('#backhome').click(function() {
		$('#container').backhome();
	});
});
</script>
	</head>
	<body>
		<div id="container">
			<div class="ui-gs-main">
				<ul>
					<li rel="home">主页</li>
					<li rel="over_ons">作品</li>
					<li rel="portfolio">链接</li>
					<li rel="contact">联系</li>
				</ul>
			</div>
			<div class="ui-gs-panel home">
				<ul>
					<li>最新更新</li>
					<li>热点排行</li>
					<li>时事政治</li>
					<li>喜欢电影</li>
					<li>我的音乐</li>
					<li>我的收藏</li>
					<li>程序人生</li>
					<li>娱乐天地</li>
					<li>婚姻生活</li>
					<li>五花八门</li>
				</ul>
			</div>
			<div class="ui-gs-panel over_ons">
				<ul>
					<li>jquery</li>
					<li>ASP</li>
					<li>PHP</li>
					<li>JAVA</li>
					<li>JSP</li>
					<li>AJAX</li>
					<li>ASP.NET</li>
					<li>VC++</li>
					<li>C#</li>
				</ul>
			</div>
			<div class="ui-gs-panel portfolio">
				<ul>
					<li>百度</li>
					<li>新浪</li>
					<li>网易</li>
					<li>腾讯</li>
					<li>搜狐</li>
					<li>天涯</li>
				</ul>
			</div>
			<div class="ui-gs-panel contact">
				<ul>
					<li>北京</li>
					<li>上海</li>
					<li>天津</li>
					<li>重庆</li>
					<li>成都</li>
					<li>广州</li>
					<li>常州</li>
					<li>深圳</li>
					<li>杭州</li>
					<li>无锡</li>
					<li>郑州</li>
					<li>武汉</li>
				</ul>
			</div>
		</div>
</body>
</html>

网页特效

像栅栏一样的左右滑出式二级菜单

导航菜单下载排行

最新文章