• URL del foro: http://localhost/Foro/index.php
  
• Versión del foro: 1.6.1
  
• Actualización: Ninguna
  

Hola quisiera saber como se podrían realizar Menús Desplegables para evitar llenar demasiado mi barra de enlaces. Quisiera conseguir que cuando se haga click en una opción del menú principal se despliegue el submenú correspondiente con sus enlaces respectivos. Dejo una imagen para ilustrar lo que busco.

[attachment=1921]

[Imagen: attachment.php?aid=444]

Gracias por sus sugerencias e indicaciones

Cierto, lo e visto en muchos foros.
En uno de ellos SoporteMyBB mismo.

Pues eso es algo que vbulletin trae por defecto, sin embargo MyBB no. Así que habría que añadirlo manualmente desde las plantillas, como hemos hecho aquí en SoporteMyBB.

Por google hay infinidad de menus desplegables. Lo bueno sería que buscases uno que te guste y lo adaptases al theme de tu foro.

Buscaré por la red y si tengo alguna consulta posteo aquí el código, lo mismo si todo marcha bien posteo el código por si a alguien más le interesa y dejo un pantallazo de como me quedó

Están buenos los menús desplegables, siempre me han llamado la atención (y como no).
El de vBulletin es el único que no me ha gustado, no lo encuentro llamativo pero si me parece "serio".
Por si las dudas, en MyBB.com está este tutorial http://goo.gl/qpjnr

Hola Gracias por el aporte Night, he probado el que sugeriste y me parece muy bueno, aunque por ahí dando vueltas y vueltas encontré uno bastante simple de implementar y me decanté por ese ya que hay menos cosas que mover. Posteo el código que encontré.

he ido a estilos de mi theme y he creado una nueva hoja de estilo poniéndole de nombre menu.css con el siguiente código dentro.

body{
	background:#fff;
}

/* Root = Horizontal, Secondary = Vertical */
ul#menu {
	ba
  margin: 0;
  border: 0 none;
  padding: 0;
/*  width: 500px;*/ /*For KHTML*/
width:360px;
  list-style: none;
  height: 20px;
  border:1px solid #eee;
  padding-bottom:5px;
}

ul#menu li {
  margin: 0;
  border: 0 none;
  padding: 0;
  float: left; /*For Gecko*/
  display: inline;
  list-style: none;
  position: relative;
  height: 20px;
}
ul#menu li{
	padding-bottom:5px;
}
ul#menu li:hover{
	background:#ddd;
}

ul#menu  ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px;
  list-style: none;
  display: none;
  position: absolute;
  top: 25px;
  left: 10px;
  background: #eee;
  border: none;
  opacity: 0.8;
  -moz-opacity: 0.8;
  filter:alpha(opacity=80);
}

ul#menu ul:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#menu ul li {
  width: 160px;
  float: left; /*For IE 7 lack of compliance*/
  display: block !important;
  display: inline; /*For IE*/
}

/* Root Menu */
ul#menu a {
  padding: 5px 15px 5px;
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  color: #9fcf21;
  text-decoration: none;
  font-weight: bold;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  font-weight:bold;
/*  border-right:1px solid #818181;*/
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#menu a:hover,
ul#menu li:hover a,
ul#menu li.iehover a {
color: #003300;

}

/* 2nd Menu */
ul#menu li:hover li a,
ul#menu li.iehover li a {
  float: none;
  border:none;
}

/* 2nd Menu Hover Persistence */
ul#menu li:hover li a:hover,
ul#menu li:hover li:hover a,
ul#menu li.iehover li a:hover,
ul#menu li.iehover li.iehover a {
 background:#ddd;
  color: #003300;
}

/* 3rd Menu */
ul#menu li:hover li:hover li a,
ul#menu li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 3rd Menu Hover Persistence */

ul#menu li:hover li:hover li a:hover,
ul#menu li:hover li:hover li:hover a,
ul#menu li.iehover li.iehover li a:hover,
ul#menu li.iehover li.iehover li.iehover a {
background:#ddd;
  color: #FFF;
}

/* 4th Menu */
ul#menu li:hover li:hover li:hover li a,
ul#menu li.iehover li.iehover li.iehover li a {
background:#ddd;
  color: #666;
}

/* 4th Menu Hover */
ul#menu li:hover li:hover li:hover li a:hover,
ul#menu li.iehover li.iehover li.iehover li a:hover {
  background: #CCC;
  color: #FFF;
}

ul#menu ul ul,
ul#menu ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#menu li:hover ul ul,
ul#menu li:hover ul ul ul,
ul#menu li.iehover ul ul,
ul#menu li.iehover ul ul ul {
  display: none;
}

ul#menu li:hover ul,
ul#menu ul li:hover ul,
ul#menu ul ul li:hover ul,
ul#menu li.iehover ul,
ul#menu ul li.iehover ul,
ul#menu ul ul li.iehover ul {
  display: block;
}
ul#menu .selected{
	color: #003300;
}

Luego he ido a una parte cualquiera de las plantillas de mi theme para probar [en este caso usé la parte baja del footer para hacer la prueba, no sin antes hacer una copia en un archivo txt del código previo por seguridad] y agregé al final el código que mostrará los submenús verticales.

<ul id="menu">
	<li><a class="selected" tihref="#">Inicio</a></li>
	<li><a href="#">Descargas</a>
		<ul>
			<li><a href="#">Soft Desktop</a></li>
			<li><a href="#">Soft Móvil</a></li>
		</ul>
</li>
<li><a href="#">Localización</a></li>
<li><a href="#">Contacto</a></li>
</ul>

En este caso pude mover un poco los nombres de los submenús como se aprecia en el submenú desplegado en la imagen que adjunto.

[attachment=1923]
[Imagen: attachment.php?aid=447]

Creo que a partir de este momento ya puedo experimentar un poco con el código hasta estar seguro de que ha quedado como quiero y ponerlo en la parte definitiva que deseo que ocupe.

Gracias nuevamente a quienes participaron en este tema dando sugerencias y diferentes opciones, creo que siempre es muy bueno tener diferentes formas de hacer las cosas y explotar al máximo las posibilidades de cada una de ellas. Resuelto

---

PD. no se sin aún continúa esa caracteristica pero dicen que si no se visualiza en IE se use lo siguiente dentro del css: strict.dtd

Cita:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">