Menu con sub-categorias - Comunidades de foros

Usuario Novato

#113/Ago/2010, 19:15

Hola a todos tengo un problemita un poco complicado les paso a comentar exactamente lo que hise

Encontre dos codigos de unos menus laterales los dos contaban con [javascript y style] el primero que tenia era uno para hacer un menu vertical y el otro servia para (cuando pasas el cursor por un link se te desplega un menu flotante)

Que hise los junte en uno solo al principio pense que lo que estaba por hacer era algo equibocado esto me llebo a en ves de directamente pegar el codigo java+style en el foro, abri un block de nota y guarde el codigo en (archivo.htm) lo ejecute desde el escritorio y funcionaba perfecto, le agrege los links correspondientes para cada foro.

El problema estuvo cuando lo copie en el foro (me llamo poderosamente la atencion) al principio funcionaba bien pero despues de una rato saguia funcionando pero las sub-categorias estan alejadas del cursor unos 3 cm aproximadamente

Este es una imagen del menu que guarde en el escritorio

Esta es una imagen del mismo codigo pero en mi foro

(Supuestamente el cursor esta sobre el icono de [Comunidad] en ambas imagenes)

No entiendo que pude aver echo mal pero nesecito un poco de ayuda les dejo tambien el codigo completo

Spoiler:

*Josepepe033* Moderador del foro
#213/Ago/2010, 19:33Editado por Josepepe033 Antes de nada, el CSS se llama con <style type="text/css"> no con <style>, cambialo. Sobre el fallo que comentas, a mi no me ocurre si pongo el código en webcindario: https://josepepe033.webcindario.com/menu.html

Josepepe033

Moderador del foro

#313/Ago/2010, 19:46Editado por Josepepe033

Además he visto varios fallos en el código, sobre todo con los </td> y </tr>, pueba este código:

<style type="text/css">
.menulines{
border:1px solid white;
}

.menulines a{
text-decoration:none;
color:black;
}

#popitmenu{
position: absolute;
background-color: white;
border:1px solid black;
font: normal 12px Verdana;
line-height: 18px;
z-index: 100;
visibility: hidden;
}

#popitmenu a{
text-decoration: none;
padding-left: 6px;
color: black;
display: block;
}

#popitmenu a:hover{ /*hover background color*/
background-color: #CCFF9D;
}
</style>

<script language="JavaScript">

function borderize(what,color){
what.style.borderColor=color
}

function borderize_on(e){
if (document.all)
source3=event.srcElement
else if (document.getElementById)
source3=e.target
if (source3.className=="menulines"){
borderize(source3,"black")
}
else{
while(source3.tagName!="TABLE"){
source3=document.getElementById? source3.parentNode : source3.parentElement
if (source3.className=="menulines")
borderize(source3,"black")
}
}
}

function borderize_off(e){
if (document.all)
source4=event.srcElement
else if (document.getElementById)
source4=e.target
if (source4.className=="menulines")
borderize(source4,"white")
else{
while(source4.tagName!="TABLE"){
source4=document.getElementById? source4.parentNode : source4.parentElement
if (source4.className=="menulines")
borderize(source4,"white")
}
}
}


var defaultMenuWidth="150px" //set default menu width.

var linkset=new Array()
//SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT

linkset[0]='<a href="">Avatares</a>'
linkset[0]+='<a href="">Chat</a>'
linkset[0]+='<a href="">Buscar</a>'
linkset[0]+='<a href="">Fisgonia</a>'
linkset[0]+='<a href="">Imagenes</a>'
linkset[0]+='<a href="">Noticias</a>'
linkset[0]+='<a href="">Tagboard</a>'
linkset[0]+='<a href="">Usuarios</a>'

linkset[1]='<a href="">Editores</a>'
linkset[1]+='<hr>' //Optional Separator
linkset[1]+='<a href="">Audio</a>'
linkset[1]+='<a href="">Convertidores</a>'
linkset[1]+='<a href="">Graficos</a>'
linkset[1]+='<a href="">Mapas</a>'
linkset[1]+='<a href="">Paguinas</a>'
linkset[1]+='<a href="">Modeladores 2D-3D</a>'
linkset[1]+='<a href="">Video</a>'

