jQuery网页侧边滑动展开导航特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery网页侧边滑动展开导航特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery网页侧边滑动展开导航</title>
  <style type="text/css">
    body { font-family: Arial; background: #eee; }
    h1, h2 { margin-top: 0; }
    p { color: #ccc; line-height: 1.5; }
    #page { width: 940px; height: 400px; padding: 20px; margin: 0 auto; background: white; }
    .panel {
      display: none;
      width: 220px;
      padding: 20px;
      background-color: #333;
      color: #fff;
      box-shadow: inset 0 0 5px 5px #222;
    }
  </style>
</head>
<body>
  <!-- Centered page -->
  <div id="page">
    <h1>Panel slider example</h1>
    <a id="left-panel-link" href="#left-panel">打开左面板</a> |
    <a id="right-panel-link" href="#right-panel">打开右面板</a>    
  </div>

  <!-- Left panel -->
  <div id="left-panel" class="panel">
    <h2>Left panel</h2>
    <p>Click anywhere outside panel to close it.</p>
  </div>

  <!-- Right panel -->
  <div id="right-panel" class="panel">
    <h2>Right panel</h2>
    <p>Clicking outside this panel wont close it because <code>clickClose = false</code></p>
    <button id="close-panel-bt">Close</button>
  </div>
  <script src="jquery-3.4.1.min.js"></script>
  <script src="jquery.panelslider.js"></script>
  <script>
    $('#left-panel-link').panelslider();
    $('#right-panel-link').panelslider({side: 'right', clickClose: false, duration: 200 });
    $('#close-panel-bt').click(function() {
      $.panelslider.close();
    });
  </script>
</body>
</html>

JS代码(jquery.panelslider.js):

/*www.sucaijiayuan.com*/
(function($){
	'use strict';
	var $body = $('body'),_sliding = false;
	function _slideIn(panel,options){
	var panelWidth = panel.outerWidth(true),bodyAnimation ={
}
,panelAnimation ={
}
;
	if(panel.is(':visible') || _sliding){
	return;
}
_sliding = true;
	panel.addClass('ps-active-panel').css({
	position:'fixed',top:0,height:'100%','z-index':999999}
);
	panel.data(options);
	switch (options.side){
	case 'left':panel.css({
	left:'-' + panelWidth + 'px',right:'auto'}
);
	bodyAnimation['margin-left'] = '+=' + panelWidth;
	panelAnimation.left = '+=' + panelWidth;
	break;
	case 'right':panel.css({
	left:'auto',right:'-' + panelWidth + 'px'}
);
	bodyAnimation['margin-left'] = '-=' + panelWidth;
	panelAnimation.right = '+=' + panelWidth;
	break;
}
$body.animate(bodyAnimation,options.duration);
	panel.show().animate(panelAnimation,options.duration,function(){
	_sliding = false;
}
);
}
$.panelslider = function(element,options){
	var active = $('.ps-active-panel');
	var defaults ={
	side:'left',// panel side:left or right duration:200,// Transition duration in miliseconds clickClose:true // If true closes panel when clicking outside it}
;
	options = $.extend({
}
,defaults,options);
	// If another panel is opened,close it before opening the new one if(active.is(':visible') && active[0] != element[0]){
	$.panelslider.close(function(){
	_slideIn(element,options);
}
);
}
else if(!active.length || active.is(':hidden')){
	_slideIn(element,options);
}
}
;
	$.panelslider.close = function(callback){
	var active = $('.ps-active-panel'),duration = active.data('duration'),panelWidth = active.outerWidth(true),bodyAnimation ={
}
,panelAnimation ={
}
;
	if(!active.length || active.is(':hidden') || _sliding){
	return;
}
_sliding = true;
	switch(active.data('side')){
	case 'left':bodyAnimation['margin-left'] = '-=' + panelWidth;
	panelAnimation.left = '-=' + panelWidth;
	break;
	case 'right':bodyAnimation['margin-left'] = '+=' + panelWidth;
	panelAnimation.right = '-=' + panelWidth;
	break;
}
active.animate(panelAnimation,duration);
	$body.animate(bodyAnimation,duration,function(){
	active.hide();
	active.removeClass('ps-active-panel');
	_sliding = false;
	if(callback){
	callback();
}
}
);
}
;
	// Bind click outside panel and ESC key to close panel if clickClose is true $(document).bind('click keyup',function(e){
	var active = $('.ps-active-panel');
	if(e.type == 'keyup' && e.keyCode != 27){
	return;
}
if(active.is(':visible') && active.data('clickClose')){
	$.panelslider.close();
}
}
);
	// Prevent click on panel to close it $(document).on('click','.ps-active-panel',function(e){
	e.stopPropagation();
}
);
	$.fn.panelslider = function(options){
	this.click(function(e){
	var active = $('.ps-active-panel'),panel = $(this.getAttribute('href'));
	// Close panel if it is already opened otherwise open it if (active.is(':visible') && panel[0] == active[0]){
	$.panelslider.close();
}
else{
	$.panelslider(panel,options);
}
e.preventDefault();
	e.stopPropagation();
}
);
	return this;
}
;
}
)(jQuery);

附件:下载该文件资源,减少时间成本(增值服务)