Posted in Javascript onAugust 24, 2015
本文实例讲述了jquery实现像栅栏一样左右滑出式二级菜单效果代码。分享给大家供大家参考。具体如下：
这里演示了jquery实现像栅栏一样的左右滑出式二级菜单，会向左或向右滑出，支持中英文，使用时别忘了引入jquery插件。
运行效果截图如下：
在线演示地址如下：
具体代码如下：
<!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="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>
希望本文所述对大家的jquery程序设计有所帮助。
jquery实现像栅栏一样左右滑出式二级菜单效果代码
- Author -
企鹅声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@