Creación de submenus en Html
Hola Juan soy Hernán Camilo saludos desde Colombia quiero preguntarle como hago para que los submenus que tengo en el siguiente html se me desplieguen hacia la derecha y ni me aparezcan abajo ,,,me explico debe de aparecer un menú con los siguientes elementos (Pagina, Archivos, Categorías, Meta),
el usuario al seleccionar Página deberá desplazarse hacia la derecha los siguientes elementos del submenú: (Agenda, Audios mp3, Fotografías, Videos Nutrilife, Videos Om)
el usuario al seleccionar Archivos deberá desplazarse hacia la derecha los siguientes elementos del submenú: (Marzo 2012, Abril 2012)
el usuario al seleccionar Categorías deberá desplazarse hacia la derecha el siguiente elemento del submenú: (Noticias)
el usuario al seleccionar Meta deberá desplazarse hacia la derecha el siguiente elemento del submenú: (Acceder)..
El código que tengo es el siguiente pero no me los desplaza a la derecha sino que me los muestra hacia abajo y la idea es que el submenú se despliegue hacia la derecha:
<script type="text/javascript"> //<![CDATA[ var bldespll; var bldespll2=-200; function blcnbotndesplegg() { if (bldespll==2) { bldespll=-2} else {bldespll=2}; document.getElementById("blmenuflntdesplegab") .style.top=parseInt(document.getElementById("blmenubt").style.top)+30+"px"; document.getElementById("blmenuflntdesplegab").style.visibility="visible"; blnlacc() } function blnlacc(){ bldespll2=bldespll2+4*bldespll; if(bldespll2 <- 200) {bldespll2=-200}; if(bldespll2 > 0) {bldespll2=0}; document.getElementById("blmenuflntdesplegab").style.left=bldespll2+"px"; if (bldespll2 <=-200 || bldespll2 >=0) {window.clearTimeout() } else {window.setTimeout("blnlacc();",50);} } //]]> </script> <style>#blcnenlace{font-family:Arial,helvética,sans-serif; font-size:12px; border-bottom:1px solid #CCCCCC;} #blcnenlace a{text-decoration: none; color: #333333;}#blcnenlace:hover{border-bottom: 1px solid #9D9D9D;}</style> <div style="left: 0px; top: 100px; position: fixed;" id="blmenubt"> <a title="Desplegar Menú" onclick="blcnbotndesplegg();" href="javascript:void(0)"> <img src="
"></a> </div> <div style='background: url("
") no-repeat 0px 0px rgb(238, 238, 238); visibility: hidden; position: fixed; z-index: 1;' id="blmenuflntdesplegab"> <table style="padding: 5px; border: 1px solid rgb(157, 157, 157); width: 150px; text-align: center;"> <table style="padding: 5px; border: 1px solid rgb(157, 157, 157); width: 150px;"> <ul> <li><a><div align="center">Página</div></a> <ul> <li><a href=" http://blognutrilife.blogspot.com/p/agenda.html"><div align="center">Agenda</div></a></li> <li><a href=" http://blognutrilife.blogspot.com/p/audios-mp3.html"><div align="center">Audios mp3</div></a></li> <li><a href=" http://blognutrilife.blogspot.com/p/fotografias.html"><div align="center">Fotografías</div></a></li> <li><a href=" http://blognutrilife.blogspot.com/p/video-nutrilife.html"><div align="center">Videos Nutrilife</div></a></li> <li><a href=" http://blognutrilife.blogspot.com/p/videos-omnilife.html"><div align="center">Videos OM</div></a></li> </ul> <li><a><div align="center">Archivos</div></a> <ul> <li><a href=" http://blognutrilife.blogspot.com/p/blog-page.html"><div align="center">Abril 2012</div></a></li> <li><a href=" http://blognutrilife.blogspot.com/p/marzo-de-2012.html"><div align="center">Mayo 2012</div></a></li> </ul> <li><a><div align="center">Categorías</div></a> <ul> <li><a href=" http://blognutrilife.blogspot.com/p/noticias.html"><div align="center">Noticias</div></a></li> </ul> <li><a><div align="center">Meta</div></a> <ul> <li><a href=" http://blognutrilife.blogspot.com/p/agenda.html"><div align="center">Acceder</div></a></li> </ul> </li></ul></table></div>
Gracias de antemano por tu ayuda y muchas bendiciones...
1 Respuesta
Hice un menu vertical con submenú, para que lo veas y saques el código de mi pagina:
Gracias Juan igualmente ayer probé este código :
<style type="text/css">
/* Menú */
#menu h2{display:none}
#menu ul{list-style:none;width:200px;margin:0;padding:0;}
#menu a{color:#fff;background:#00f;border:#009 solid 1px;text-align:center;text-decoration:none;width:200px;display:block;outline:none;}
#menu a:hover{color:#000;background:#0f0;border:#090 solid 1px;}
#menu a:focus, #menu a:active{color:#000;background:#f00;border:#900 solid 1px;}
/* Submenú desplegable*/
#menu ul li ul{display:none;position:absolute;margin-left:202px;margin-top:-21px;}
#menu ul li:hover ul{display:block;}
#menu li ul a{color:#fff;background:#99f;border:#00f solid 1px;}
#menu li ul a:hover{color:#000;background:#9f9;border:#0f0 solid 1px;}
#menu li ul a:focus, #menu li ul a:active{color:#000;background:#f99;border:#f00 solid 1px;}
</style>
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<div id="menu">
<h2>Menú</h2>
<ul>
<li><a>Uno</a>
<ul>
<li><a>1.Uno</a></li>
<li><a>1.Dos</a></li>
<li><a>1.Tres</a></li>
</ul>
</li>
<li><a>Dos</a>
<ul>
<li><a>2.Uno</a></li>
<li><a>2.Dos</a></li>
</ul>
</li>
<li><a>Tres</a>
<ul>
<li><a>3.Uno</a></li>
<li><a>3.Dos</a></li>
<li><a>3.Tres</a></li>
<li><a>3.Cuatro</a></li>
<li><a>3.Cinco</a></li>
</ul>
</li>
<li><a>Cuatro</a>
<ul>
<li><a>4.Uno</a></li>
<li><a>4.Dos</a></li>
<li><a>4.Tres</a></li>
</ul>
</li>
<li><a>Cinco</a>
<ul>
<li><a>5.Uno</a></li>
<li><a>5.Dos</a></li>
<li><a>5.Tres</a></li>
<li><a>5.Cuatro</a></li>
</ul>
</li>
</ul>
</div></!doctype></!doctype>
Que lo puse en mi web y que a pesar de que funciona bien cuando voy a acomplar en mi código (el que te envíe arriba) no me muestra los desplazamientos hacia la derecha me muestra como te decía ayer en la parte inferior los submenus la idea es conservar el código que tengo por que si puedes ver ese menú es muy elegante es desplegable y me gustaria para impresionar a mis clientes..
Gracias..
Bueno primero preguntarte si agregaste el css del menu que me mostrarte y lo otro es que te recomiendo que le asignes clases o ids a los ul o li para que no tengas problemas y al leer la web haga algo que no quieres.
Saludos cordiales!
Ve el menu que te mostré en mi web, fijate que asigno id y clases a los ul, li y todo.
JuanGarciaR
Gracias Juan lo de las CSS de verdad no veo donde crear ese codigo,,, por otra parte cuando aplico lo de las clases a los ul y a los li en una archivo en un block de notas aunque no se despliega como deseo, los submenus se ve con una sangria agradable pero cuando lo incluyo en la pagina que estoy realizando se ve igual a como lo tenia en el código que te envie,,,
Gracias
Creo que tienes problema con el css, al parecer no conoces muy bien eso.
Voy a realizar un tutorial mas adelante sobre esto.
