Probado en IE, Safari, OPera, Chrome y Firefox
Generado a partir de un archivo xml, usando Javascript.
 | Archivos incluidos en el archivo slidemenu.zip : slidemenu.htm menu.xml slidemenu.js menu.css tab.gif shot.JPG |
O checa el código enseguida :
<html>
<head>
<title>XML - Javascript Slide Menu ::: IE, Safari, Opera, Chrome, Firefox</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
xmlfile = "menu.xml" //(English) XML File (Español) Archivo XML
calt = 15; //(English) Child elements height (Español) Altura de los elementos internos
canc = 126; //(English) Child elements width (Español) Ancho de los elementos internos
panc = 157; //(English) Parent elements width (Español) Ancho de los elementos externos
palt = 25; //(English) Parent elements height (Español) Altura de los elementos externos
openlayer = "";
currlayer = "";
alturac = 0;
alturaa = 0;
finiq1 = false;
finiq2 = false;
al = 0;
function accion(dx) {
al = palt;
finiq1 = false;
finiq2 = false;
currlayer = dx.parentNode;
alturaa = palt + parseInt(currlayer.id.split("c")[1]) * calt;
if (openlayer !="") {
alturac = palt + parseInt(openlayer.id.split("c")[1]) * calt;
}
else {
alturac = palt;
}
abrircerrar();
}
function abrircerrar() {
if (al < alturaa && openlayer.id != currlayer.id) {
al = al + 5;
currlayer.style.height = al+"px";
}
else {
finiq1 = true;
}
if (palt < alturac) {
alturac = alturac - 5;
openlayer.style.height = alturac+"px";
}
else {
finiq2 = true;
}
if(!finiq1 || !finiq2) {
setTimeout("abrircerrar()", 10);}
else {
if (openlayer != currlayer) {
openlayer = currlayer;}
else {
openlayer = "";
}
}
}
function genlayers(xmld) {
if (window.DOMParser) { // Safari, Opera, Chrome, Firefox
parser = new DOMParser();
jdomxml = parser.parseFromString(xmld,"text/xml");
}
else { // Internet Explorer
jdomxml = new ActiveXObject("Microsoft.XMLDOM");
jdomxml.async = false;
jdomxml.loadXML(xmld);
}
root = jdomxml.getElementsByTagName("menu")[0];
parents = root.getElementsByTagName("menuelement");
menuhtml = "";
for (i=0; i<parents.length; i++) {
children = parents[i].getElementsByTagName("menulink");
menuhtml += "<div id=\"s"+i+"c"+children.length+"\" style=\"position:relative; left:0px; top:0px; overflow:hidden; width:156px; height:25px; z-index:10;\">";
menuhtml += "<div id=\"x"+i+"\" style=\"position:relative; text-align:center; left:0px; top:0px; width:"+panc+"px; height:"+palt+"px; border: 1px none #000000; z-index:1200;\" onClick=\"accion(this);\" class=\"pitem\">"+parents[i].getAttribute("nombre")+"</div>";
for (j=0; j<children.length; j++){
menuhtml += "<div id=\"y"+j+"\" style=\"position:relative; text-indent:8; left:0px; top:0px; width:"+canc+"px; height:"+calt+"px; z-index:1; background-color: #990000; border: 1px none #000000;\" class=\"citem\"><a href=\""+children[j].getAttribute("href")+"\" class=\"clink\">"+children[j].firstChild.nodeValue+"</a></div>";
}
menuhtml += "</div>";
}
document.all["apDiv1"].innerHTML = menuhtml;
}
function getdatos() {
xmldata = "";
xmlhttp = GetXmlHttpObject();
if (xmlhttp == null) {
alert ("Your browser does not support XMLHTTP!");
return;
}
xmlhttp.open("GET",xmlfile,true);
xmlhttp.send("");
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
xmldata = xmlhttp.responseText;
genlayers(xmldata);
}
}
}
//(English) Detecting XML file reader object (Español) Detectar objecto para leer archivo XML
function GetXmlHttpObject() {
if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject) { // codigo para IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
</script>
<link rel="stylesheet" href="menu.css" type="text/css">
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:22px;
top:31px;
width:284px;
height:196px;
z-index:1;
overflow: visible;
background-color: #FFFFFF;
}
-->
</style>
</head>
<body onLoad="getdatos();">
<!-- (English) DIV menu container Change DIV element for another one you want -->
<!-- (Español) DIV contenedor del menú Cambiar el elemento DIV por cualquier otro que se desee -->
<div id="apDiv1">XML - Javascript Slide Menu</div>
</body>
</html>
<head>
<title>XML - Javascript Slide Menu ::: IE, Safari, Opera, Chrome, Firefox</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
xmlfile = "menu.xml" //(English) XML File (Español) Archivo XML
calt = 15; //(English) Child elements height (Español) Altura de los elementos internos
canc = 126; //(English) Child elements width (Español) Ancho de los elementos internos
panc = 157; //(English) Parent elements width (Español) Ancho de los elementos externos
palt = 25; //(English) Parent elements height (Español) Altura de los elementos externos
openlayer = "";
currlayer = "";
alturac = 0;
alturaa = 0;
finiq1 = false;
finiq2 = false;
al = 0;
function accion(dx) {
al = palt;
finiq1 = false;
finiq2 = false;
currlayer = dx.parentNode;
alturaa = palt + parseInt(currlayer.id.split("c")[1]) * calt;
if (openlayer !="") {
alturac = palt + parseInt(openlayer.id.split("c")[1]) * calt;
}
else {
alturac = palt;
}
abrircerrar();
}
function abrircerrar() {
if (al < alturaa && openlayer.id != currlayer.id) {
al = al + 5;
currlayer.style.height = al+"px";
}
else {
finiq1 = true;
}
if (palt < alturac) {
alturac = alturac - 5;
openlayer.style.height = alturac+"px";
}
else {
finiq2 = true;
}
if(!finiq1 || !finiq2) {
setTimeout("abrircerrar()", 10);}
else {
if (openlayer != currlayer) {
openlayer = currlayer;}
else {
openlayer = "";
}
}
}
function genlayers(xmld) {
if (window.DOMParser) { // Safari, Opera, Chrome, Firefox
parser = new DOMParser();
jdomxml = parser.parseFromString(xmld,"text/xml");
}
else { // Internet Explorer
jdomxml = new ActiveXObject("Microsoft.XMLDOM");
jdomxml.async = false;
jdomxml.loadXML(xmld);
}
root = jdomxml.getElementsByTagName("menu")[0];
parents = root.getElementsByTagName("menuelement");
menuhtml = "";
for (i=0; i<parents.length; i++) {
children = parents[i].getElementsByTagName("menulink");
menuhtml += "<div id=\"s"+i+"c"+children.length+"\" style=\"position:relative; left:0px; top:0px; overflow:hidden; width:156px; height:25px; z-index:10;\">";
menuhtml += "<div id=\"x"+i+"\" style=\"position:relative; text-align:center; left:0px; top:0px; width:"+panc+"px; height:"+palt+"px; border: 1px none #000000; z-index:1200;\" onClick=\"accion(this);\" class=\"pitem\">"+parents[i].getAttribute("nombre")+"</div>";
for (j=0; j<children.length; j++){
menuhtml += "<div id=\"y"+j+"\" style=\"position:relative; text-indent:8; left:0px; top:0px; width:"+canc+"px; height:"+calt+"px; z-index:1; background-color: #990000; border: 1px none #000000;\" class=\"citem\"><a href=\""+children[j].getAttribute("href")+"\" class=\"clink\">"+children[j].firstChild.nodeValue+"</a></div>";
}
menuhtml += "</div>";
}
document.all["apDiv1"].innerHTML = menuhtml;
}
function getdatos() {
xmldata = "";
xmlhttp = GetXmlHttpObject();
if (xmlhttp == null) {
alert ("Your browser does not support XMLHTTP!");
return;
}
xmlhttp.open("GET",xmlfile,true);
xmlhttp.send("");
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
xmldata = xmlhttp.responseText;
genlayers(xmldata);
}
}
}
//(English) Detecting XML file reader object (Español) Detectar objecto para leer archivo XML
function GetXmlHttpObject() {
if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject) { // codigo para IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
</script>
<link rel="stylesheet" href="menu.css" type="text/css">
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:22px;
top:31px;
width:284px;
height:196px;
z-index:1;
overflow: visible;
background-color: #FFFFFF;
}
-->
</style>
</head>
<body onLoad="getdatos();">
<!-- (English) DIV menu container Change DIV element for another one you want -->
<!-- (Español) DIV contenedor del menú Cambiar el elemento DIV por cualquier otro que se desee -->
<div id="apDiv1">XML - Javascript Slide Menu</div>
</body>
</html>
No hay comentarios:
Publicar un comentario