Aplicando estos tipos en el Html

Recuerdas cómo al principio le pusimos un id="desplegable1" al código html de la sección 1? Pues ahora tendremos que volver a hacerlo para las secciones 2 y 3, claro. Abre la plantilla.html y modifica el código html de la parte de la capa #navegación hasta dejarlo de este modo:

......
  <div id="navegacion">
    <ul>
      <li><a id="desplegable1" href="#">Sección 1</a></li>
      <li><a id="desplegable2" href="#">Sección 2</a></li>
      <li><a id="desplegable3" href="#">Sección 3</a></li>
    </ul>
  </div>
......

Ya puedes guardar y cerrar la plantilla. Si haces vista previa no notarás ningún cambio aún. Por qué puede ser? Lógico, aún no hemos definido los apartados y subapartados que queremos para cada uno de estos dos nuevos desplegables. Si recuerdas, eso habia que hacerlo en el archivo de scripts llamado definir-menus.txt

Definiendo secciones y subsecciones al resto de menús desplegables

El contenido que ya teniamos para ese archivo era este:

if (TransMenu.isSupported())
{
var	ms=new TransMenuSet(TransMenu.direction.down,1,0, TransMenu.reference.bottomLeft);

var desplegable1 = ms.addMenu(document.getElementById('desplegable1'));
 desplegable1.addItem('Seccion 1','ruta');
 desplegable1.addItem('Seccion 2','ruta');
 var desplegable1_0 = desplegable1.addMenu(desplegable1.items[1]);
 	 desplegable1_0.addItem('Sub-Seccion 2.1','ruta');
	 desplegable1_0.addItem('Sub-Seccion 2.2','ruta');
	 desplegable1_0.addItem('Sub-Seccion 2.3','ruta');
 desplegable1.addItem('Seccion 3','ruta');
 desplegable1.addItem('Seccion 4','ruta');
 desplegable1.addItem('Seccion 5','ruta');
 var desplegable1_0 = desplegable1.addMenu(desplegable1.items[4]);
 	 desplegable1_0.addItem('Sub-Seccion 5.1','ruta');
	 desplegable1_0.addItem('Sub-Seccion 5.2','ruta');

TransMenu.renderAll();
}

Las líneas en rojo oscuro son exclusivamente para el desplegable1. Las otras líneas del principio y del final son comunes a todos los desplegables y no se tocan. De acuerdo? Pues para definir los desplegables 2 y 3 podemos empezar por copiar las líneas del desplegable1 y pegarlas dos veces a continuación. Con eso obtendremos menús idénticos al desplegable1 y luego solo tendríamos que cambiar lo que corresponda, es decir, eliminar o insertar más líneas si queremos más secciones o menos, cambiar el 1 de desplegable1 por el 2 o el 3, y colocar los textos y las rutas de los enlaces.

Si copiamos las líneas correspondientes al desplegable1 y lo pegamos dos veces a continuación del que tenemos, nos queda así (ya le he cambiado el numero 1 por el 2 y el 3):

if (TransMenu.isSupported())
{
var ms=new TransMenuSet(TransMenu.direction.down,1,0, TransMenu.reference.bottomLeft);

var desplegable1 = ms.addMenu(document.getElementById('desplegable1'));
 desplegable1.addItem('Seccion 1','ruta');
 desplegable1.addItem('Seccion 2','ruta');
 var desplegable1_0 = desplegable1.addMenu(desplegable1.items[1]);
 	 desplegable1_0.addItem('Sub-Seccion 2.1','ruta');
	 desplegable1_0.addItem('Sub-Seccion 2.2','ruta');
	 desplegable1_0.addItem('Sub-Seccion 2.3','ruta');
 desplegable1.addItem('Seccion 3','ruta');
 desplegable1.addItem('Seccion 4','ruta');
 desplegable1.addItem('Seccion 5','ruta');
 var desplegable1_0 = desplegable1.addMenu(desplegable1.items[4]);
 	 desplegable1_0.addItem('Sub-Seccion 5.1','ruta');
	 desplegable1_0.addItem('Sub-Seccion 5.2','ruta');

var desplegable2 = ms.addMenu(document.getElementById('desplegable2'));
 desplegable2.addItem('Seccion 1','ruta');
 desplegable2.addItem('Seccion 2','ruta');
 var desplegable2_0 = desplegable2.addMenu(desplegable2.items[1]);
 	 desplegable2_0.addItem('Sub-Seccion 2.1','ruta');
	 desplegable2_0.addItem('Sub-Seccion 2.2','ruta');
	 desplegable2_0.addItem('Sub-Seccion 2.3','ruta');
 desplegable2.addItem('Seccion 3','ruta');
 desplegable2.addItem('Seccion 4','ruta');
 desplegable2.addItem('Seccion 5','ruta');
 var desplegable2_0 = desplegable2.addMenu(desplegable2.items[4]);
 	 desplegable2_0.addItem('Sub-Seccion 5.1','ruta');
	 desplegable2_0.addItem('Sub-Seccion 5.2','ruta');

var desplegable3 = ms.addMenu(document.getElementById('desplegable3'));
 desplegable3.addItem('Seccion 1','ruta');
 desplegable3.addItem('Seccion 2','ruta');
 var desplegable3_0 = desplegable3.addMenu(desplegable3.items[1]);
 	 desplegable3_0.addItem('Sub-Seccion 2.1','ruta');
	 desplegable3_0.addItem('Sub-Seccion 2.2','ruta');
	 desplegable3_0.addItem('Sub-Seccion 2.3','ruta');
 desplegable3.addItem('Seccion 3','ruta');
 desplegable3.addItem('Seccion 4','ruta');
 desplegable3.addItem('Seccion 5','ruta');
 var desplegable3_0 = desplegable3.addMenu(desplegable3.items[4]);
 	 desplegable3_0.addItem('Sub-Seccion 5.1','ruta');
	 desplegable3_0.addItem('Sub-Seccion 5.2','ruta');

TransMenu.renderAll();
}

Ya los tenemos a los tres funcionando. Solo te queda eliminar o insertar nuevas líneas si quieres quitar o poner más secciones o subsecciones, escribir los textos de cada enlace y terminar de poner las rutas a las páginas que enlaza cada enlace del menú desplegable.

Más sencillo imposible! Aquí tienes el restultado final de la plantilla con los 3 menús desplegables.