jquery實作像柵欄一樣左右滑出式二級選單效果碼_jquery
- WBOY原創
- 2016-05-16 15:42:541358瀏覽
本文實例講述了jquery實作像柵欄一樣左右滑出式二級選單效果程式碼。分享給大家供大家參考。具體如下：
這裡示範了jquery實作像柵欄一樣的左右滑出式二級選單，會向左或向右滑出，支援中英文，使用時別忘了引入jquery插件。
運作效果截圖如下：
線上示範網址如下：
http://demo.jb51.net/js/2015/jquery-left-right-show-nav-menu-codes/
具體程式碼如下：
<!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程式設計有所幫助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn