一个界面超级简单的纵向折叠菜单，点击合拢展开

发布时间：2018-09-15 17:16:19 所属栏目：政策来源：站长网

导读：一个界面超级简单的纵向折叠菜单，点击合拢展开，这是从某商城扣下来的代码，只不过这个网站菜了点，这个产品分类菜单太简单了，只经过了简洁优化处理，可折叠、可展开的导航菜单，初步美化成这样了，有需要的自己动手吧，蓝色风格，大众化，还是挺漂亮的

　　一个界面超级简单的纵向折叠菜单，点击合拢展开，这是从某商城扣下来的代码，只不过这个网站菜了点，这个产品分类菜单太简单了，只经过了简洁优化处理，可折叠、可展开的导航菜单，初步美化成这样了，有需要的自己动手吧，蓝色风格，大众化，还是挺漂亮的。

　　示例：

<html> <head> <title>商品目录</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <STYLE type=text/css>BODY { MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 4px; MARGIN-RIGHT: 0px; FONT-FAMILY: "宋体" } A { FONT-WEIGHT: 400; FONT-SIZE: 9pt; COLOR: black; TEXT-DECORATION: none } A:hover { FONT-WEIGHT: 400; FONT-SIZE: 9pt; COLOR: red; TEXT-DECORATION: underline } A:active { FONT: 9pt "宋体"; CURSOR: hand; COLOR: #ff0033 } </STYLE> <script language="<b>Java</b>Script1.2"> scores = new Array(20);var numTotal=0; NS4 = (document.layers) ? 1 : 0; IE4 = (document.all) ? 1 : 0; ver4 = (NS4 || IE4) ? 1 : 0; if (ver4) { with (document) { write("<STYLE TYPE='text/css'>"); if (NS4) { write(".parent {position:absolute; visibility:visible}"); write(".child {position:absolute; visibility:visible}"); write(".regular {position:absolute; visibility:visible}") } else { write(".child {display:none}") } write("</STYLE>"); } } function getIndex(el) { ind = null; for (i=0; i<document.layers.length; i++) { whichEl = document.layers[i]; if (whichEl.id == el) { ind = i; break; } } return ind; } function arrange() { nextY = document.layers[firstInd].pageY +document.layers[firstInd].document.height; for (i=firstInd+1; i<document.layers.length; i++) { whichEl = document.layers[i]; if (whichEl.visibility != "hide") { whichEl.pageY = nextY; nextY += whichEl.document.height; } } } function initIt(){ if (!ver4) return; if (NS4) { for (i=0; i<document.layers.length; i++) { whichEl = document.layers[i]; if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide"; } arrange(); } else { divColl = document.all.tags("DIV"); for (i=0; i<divColl.length; i++) { whichEl = divColl(i); if (whichEl.className == "child") whichEl.style.display = "none"; } } } function expandIt(el) { if (!ver4) return; if (IE4) { whichEl1 = eval(el + "Child"); for(i=1;i<=numTotal;i++){ whichEl = eval(scores[i] + "Child"); //alert(whichEl1.id+"--"+whichEl.id) if(whichEl!=whichEl1) {whichEl.style.display = "none";} } whichEl1 = eval(el + "Child"); if (whichEl1.style.display == "none") {whichEl1.style.display = "block"; } else {whichEl1.style.display = "none";} } else { whichEl = eval("document." + el + "Child"); for(i=1;i<=numTotal;i++){ whichEl = eval("document." + scores[i] + "Child"); if(whichEl!=whichEl1) { whichEl.visibility = "hide";} } if (whichEl.visibility == "hide") {whichEl.visibility = "show"; } else {whichEl.visibility = "hide"; } arrange(); } setCookie("show_item",el); } // --- 设置cookie function setCookie(sName,sValue,expireHours) { var cookieString = sName + "=" + escape(sValue); //;判断是否设置过期时间 if (expireHours>0) { var date = new Date(); date.setTime(date.getTime + expireHours * 3600 * 1000); cookieString = cookieString + "; expire=" + date.toGMTString(); } document.cookie = cookieString; } //--- 获取cookie function getCookie(sName) { var aCookie = document.cookie.split("; "); for (var j=0; j < aCookie.length; j++){ var aCrumb = aCookie[j].split("="); if (escape(sName) == aCrumb[0]) return unescape(aCrumb[1]); } return null; } var show_item onload = function(){ initIt(); show_item = "KB1"; if (getCookie("show_item") != null) {show_item= getCookie("show_item");} if (show_item!="KB1") expandIt(show_item) } </script> </head> <body> <div id='KB1Parent' class='parent'><a href="#" target="_blank" onClick="expandIt('KB1'); return false"> <img src="/uploads/allimg/1107/bar.gif" border=0></a></div><div id='KB1Child' class='parent'> <a href='#' target='_parent'> - 电动摇摆机</a><br> <a href='#' target='_parent'> - 摇马</a><br> <a href='#' target='_parent'> - 幼儿教具</a></div> <div id='KB2Parent' class='parent'><a href="#" target="_blank" onClick="expandIt('KB2'); return false"> <img src="/uploads/allimg/1107/bar.gif" border=0></a></div><div id='KB2Child' class='child'> <a href='#' target='_parent'> - 童床系列</a><br> <a href='#' target='_parent'> - 儿童电动车</a></div> <div id='KB3Parent' class='parent'><a href="#" target="_blank" onClick="expandIt('KB3'); return false"> <img src="/uploads/allimg/1107/bar.gif" border=0></a></div><div id='KB3Child' class='child'> <a href='#' target='_parent'> - 孕妇装</a><br> <a href='#' target='_parent'> - 儿童喂养</a><br> <a href='#' target='_parent'> - 儿童安全椅</a></div> <div id='KB4Parent' class='parent'><a href="#" target="_blank" onClick="expandIt('KB4'); return false"> <img src="/uploads/allimg/1107/bar.gif" border=0></a></div><div id='KB4Child' class='child'> <a href='#' target='_parent'> - 儿童玩具</a></div> <SCRIPT> numTotal=4; scores[1]='KB1'; scores[2]='KB2'; scores[3]='KB3'; scores[4]='KB4'; </SCRIPT> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：东莞站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!