jQ侧边固定可折叠悬浮导航代码

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

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

以下是 jQ侧边固定可折叠悬浮导航代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQ侧边固定可折叠悬浮导航代码</title>
<link href="css/fixed.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/jquery.cookie.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/jquery.fixed.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/init.fixed.js" charset="UTF-8"></script>
</head>
<body>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<center><h1>jQuery页面侧边固定悬浮导航代码</h1></center>
<!--导航HTML结构在init.fixed.js里面，js加载时会动态添加到页面中-->
</body>
</html>

JS代码(init.fixed.js):

var browser={
	versions:function(){
	var u = navigator.userAgent,app = navigator.appVersion;
	return{
	//移动终端浏览器版本信息trident:u.indexOf('Trident') > -1,//IE内核presto:u.indexOf('Presto') > -1,//opera内核webKit:u.indexOf('AppleWebKit') > -1,//苹果、谷歌内核gecko:u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核mobile:!!u.match(/AppleWebKit.*Mobile.*/
),//是否为移动终端ios:!!u.match(/\(i[^;
	]+;
	( U;
	)? CPU.+Mac OS X/),//ios终端android:u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,//android终端或者uc浏览器iPhone:u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1,//是否为iPhone或者QQHD浏览器iPad:u.indexOf('iPad') > -1,//是否iPadwebApp:u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部}
;
}
(),language:(navigator.browserLanguage || navigator.language).toLowerCase()}
$(document).ready(function(){
	if(!browser.versions.mobile){
	var _st = $.cookie("fixed");
	if(!_st)_st=0;
	var _code = '<div id="fixed"><dl><dd><a href="#" class="web">页游</a></dd><dd><a href="#" class="mb">手游</a></dd><dd><a href="#" target="_blank" class="dj">动漫</a></dd><dd><a href="#" target="_blank" class="mh">漫画</a></dd><dd><a href="#" target="_blank" class="dh">动画</a></dd><dd><a href="#" class="pk165">小说</a></dd><dd><a href="#" class="w267">社区</a></dd><dt><a href="javascript:void(0);
	" class="close"></a></dt></dl></div>';
	if(_st==1){
	$(_code).hide().appendTo("body").fixed({
	x:-44,y:0}
).fadeIn(500);
	$("#fixed dt a.close").width('68px');
}
else{
	$(_code).hide().appendTo("body").fixed({
	x:0,y:0}
).fadeIn(500);
}
$("#fixed dt").click(function(){
	var _left = $("#fixed").offset().left;
	if(_left>=0){
	$.cookie("fixed",1,{
	path:'/'}
);
	$("#fixed").animate({
	left:-44}
,300,'swing',function(){
	$("#fixed dt a.close").hide().width('68px').fadeIn(500);
}
);
}
else{
	$.cookie("fixed",0,{
	path:'/'}
);
	$("#fixed dt a.close").width('44px');
	$("#fixed").animate({
	left:0}
,300,'swing',function(){
}
);
}
}
);
}
}
);

CSS代码(fixed.css):

*{margin:0;padding:0;list-style:none;border:none;outline:none;}
body{font-family:"microsoft yahei";background:#444;color:#fff;}
#fixed{background-color:#133E64;width:44px;left:0;top:0;bottom:0;z-index:99999;}
#fixed dl{list-style:none;padding:0px;margin:0px;border-top:1px solid #184E7E;width:44px;position:absolute;left:0;top:50%;bottom:0;vertical-align:middle;margin-top:-240px;}
#fixed dt{position:absolute;width:44px;display:block;bottom:85px;}
#fixed dd{border-bottom:1px solid #184E7E;font:normal 12px/normal 'microsoft yahei';}
#fixed a,#fixed a:link,#fixed a:visited{text-decoration:none;display:block;height:60px;background:transparent url(../images/fixed.icon.png) top center no-repeat;color:#FFFFFF;text-align:center;line-height:90px;overflow:hidden;}
#fixed a:hover{background-color:#1C588E;}
#fixed a.web{background-position:-7px -10px;}
#fixed a.mb{background-position:-67px -10px;}
#fixed a.dj{background-position:-127px -10px;}
#fixed a.mh{background-position:-187px -10px;}
#fixed a.dh{background-position:-247px -10px;}
#fixed a.pk165{background-position:-307px -10px;}
#fixed a.w267{background-position:-367px -10px;}
#fixed a.close{background-color:#C40000;background-position:-427px top;}

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