Crear menu <div> <span> <a> dinamicamente.
Publicado por 70n1cs (4 intervenciones) el 08/11/2012 13:04:59
Buenas a todos.
Estoy intentado crear un menu en plan <div> <span> <a>, de esta manera
El menu aparece pero no se despliega al picar con el raton...
Este es el codigo completo.
Ojalas sepais guiarme. GRACIAS de antemano.
el codigo del menu es este:
Estoy intentado crear un menu en plan <div> <span> <a>, de esta manera
1
document.getElementById('my_menu').innerHTML="<div><span>prueba menu principal</span><a href=''>prueba submenu</a></div>";
El menu aparece pero no se despliega al picar con el raton...
Este es el codigo completo.
Ojalas sepais guiarme. GRACIAS de antemano.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var xmlhttp = function()
{var a;try{a = new XMLHttpRequest();}
catch(e){try{a = new ActiveXObject('Msxml2.XMLHTTP');}
catch(e){try{a = new ActiveXObject('Microsoft.XMLHTTP');}
catch(e){alert('Your browser doesn\'t support ajax');a=false;}
}}return a;
};
window.onload = function()
{
myMenu = new SDMenu("my_menu");
myMenu.init();
myMenu.collapseAll();
var a = new comet();
};
var comet = function()
{
var a = new xmlhttp();
a.open('post',window.location+"?"+Math.random()+"="+Math.random(), true);a.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
a.onreadystatechange = function()
{
if(a.readyState == 4)
{
document.getElementById('my_menu').innerHTML = "<div><span>prueba menu principal</span><a href=''>prueba submenu</a></div>";
//document.getElementById('content').scrollTop=document.getElementById('content').scrollHeight;
window.setTimeout(function(){
a = new comet();
},1000);
}
};
a.send('algo=algo');
};el codigo del menu es este:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
function SDMenu(id) {
if (!document.getElementById || !document.getElementsByTagName)
return false;
this.menu = document.getElementById(id);
this.submenus = this.menu.getElementsByTagName("div");
this.remember = true;
this.speed = 3;
this.markCurrent = true;
this.oneSmOnly = false;
}SDMenu.prototype.init = function() {
var mainInstance = this;for (var i = 0; i < this.submenus.length; i++)
this.submenus[i].getElementsByTagName("span")[0].onclick = function() {
mainInstance.toggleMenu(this.parentNode);
};if (this.markCurrent) {
var links = this.menu.getElementsByTagName("a");
for (var i = 0; i < links.length; i++)
if (links[i].href == document.location.href) {
links[i].className = "current";
break;
}}if (this.remember) {
var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)");
var match = regex.exec(document.cookie);
if (match) {
var states = match[1].split("");
for (var i = 0; i < states.length; i++)
this.submenus[i].className = (states[i] == 0 ? "collapsed" : "");
}}};SDMenu.prototype.toggleMenu = function(submenu) {
if (submenu.className == "collapsed")
this.expandMenu(submenu);
else
this.collapseMenu(submenu);
};SDMenu.prototype.expandMenu = function(submenu) {
var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
var links = submenu.getElementsByTagName("a");
for (var i = 0; i < links.length; i++)
fullHeight += links[i].offsetHeight;
var moveBy = Math.round(this.speed * links.length);
var mainInstance = this;var intId = setInterval(function() {
var curHeight = submenu.offsetHeight;
var newHeight = curHeight + moveBy;
if (newHeight < fullHeight)
submenu.style.height = newHeight + "px";
else {clearInterval(intId);
submenu.style.height = "";
submenu.className = "";
mainInstance.memorize();
}}, 30);
this.collapseOthers(submenu);
};SDMenu.prototype.collapseMenu = function(submenu) {
var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length);
var mainInstance = this;var intId = setInterval(function() {
var curHeight = submenu.offsetHeight;
var newHeight = curHeight - moveBy;
if (newHeight > minHeight)
submenu.style.height = newHeight + "px";
else {clearInterval(intId);
submenu.style.height = "";
submenu.className = "collapsed";
mainInstance.memorize();
}}, 30);
};SDMenu.prototype.collapseOthers = function(submenu) {
if (this.oneSmOnly) {
for (var i = 0; i < this.submenus.length; i++)
if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed")
this.collapseMenu(this.submenus[i]);
}};SDMenu.prototype.expandAll = function() {
var oldOneSmOnly = this.oneSmOnly;
this.oneSmOnly = false;
for (var i = 0; i < this.submenus.length; i++)
if (this.submenus[i].className == "collapsed")
this.expandMenu(this.submenus[i]);
this.oneSmOnly = oldOneSmOnly;
};SDMenu.prototype.collapseAll = function() {
for (var i = 0; i < this.submenus.length; i++)
if (this.submenus[i].className != "collapsed")
this.collapseMenu(this.submenus[i]);
};SDMenu.prototype.memorize = function() {
if (this.remember) {
var states = new Array();
for (var i = 0; i < this.submenus.length; i++)
states.push(this.submenus[i].className == "collapsed" ? 0 : 1);
var d = new Date();
d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toGMTString() + "; path=/";
}};Valora esta pregunta
0