菜单伸缩隐藏效果

稿源：互联网 2022-06-17 10:31:30 点击： 5883 撤稿纠错

仿Visual Studio面板伸缩功效果，有嵌入和折回效果。

以下讨论的是和相关的菜单伸缩隐藏效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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" />
<meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>仿Visual Studio面板伸缩功效果，www.zzjs.net整理收集，站长特效网欢迎您。</title>
<style type="text/css">
html,body,div,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,caption,th,td,img,form,fieldset,legend,input,label,button,textarea { margin:0; padding:0; }
html,body { font:12px/16px arial,Simsun,sans-serif; color:#333; text-align:center; background:#fff; overflow:hidden; }
body {
	scrollbar-face-color:#78c9ef;
	scrollbar-shadow-color:#ccf;
	scrollbar-highlight-color:#fff;
	scrollbar-3dlight-color:#2eb4f3;
	scrollbar-darkshadow-color:#fff;
	scrollbar-track-color:#e0f1fc;
	scrollbar-arrow-color:#fff;
}
ul { list-style:none; }
#layout_header,
#layout_content,
#layout_footer { width:1024px; margin:0 auto; }
#layout_header { height:91px; }
#layout_content { position:relative; overflow:hidden; }
#layout_footer { height:28px; background:#efefef url(/img/bg_footer.png) no-repeat 100%; }
#layout_footer span { display:block; height:100%; line-height:28px; vertical-align:middle; background:url(/img/bg_footer.png) no-repeat 0; }
#layout_header {
	border-bottom:2px solid #2eb4f3;
	background:url(/img/bg_banner.png) no-repeat 100%;
}
#layout_header h1 {
	width:500px;
	height:100%;
	text-indent:-9999px;
	background:url(/image/zzjs.ico) no-repeat;
	overflow:hidden;
	float:left;
}
.layoutInner {
	height:100%;
	overflow:auto;
}
.toolsTags,.toolsTags2 {
	position:absolute;
	left:0;
	border-right:1px solid #2eb4f3;
	background:#fff;
	z-index:9;
}
.toolsTags {
	width:20px;
	height:100%;
}
.toolsTags2 {
	width:auto;
	height:20px;
	bottom:0;
	_bottom:-1px;
}
.toolsTags li {
	height:79px;
	padding-top:10px;
	line-height:120%;
	text-align:center;
	cursor:pointer;
}
.toolsTags li,
.toolsTags li.now {
	padding-left:2px;
	font-weight:700;
	background:url(/img/un_tags.png);
}
.toolsTags li {
	color:#999;
	background-position:0 -89px;
}
.toolsTags li.now {
	margin-left:0;
	color:#fff;
	background-position:0 0;
}
.toolsTags2 li,
.toolsTags2 li.now {
	font-weight:700;
	line-height:20px;
	vertical-align:middle;
	background:url(/img/un_tags.png);
}
.toolsTags2 li {
	width:89px;
	height:100%;
	color:#fff;
	text-align:center;
	background-position:0 -178px;
	cursor:pointer;
	float:left;
}
.toolsTags2 li.now {
	border-top:0;
	color:#069;
	background-position:-89px -178px;
}
.toolsContent,.toolsContent2 {
	height:100%;
	border:1px solid #2eb4f3;
	border-top:0;
	border-left:0;
	background:#fff;
	filter:alpha(opacity=75);
	opacity:.75;
}
.toolsContent {
	position:absolute;
	top:0;
}
.toolsContent2 {
	border-left:1px solid #2eb4f3;
	border-right:0;
	float:left;
}
.toolsContent .toolsC,
.toolsContent2 .toolsC {
	text-align:left;
	overflow:auto;
	word-break:break-all;
}
.toolsContent .toolsCin { padding:5px; }
.toolsContent2 .toolsCin { padding:5px 5px 24px 5px; }
.toolsTitle {
	height:24px;
	text-indent:8px;
	font-weight:700;
	color:#006599;
	line-height:24px;
	text-align:left;
	vertical-align:middle;
	background:url(/img/bg_toolsTitle.png) repeat-x;
}
.toolsTitle a {
	display:block;
	width:16px;
	height:16px;
	margin:3px;
	text-indent:-999px;
	background:url(/img/un_float_ctrl.png);
	overflow:hidden;
	float:right;
}
.toolsTitle a.clickFold {
	background-position:0 -32px;
}
.toolsTitle a.clickTo {
	background-position:0 0;
}
.toolsTitle a.clickTo2 {
	background-position:0 -16px;
}
.toolsBar {
	position:absolute;
	top:0;
	width:1px;
	height:100%;
	background:#2eb4f3;
	cursor:col-resize;
	-moz-user-select:none;
	z-index:8;
}
</style>
<script>
/*
* By ximenchuixue, QQ:149561420, email:sabesabe3314@163.com *
*/
var ximen = {
	$:function(o){
		return document.getElementById(o);
	},
	getChild:function(o,s) {
		var x;
		if(s == "first") { x = o.firstChild; while(x.nodeType != 1) { x = x.nextSibling; } }
		else { x = o.lastChild; while(x.nodeType != 1) { x = x.previousSibling; } }
		return x;
	},
	isIn:0,
	ini:[
		20,														//0,tagsWidth
		1024,													//1,maxWidth
		'-302px',											//2,defaultLeft
		'toolsContent',								//3,
		'toolsContent2',							//4,
		'none',												//5,
		'block',											//6,
		'right',											//7,
		'clickTo2',										//8,
		'clickTo',										//9,
		'inline',											//10,
		'auto',												//11,
		'now',												//12,
		'toolsTags',									//13,
		'toolsTags2',									//14,
		'layoutInner',								//15,
		'out',												//16,
		'in',													//17,
		'clickTo',										//18,
		'clickFold',									//19,
		'嵌入',												//20,
		'浮起',												//21,
		24,														//22,
		'layout_header',							//23,
		'layout_content',							//24,
		'layout_footer',							//25,
		512,													//26,
		300,													//27
	]
};
/*op：浮动层容器；oc：右侧主内容；maxR：往右拖拽最大位移；maxL：往左拖拽最大位移；*/
ximen.drag = function(op,oc,maxR,maxL) {
	var par = op.parentNode,
		parHeight = par.offsetHeight,
		parLeft = par.offsetLeft,
		o = ximen.getChild(op,'first'),				//o：拖拽线条；
		oLast = ximen.getChild(op,'last'),		//面板显示内容区；
		mouseDown = function(e){
			var e = e || window.event,
				toolsContent = op,
				layoutInner = ximen.$(oc),
				mouseMove = function(e){
					var e = e || window.event,x = ximen.ini[0];
					if(toolsContent.className == ximen.ini[4]) {
						x = 0;
						e.clientX - x - parLeft >= maxR ? o.style.left = maxR + "px" : e.clientX - x - parLeft <= maxL ? o.style.left = maxL + "px" : o.style.left = e.clientX - x - parLeft + "px";
						e.clientX - x - parLeft >= maxR ? op.style.width = maxR + "px" : e.clientX - x - parLeft <= maxL ? op.style.width = maxL + "px" : op.style.width = e.clientX - x - parLeft + "px";
						layoutInner.style.width = ximen.ini[1] - toolsContent.offsetWidth + "px";
					}
					e.clientX - x - parLeft >= maxR ? o.style.left = maxR + "px" : e.clientX - x - parLeft <= maxL ? o.style.left = maxL + "px" : o.style.left = e.clientX - x - parLeft + "px";
					e.clientX - x - parLeft >= maxR ? op.style.width = maxR + "px" : e.clientX - x - parLeft <= maxL ? op.style.width = maxL + "px" : op.style.width = e.clientX - x - parLeft + "px";
				};
			if(o.setCapture){ o.setCapture(); }
			document.onmousemove = function(event) { mouseMove(event); }
			document.onmouseup = function() {
				if(o.releaseCapture){ o.releaseCapture(); }
				document.onmousemove = null;
			}
		};
	op.style.width = maxL + "px";
	op.style.height = parHeight - 1 + "px";
	oLast.style.height = parHeight - ximen.ini[22] - 1 + "px";
	o.style.left = maxL + "px";
	o.onmousedown = function(event) { mouseDown(event); }
}
ximen.layoutTo = function(o,oc,s,sClickTo,sClickFold) {
	var toolsContent = ximen.$(o),
		toolsTags = ximen.$(ximen.ini[13]),
		layoutInner = ximen.$(oc),
		clickTo = ximen.$(sClickTo),
		clickFold = ximen.$(sClickFold),
		sArr,
		sIn = [
			ximen.ini[4],
			ximen.ini[14],
			ximen.ini[1] - toolsContent.offsetWidth + 'px',
			ximen.ini[7],
			ximen.ini[8],
			function(){ximen.layoutTo(o,oc,ximen.ini[16],sClickTo,sClickFold)},
			ximen.ini[5],
			1,
			ximen.ini[2],
			ximen.ini[21]
		],
		sOut = [
			ximen.ini[3],
			ximen.ini[13],
			ximen.ini[11],
			ximen.ini[5],
			ximen.ini[9],
			function(){ximen.layoutTo(o,oc,ximen.ini[17],sClickTo,sClickFold)},
			ximen.ini[10],
			0,
			ximen.ini[0] + 'px',
			ximen.ini[20]
		];
	sArr = (s == ximen.ini[17]) ? sIn : sOut;
	toolsContent.className = sArr[0];
	toolsContent.style.left = sArr[8];
	toolsTags.className = sArr[1];
	layoutInner.style.width = sArr[2];
	layoutInner.style.styleFloat = sArr[3];
	layoutInner.style.cssFloat = sArr[3];
	clickTo.className = sArr[4];
	clickTo.title = sArr[9];
	clickTo.onclick = sArr[5];
	clickFold.style.display = sArr[6];
	ximen.isIn = sArr[7];
}
ximen.layoutFO = function(o,s) {
	var toolsContent = ximen.$(o),
		toolsContentWidth = toolsContent.offsetWidth,
		i = 40;
	if(s == 'fold') {
		toolsContent.aWhile = setInterval(function(){
			if(parseInt(toolsContent.style.left) <= -toolsContentWidth) {
				toolsContent.style.left = - toolsContentWidth + 'px';
				clearInterval(toolsContent.aWhile);
			}
			toolsContent.style.left = toolsContent.offsetLeft - i + 'px';
			i *= 1.1;
		},10);
	}
	else {
		if(parseInt(toolsContent.style.left) < ximen.ini[0]) {
			toolsContent.aWhile = setInterval(function(){
				if(parseInt(toolsContent.style.left) >= -ximen.ini[0]*3) {
					clearInterval(toolsContent.aWhile);
					setTimeout(function(){toolsContent.style.left = ximen.ini[0] + 'px';},1);
				}
				toolsContent.style.left = toolsContent.offsetLeft + i + 'px';
			},1);
		}
	}
}
ximen.setTags = function() {
	var toolsTags = ximen.$(ximen.ini[13]),
		lis = toolsTags.getElementsByTagName('li'),
		lisLen = lis.length,
		arrEle = [
			ximen.ini[3],
			ximen.ini[15],
			ximen.ini[18],
			ximen.ini[19]
		],
		arr,
		arr1 = [
			arrEle[0],
			ximen.ini[5],
			'0',
			function(k){ return ximen.ini[11]; },
			ximen.ini[5],
			ximen.ini[5],
			ximen.ini[5],
			2,
			ximen.ini[9],
			ximen.ini[10],
			ximen.ini[17],
			1,
			ximen.ini[20]
		],
		arr2 = [
			ximen.ini[4],
			ximen.ini[6],
			ximen.ini[2],
			function(j){ return ximen.ini[1] - ximen.$(arrEle[0] + (j + 1)).offsetWidth + 'px'; },
			ximen.ini[7],
			ximen.ini[7],
			ximen.ini[6],
			3,
			ximen.ini[8],
			ximen.ini[5],
			ximen.ini[16],
			0,
			ximen.ini[21]
		],
		toset = function(n,a) {
			ximen.$(arrEle[0] + (n + 1)).className = a[0];
			ximen.$(arrEle[0] + (n + 1)).style.display = a[1];
			ximen.$(arrEle[0] + (n + 1)).style.left = a[2];
			ximen.$(arrEle[1] + (n + 1)).style.width = a[3](n);
			ximen.$(arrEle[1] + (n + 1)).style.styleFloat = a[4];
			ximen.$(arrEle[1] + (n + 1)).style.cssFloat = a[5];
			ximen.$(arrEle[1] + (n + 1)).style.display = a[6];
			ximen.$(arrEle[1] + (n + 1)).style.zIndex = a[7];
			ximen.$(arrEle[2] + (n + 1)).className = a[8];
			ximen.$(arrEle[2] + (n + 1)).title = a[12];
			ximen.$(arrEle[3] + (n + 1)).style.display = a[9];
			(function(x) {
				ximen.$(arrEle[2] + x).onclick = function(){
					ximen.layoutTo(arrEle[0] + x,arrEle[1] + x,a[10],arrEle[2] + x,arrEle[3] + x);
					ximen.isIn = a[11];
				};
			})(n + 1);
		};
	for(var i=0;i<lisLen;i++) {
		(function(j) {
			lis[j].onmouseover = function(){
				if(ximen.isIn == 0) {						//如果面板还没有钉入，下同
					if(parseInt(ximen.$(ximen.ini[3] + (j + 1)).style.left) < ximen.ini[0]) {
						for(var k=0;k<lisLen;k++) {
							ximen.$(ximen.ini[3] + (k + 1)).style.zIndex = 4;
							ximen.$(ximen.ini[3] + (k + 1)).style.left = ximen.ini[2];
							clearInterval(ximen.$(ximen.ini[3] + (k + 1)).aWhile);
							ximen.$(ximen.ini[3] + (k + 1)).style.display = ximen.ini[5];
							ximen.$(ximen.ini[15] + (k + 1)).style.display = ximen.ini[5];
							ximen.$(ximen.ini[15] + (k + 1)).style.zIndex = 2;
							lis[k].className = '';
						}
						ximen.$(ximen.ini[3] + (j + 1)).style.zIndex = 5;
						ximen.layoutFO(ximen.ini[3] + (j + 1),'open');
						ximen.$(ximen.ini[3] + (j + 1)).style.display = ximen.ini[6];
						ximen.$(ximen.ini[15] + (j + 1)).style.display = ximen.ini[6];
						ximen.$(ximen.ini[15] + (j + 1)).style.zIndex = 3;
						this.className = ximen.ini[12];
					}
				}
				else {
					for(var k=0;k<lisLen;k++) {
						toset(k,arr1);
						lis[k].className = '';
					}
					toset(j,arr2);
					this.className = ximen.ini[12];
				}
			}
		})(i);
		ximen.drag(ximen.$(ximen.ini[3] + (i + 1)),arrEle[1] + (i + 1),ximen.ini[26],ximen.ini[27]);
	}
}
ximen.setLayout = function() {
	var layout_header = ximen.$(ximen.ini[23]),
		layout_content = ximen.$(ximen.ini[24]),
		layout_footer = ximen.$(ximen.ini[25]),
		toolsContent1 = ximen.$(ximen.ini[3] + 1),
		toolsContent2 = ximen.$(ximen.ini[3] + 2),
		toolsContent3 = ximen.$(ximen.ini[3] + 3),
		setHeight = function() {
			var newHeight = document.documentElement.clientHeight - layout_header.offsetHeight - layout_footer.offsetHeight;
			layout_content.style.height = newHeight + 'px';
			toolsContent1.style.height = toolsContent2.style.height = toolsContent3.style.height = newHeight - 1 + "px";
			ximen.getChild(toolsContent1,'last').style.height = ximen.getChild(toolsContent2,'last').style.height = ximen.getChild(toolsContent3,'last').style.height = newHeight - ximen.ini[22] - 1 + "px";
		};
	setHeight();
	ximen.setTags();
	window.onresize = setHeight;
}
window.onload = function() { ximen.setLayout(); }
</script>
</head>
<body>
<div id="layout_header">
	<h1>某某某管理平台</h1>
