Primeros construimos los contenedores de los ítems (objeto oGrItems), o sea, los menús comenzando por el menú de nivel mayor (el último en desplegarse) usando el ya conocido operador new. Este menú es el de las playstation en nuestro ejemplo, para él usamos la variable plays

var plays = new oGrItems('plays', 'fondo', 'normal', 'activo', 'descrip', false);

Veamos los argumentos de este constructor, todos son cadenas excepto el último

plays El primer argumento debe ser el nombre de la variable usada para el objeto
fondo es el nombre del estilo CSS que usará el contenedor de ítems, tenemos que definirle los bordes y las características del tipo de letra para los ítems
normal es el estilo de los ítems cuando no están seleccionados. Habitualmente definiremos el color de las letras y el fondo, pues el tipo y tamaño se han definido en el estilo fondo. También aquí podemos poner el texto centrado horizontalmente
activo es el estilo de los ítems cuando están seleccionados. Habitualmente definiremos el color de las letras y el fondo, pues el tipo y tamaño se han definido en el estilo fondo. También aquí podemos poner el texto centrado horizontalmente
descrip es el estilo que se aplica al cuadro usado para la descripción que aparece cuando seleccionamos el ítem Se pueden definir todas las características que queramos. No olvidar definirle un color de fondo, de otra forma quedaría transparente y difícil de leer si tiene texto debajo.
false es el último argumento, indica si el menú es visible o no. Los menús usados como cabeceras serán visibles siempre (true) mientras los de nivel 1 en adelante no lo serán (false).

Una observación relativa a los estilos, al definir los correspondientes a activo y normal usar el atributo paddingTop y paddingBotom para definir la altura de cada ítem que vendrá dada por estos dos valores más el alto de la fuente de letra usada. Esto es para lograr que el texto quede centrado verticalmente y el menú funcione con NS4.

El siguiente paso es rellenar este menu con las opciones que contendrá

plays.agregar('Playstation 32', 'play32.htm','Todo sobre la ya clásica Playstation 32' , '_blank' )

plays.agregar('Playstation 64', 'play64.htm','Todo sobre la ya nueva Playstation 64')

Los argumentos son

¡Renovado!
Ahora puedes elegir el destino de los enlaces

Play station 32 Es la palabra que aparecerá en la opción del menú
play32.htm es la dirección URL a la que apunta el enlace
Todo sobre... Es la descripción del enlace que aparecerá en pantalla cuando se seleccione la opción del menú.
_blank Indica donde queremos abrir el enlace: _blank indica una ventana nueva

Pasamos a definir el menú del nivel anterior, el que contiene todas las consolas

var consolas = new oGrItems('consolas', 'fondo', 'normal', 'activo', 'descrip', false);
consolas.agregar('Nintendo', 'nintendo.htm', 'Las tradiconales Nintendo de los más peques');
consolas.agregar('Playstation', ' ', plays,'', 1);
consolas.agregar('Dreamcaster', 'dream.htm', 'Aunque poco extendida también cuenta.');

El segundo ítem es algo diferente porque es la opción que despliega el menú definido en primer lugar, el de más arriba. O sea que esa opción tiene un menú dependiente. Cambia el argumento tercero, ahora no es la descripción sino el nombre del menú que debe desplegarse. Aparece un nuevo argumento que indica si el menú se despliega lateralmente (1) o debajo del ítem (0). Además el valor del enlace está vacío, se supone que este ítem u opción no apunta a ninguna página sino que despliega una lista de opciones, pero también podría llevar un enlace. Si se usa este argumento debemos poner también el de destino, que puede ser una cadena vacía para indicar la ventana actual (por defecto)

Una vez acabado el menú de nivel 1 descendemos al nivel 0, o sea, a la cabecera
var mconsolas = new oGrItems('mconsolas', 'fondo', 'normal', 'activo', 'descrip', true);
mconsolas.agregar('Consolas', ' ', consolas, ' ', 0);

La cabecera es visible, el último argumento del constructor es true, y contiene un sólo ítem del que depende la lista de opciones consolas definida anteriormente.

Aquí se han usado los mismos estilos para cabeceras que para los menús ocultos (los que se despliegan), pero puedes usar estilos diferentes para unos y otros. Si estas construyendo una barra de navegación repite este proceso para cada menú de la misma. Una vez construidos los menús debemos activarlos y colocarlos en la página, esto se hace colocando un script en el cuerpo de la misma:

<script language="JavaScript">
mconsolas.dibujaMenus(100,10, 100);
< /script>

Así de sencillo, coges el menú de nivel 0, el de cabecera, y usas el método dibujaMenus(px, py, ancho) que pone en la página el menú y todos sus submenus. La situación en la que los coloca viene dada por los argumentos px, posición horizontal, py, posición vertical; mientras que ancho es la anchura que tendrá el menú. El alto vendrá definido en los estilos.

Para no perderse en la construcción de una barra completa de menús lo mejor es que en primer lugar dibujes en papel el esquema de los menús completos y sigas esta secuencia de trabajo. Estudia este ejemplo y repasa como se han usado los estilos CSS para poder construir el menú que tu quieras. Si intentas hacer este menú obtendrás el menú que figura en la página de muestra.