linkset[2]='<a href="">Codigos</a>'
linkset[2]+='<hr>' //Optional Separator
linkset[2]+='<a href="">Html</a>'
linkset[2]+='<a href="">JavaScript</a>'
linkset[2]+='<a href="">Styles Css</a>'
linkset[2]+='<a href="">Php</a>'

linkset[3]='<a href="">Programas</a>'
linkset[3]+='<a href="">Aceleradores y Gestores de Descargas</a>'
linkset[3]+='<a href="">Anti-Virus</a>'
linkset[3]+='<a href="">Fabrica Cd,Dvd y Blue-Ray</a>'
linkset[3]+='<a href="">Graba Cd,Dvd y Blue-Ray</a>'
linkset[3]+='<a href="">Reproductores</a>'
linkset[3]+='<a href="">Sistemas Operativos</a>'
linkset[3]+='<a href="">Visualizadores Graficos o de Lectura</a>'

linkset[4]='<a href="">Anime</a>'
linkset[4]+='<hr>' //Optional Separator
linkset[4]+='<a href="">Eventos</a>'
linkset[4]+='<a href="">Series Anime</a>'
linkset[4]+='<a href="">Series Manga</a>'
linkset[4]+='<a href="">Peliculas</a>'

linkset[5]='<a href="">Comerciales</a>'
linkset[5]+='<hr>' //Optional Separator
linkset[5]+='<a href="">Autos</a>'
linkset[5]+='<a href="">Bebidas</a>'
linkset[5]+='<a href="">Comidas</a>'
linkset[5]+='<a href="">Consolas</a>'

linkset[6]='<a href="">Comics</a>'
linkset[6]+='<hr>' //Optional Separator
linkset[6]+='<a href="">Series Comics</a>'
linkset[6]+='<a href="">Peliculas</a>'

linkset[7]='<a href="">Peliculas</a>'
linkset[7]+='<hr>' //Optional Separator
linkset[7]+='<a href="">Cortos</a>'
linkset[7]+='<a href="">Lista de Peliculas</a>'

linkset[8]='<a href="</a>'
linkset[8]+='<hr>' //Optional Separator
linkset[8]+='<a href="">Neogeo</a>'
linkset[8]+='<a href="">Nintendo</a>'
linkset[8]+='<a href="">PlayStation</a>'
linkset[8]+='<a href="">Otros</a>'
linkset[8]+='<a href="">Videos</a>'

linkset[9]='<a href="">Mugen</a>'
linkset[9]+='<hr>' //Optional Separator
linkset[9]+='<a href="">Chars</a>'
linkset[9]+='<a href="">Sound</a>'
linkset[9]+='<a href="">ScreenPack</a>'
linkset[9]+='<a href="">Stages</a>'
linkset[9]+='<a href="">Videos</a>'

linkset[10]='<a href="">Counter Strike</a>'
linkset[10]+='<hr>' //Optional Separator
linkset[10]+='<a href="">Download</a>'
linkset[10]+='<a href="">Videos</a>'

linkset[11]='<a href="">Day Of Defeat</a>'
linkset[11]+='<hr>' //Optional Separator
linkset[11]+='<a href="">Download</a>'
linkset[11]+='<a href="">Videos</a>'

linkset[12]='<a href="">Rakion</a>'
linkset[12]+='<hr>' //Optional Separator
linkset[12]+='<a href="">Clanes</a>'
linkset[12]+='<a href="">Download</a>'
linkset[12]+='<a href="">Videos</a>'

linkset[13]='<a href="">Soldier Of Fortune</a>'
linkset[13]+='<hr>' //Optional Separator
linkset[13]+='<a href="">Download</a>'
linkset[13]+='<a href="">Videos</a>'

linkset[14]='<a href="">War Craft</a>'
linkset[14]+='<hr>' //Optional Separator
linkset[14]+='<a href="">World Of WarCraft</a>'
linkset[14]+='<a href="">Download</a>'
linkset[14]+='<a href="">Videos</a>'
linkset[14]+='<a href="">Noticias</a>'

linkset[15]='<a href="">Otros</a>'
linkset[15]+='<hr>' //Optional Separator
linkset[15]+='<a href="">Download</a>'
linkset[15]+='<a href="">Noticias</a>'
linkset[15]+='<a href="">Videos</a>'
linkset[15]+='<a href="">Vistas Previas</a>'
linkset[15]+='<a href="">Web</a>'