</div>
<div id="layout_content">
	<ul id="toolsTags" class="toolsTags">
		<li class="now">检索目录一</li>
		<li>检索目录二</li>
		<li>检索目录三</li>
	</ul>
	<div id="toolsContent1" class="toolsContent" style="left:20px;">
		<div class="toolsBar"></div>
		<div class="toolsTitle"><a href="#;" id="clickFold1" title="折回" class="clickFold" onclick="ximen.layoutFO('toolsContent1','fold');">折回</a> <a href="#;" id="clickTo1" title="嵌入" class="clickTo" onclick="ximen.layoutTo('toolsContent1','layoutInner1','in','clickTo1','clickFold1');">嵌入</a> 检索目录一</div>
		<div class="toolsC">
			<div class="toolsCin">
				<img src="/img/zzz_tree.png" />
			</div>
		</div>
	</div>
	<div id="toolsContent2" class="toolsContent" style="left:-302px;">
		<div class="toolsBar"></div>
		<div class="toolsTitle"><a href="#;" id="clickFold2" title="折回" class="clickFold" onclick="ximen.layoutFO('toolsContent2','fold');">折回</a> <a href="#;" id="clickTo2" title="嵌入" class="clickTo" onclick="ximen.layoutTo('toolsContent2','layoutInner2','in','clickTo2','clickFold2');">嵌入</a> 检索目录二</div>
		<div class="toolsC">
			<div class="toolsCin">
				<img src="/img/zzz_tree.png" />
			</div>
		</div>
	</div>
	<div id="toolsContent3" class="toolsContent" style="left:-302px;">
		<div class="toolsBar"></div>
		<div class="toolsTitle"><a href="#;" id="clickFold3" title="折回" class="clickFold" onclick="ximen.layoutFO('toolsContent3','fold');">折回</a> <a href="#;" id="clickTo3" title="嵌入" class="clickTo" onclick="ximen.layoutTo('toolsContent3','layoutInner3','in','clickTo3','clickFold3');">嵌入</a> 检索目录三</div>
		<div class="toolsC">
			<div class="toolsCin">
				<img src="/img/zzz_tree.png" />
			</div>
		</div>
	</div>
	<div id="layoutInner1" class="layoutInner">
		<table style="width:100%;">
			<tr>
				<td>11111111</td>
				<td>11111111</td>
				<td>11111111</td>
				<td>
					<div style="width:50%; padding:10px; border:1px dashed #333; text-align:left; background:#eee;">
						<h2>仿Visual Studio面板 beta</h2>
						<ol style="padding:10px 10px 10px 20px;">
							<li>支持鼠标拖拽面板右侧改变面板宽度</li>
							<li>限制面板最小宽度和最大宽度</li>
							<li>点面板右上角按钮实现“嵌入”、“浮起”、“折回”功能</li>
							<li>面板“浮起”时，tag切换面板动态折回与展开</li>
							<li>面板“嵌入”时，面板嵌入页面中，tag区落到下方</li>
                            <li>zzjs.net，站长特效，使用.net域名</li>
                            <li>高质量js特效及广告代码，站长必备</li>
                            <li>zzjs打造国内最帅的网页特效网站，欢迎您的到来。</li>
						</ol>
					</div>
				</td>
			</tr>
			<tr>
				<td>fdsfs</td>
				<td>fdsfs</td>
				<td>fdsfs</td>
				<td> </td>
			</tr>
			<tr>
				<td>http://www.zzjs.net</td>
				<td>fdsfs</td>
				<td>fdsfs</td>
				<td> </td>
			</tr>
		</table>
	</div>
	<div id="layoutInner2" class="layoutInner">
		<table style="width:100%;">
			<tr>
				<td>站长特效网</td>
				<td>222222</td>
				<td>222222</td>
				<td>222222</td>
			</tr>
			<tr>
				<td>fdsfs</td>
				<td>fdsfs</td>
				<td>fdsfs</td>
				<td>fdsfs</td>
			</tr>
			<tr>
				<td>fdsfs</td>
				<td>fdsfs</td>
				<td>fdsfs</td>
				<td>fdsfs</td>
			</tr>
		</table>
	</div>
	<div id="layoutInner3" class="layoutInner">
		<table style="width:100%;">
			<tr>
				<td>www.zzjs.net</td>
				<td>www.zzjs.net</td>
				<td>www.zzjs.net</td>
				<td>www.zzjs.net</td>
			</tr>
			<tr>
				<td>www.zzjs.net</td>
				<td>www.zzjs.net</td>
				<td>www.zzjs.net</td>
				<td>www.zzjs.net</td>
			</tr>
			<tr>
				<td>www.zzjs.net</td>
				<td>www.zzjs.net</td>
				<td>www.zzjs.net</td>
				<td>www.zzjs.net</td>
			</tr>
		</table>
	</div>
</div>
<div id="layout_footer"><a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>
</div>
</body>
</html>

关于菜单伸缩隐藏效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2016295162323.shtml方便下次再访问哦。

·上一篇： 利用JQUERY实现清空所有文本框的内容
·下一篇： 纯css制作的下拉菜单

菜单伸缩隐藏效果

文章分类LIST >>返回首页

最新游戏

最新新闻