////No need to edit beyond here

var ie5=document.all && !window.opera
var ns6=document.getElementById

if (ie5||ns6)
document.write('<div id="popitmenu" onMouseover="clearhidemenu();" onMouseout="dynamichide(event)"></div>')

function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

function showmenu(e, which, optWidth){
if (!document.all&&!document.getElementById)
return
clearhidemenu()
menuobj=ie5? document.all.popitmenu : document.getElementById("popitmenu")
menuobj.innerHTML=which
menuobj.style.width=(typeof optWidth!="undefined")? optWidth : defaultMenuWidth
menuobj.contentwidth=menuobj.offsetWidth
menuobj.contentheight=menuobj.offsetHeight
eventX=ie5? event.clientX : e.clientX
eventY=ie5? event.clientY : e.clientY
//Find out how close the mouse is to the corner of the window
var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.contentwidth)
//move the horizontal position of the menu to the left by it's width
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px"
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px"
//same concept with the vertical position
if (bottomedge<menuobj.contentheight)
menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px"
else
menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px"
menuobj.style.visibility="visible"
return false
}

function contains_ns6(a, b) {
//Determines if 1 element in contained in another- by Brainjar.com
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function hidemenu(){
if (window.menuobj)
menuobj.style.visibility="hidden"
}

function dynamichide(e){
if (ie5&&!menuobj.contains(e.toElement))
hidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
hidemenu()
}

function delayhidemenu(){
delayhide=setTimeout("hidemenu()",500)
}

function clearhidemenu(){
if (window.delayhide)
clearTimeout(delayhide)
}

if (ie5||ns6)
document.onclick=hidemenu

</script>

<table border="0" width="200" cellspacing="0" cellpadding="0" onMouseover="borderize_on(event)" onMouseout="borderize_off(event)">
 
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><marquee><font face="Arial" size="2"><b><font color="red">¿Sabias que?</font> al no poder crear sub-foros me vi obigado a crearlos igual de una forma simple y dinamica se podria decir que hasta mejor que los sub-foro tradicionales, por la simple razon que estan todos a simple vista (Cada foro es facilmente Identificable por una mini imagen que representa al foro, sus respectivos sub-foros no tienen imagen, por supuesto estan de bajo del foro al que pertenecen) Muchas Gracias por su Comprension <font color="blue">[Damian]</font></b></font></a></tr>

 <tr><td width="100%" bgcolor="#E6E6E6" title="El Menu principal tiene o cuenta, con todas las opciones del foro y sus sub-menus, estos estan para ser mas accesibles"><font face="Arial" size="3"><b>Menú</b></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="#" onMouseover="showmenu(event,linkset[0], '90px')" onMouseout="delayhidemenu()">Comunidad</font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="http://eaa.mforos.com/forums/">Foros</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="http://eaa.mforos.com">Portal</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="http://eaa.mforos.com/1545437-off-topic/">Off Topic</a></font></td></tr>

 <tr><td width="100%" bgcolor="#E6E6E6"><font face="Arial" size="3"><b>General</b></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="http://eaa.mforos.com/1521355-denuncias/">Denuncias</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="http://eaa.mforos.com/1521348-presentate/">Presentate</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="http://eaa.mforos.com/1521361-reglas/">Reglas</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="http://eaa.mforos.com/1521351-sugerencias/">Sugerencias</a></font></td></tr>

 <tr><td width="100%" bgcolor="#E6E6E6"><font face="Arial" size="3"><b>Informatica</b></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="#" onMouseover="showmenu(event,linkset[2], '90px')" onMouseout="delayhidemenu()">Codigos</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="#" onMouseover="showmenu(event,linkset[1], '140px')" onMouseout="delayhidemenu()">Editores</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="http://eaa.mforos.com/1570984-eventos-y-exposiciones/">Eventos y Exposiciones</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="#" onMouseover="showmenu(event,linkset[3], '255px')" onMouseout="delayhidemenu()">Programas</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="http://eaa.mforos.com/1524062-tutoriales-0-0/">Tutoriales</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="http://eaa.mforos.com/1570970-proyectos/">Proyectos</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="http://eaa.mforos.com/1548030-novedades/">Novedades</a></font></td></tr>

 <tr><td width="100%" bgcolor="#E6E6E6"><font face="Arial" size="3"><b>Literatura</b></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="http://eaa.mforos.com/1520481-libros/">Libros</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="http://eaa.mforos.com/1520482-tus-historias/">Tu Historia</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="http://eaa.mforos.com/1883674-cuentos-contados/">Cuentos Contados</a></font></td></tr>

 <tr><td width="100%" bgcolor="#E6E6E6"><font face="Arial" size="3"><b>Entretenimiento</b></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="#" onMouseover="showmenu(event,linkset[4], '100px')" onMouseout="delayhidemenu()">Anime</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="#" onMouseover="showmenu(event,linkset[5], '90px')" onMouseout="delayhidemenu()">Comerciales</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="#" onMouseover="showmenu(event,linkset[6], '80px')" onMouseout="delayhidemenu()">Comics</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="http://eaa.mforos.com/1555222-series/">Series</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="#" onMouseover="showmenu(event,linkset[7], '130px')" onMouseout="delayhidemenu()">Peliculas</a></font></td></tr>

 <tr><td width="100%" bgcolor="#E6E6E6"><font face="Arial" size="3"><b>Musica</b></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="http://eaa.mforos.com/1584032-acordes-y-tablaturas/">Acordes y Tablaturas</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="http://eaa.mforos.com/1886031-biografia/">Biografias</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="http://eaa.mforos.com/1886097-conciertos-y-eventos/">Conciertos y Eventos</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="http://eaa.mforos.com/1886118-descargas/">Descargas</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="http://eaa.mforos.com/1520479-temas-individuales/">Temas Individuales</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="http://eaa.mforos.com/1545433-temas-enlistados/">Temas Enlistados</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="http://eaa.mforos.com/1545436-novedades/">Novedades</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="http://eaa.mforos.com/1886117-video-clip/">Video Clip</a></font></td></tr>
 
 <tr><td width="100%" bgcolor="#E6E6E6"><font face="Arial" size="3"><b>Juegos</b></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="#" onMouseover="showmenu(event,linkset[8], '90px')" onMouseout="delayhidemenu()">Emuladores</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="#" onMouseover="showmenu(event,linkset[9], '90px')" onMouseout="delayhidemenu()">Mugen</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="#" onMouseover="showmenu(event,linkset[10], '130px')" onMouseout="delayhidemenu()">Counter Strike</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="#" onMouseover="showmenu(event,linkset[11], '130px')" onMouseout="delayhidemenu()">Day Of Defeat</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="#" onMouseover="showmenu(event,linkset[12], '90px')" onMouseout="delayhidemenu()">Rakion</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="#" onMouseover="showmenu(event,linkset[13], '130px')" onMouseout="delayhidemenu()">Soldier Of Fortune</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="#" onMouseover="showmenu(event,linkset[14], '130px')" onMouseout="delayhidemenu()">War Craft</a></font></td></tr>
 <tr><td width="100%" bgcolor="#FFFFFF" class="menulines"><font face="Arial" size="2"><a href="#" onMouseover="showmenu(event,linkset[15], '90px')" onMouseout="delayhidemenu()">Otros</a></font></td></tr>

 <tr><td width="100%" bgcolor="#E6E6E6"><font face="Arial" size="3"><b>Agreganos</b></font></td></tr>
 <tr><td width="100%" class="menulines"><font face="Arial" size="2"><input type="text" class='tabla_input' value='<a href="http://eaa.mforos.com/" target="_blank"><img src="https://espacioforos.miarroba.st/1519776/Banners/Banner.png" border="0" alt="Malebolus - Todo sobre Todo"></a>' style='width: 200;'></font></td></tr>

dddamiannn Usuario Novato
#416/Ago/2010, 19:37 Gracias Por tu Ayuda, voy a probar

Anterior Siguiente Arriba

Responder

ATENCIÓN: Este tema no tiene actividad desde hace más de 6 MESES,
te recomendamos abrir un nuevo tema en lugar de responder al actual

Inicio

Servicio Foros

Comunidades de foros

Opciones:

Ir al subforo:

Permisos:

TU NO PUEDES Escribir nuevos temas
TU NO PUEDES Responder a los temas
TU NO PUEDES Editar tus propios mensajes
TU NO PUEDES Borrar tus propios mensajes

Temas similares

No se han encontrado temas similares