Mostrar segundo y tercer nivel de menu

[Marco Condor, modificado hace 11 años.]

Estimados

por favor necesito su ayuda pra solventar un problema que no me permite mostrar los submenus del menú principal, Básicamente lo que quiero mostrar el segundo y tercer nivel de mi menú. Las subpaginas ya están creadas, pero aun así no me permite visualizar los submenus.

actualmente tengo el menú de esta manera:

--> Normativa
--> Regulaciones

Y quiero que me muestre de esta manera:

--> Normativa
--> Regulaciones
--> Sector financiero
--> Sector No financiero

Debo modificar algún archivo de configuración ? de ser asi pro favor indicarme.

Gracias por su ayuda

[Sergio González Barrios, modificado hace 11 años.]

Hola Marco, me gustaría saber si en el código del portal te aparece los submenus generados. Te digo porque tu problemas peude venir de 2 sitios: el primero es que te este generando bien los hijos pero sin embargo los tengas ocultos con un display none y no se estén mostrando al pasar por encima del padre, y el segundo vendría directamente de la generación del submenu.

En el primer caso sería problemas de CSSs mientras que el segundo sería cosa del navigation.vm de tu tema de apariencia. Para que te funcione correctamente, en tu navigation.vm deberías tener algo como esto:

<nav class="$nav_css_class" id="navigation">
	<h1>
		<span>#language("navigation")</span>
	</h1>

	<ul>
		#foreach ($nav_item in $nav_items)
			#if ($nav_item.isSelected())
				<li class="selected">
			#else
				</li><li>
			#end
				<a href="$nav_item.getURL()" $nav_item.gettarget()><span>$nav_item.icon() $nav_item.getName()</span></a>

				#if ($nav_item.hasChildren())
					<ul class="child-menu">
						#foreach ($nav_child in $nav_item.getChildren())
							#if ($nav_child.isSelected())
								<li class="selected">
							#else
								</li><li>
							#end
								<a href="$nav_child.getURL()" $nav_child.gettarget()>$nav_child.getName()</a>
							</li>
						#end
					</ul>
				#end
			</li>
		#end
	</ul>
</nav>

Este código te generaría un menu principal con un primer nivel de hijos.
Para hacer el efecto de mostrarlos y ocultarlos se utilizan las siguientes CSS.

#navigation li .child-menu{
display:none;
}

#navigation li.hover .child-menu {
display:block;
}

Teniendo esto debérias ver el menu principal y al pasar por encima de cada opción debería desplegarte el primer nivel de hijos. Para sacar el segundo nivel simplemente deberías ampliar el código anterior a partir de lo ya descrito.

[Marco Condor, modificado hace 11 años.]

Estimado Sergio.

Adjunto te envio el codigo de mi navigation.vm, del tema que yo genere para mi sitio. Por favor si eres tan amble en indicarme en que parte debo modificar el codigo para solventar mi problema.

Saludos y muchas gracias por tu pronta ayuda

----

<nav class="sort-pages modify-pages" id="navigation">
<h1>
<span>#language("navigation")</span>
</h1>

<ul>
#foreach ($nav_item in $nav_items)
#if ($nav_item.isSelected())
<li class="selected">
#else
<li>
#end

<a href="" $nav_item.getTarget()><span>$nav_item.icon() $htmlUtil.escape($nav_item.getName())</span></a>

#if ($nav_item.hasChildren())
<ul class="child-menu">
#foreach ($nav_child in $nav_item.getChildren())
#if ($nav_child.isSelected())
<li class="selected">
#else
<li>
#end

<a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
</li>
#end
</ul>
#end
</li>
#end
</ul>
</nav>

[Sergio González Barrios, modificado hace 11 años.]

Por lo que veo tiene el navigation.vm por defecto que te genera Liferay asi que por esa opción parece que todo está ya que, de hecho, es exactamente lo mismo que te puse.

Necesito que asegures que no se generán las páginas del submenú. Para ello vete a la home de tu portal donde deberían de aparecer los submenús e inspecciona con el firebug el menú del navigatión. FIjate a ver si te genera algun <ul> con class="child-menu". Ese UL correspondería a los hijos de una opción. En caso de que no aparezca ningún UL con ese class el problemas, muy probablemente esté en tu configuración de páginas. Asegurate que las páginas hijo, al crearlas, no les hayas marcado el check de "ocultas". Mira todo esto y comentanos como lo tienes.

[Marco Condor, modificado hace 11 años.]

Estimado Sergio,

Revise paso a paso lo que me indicaste en tu mail, para ser mas claro con el inconveniente adjunto te envio una imagen, por favor revisalas para ver como mas puedo solucionar este problema.

De antemano quedo muy agrdecido por tu ayuda
Marko.

[Sergio González Barrios, modificado hace 11 años.]

Hola Marcos. Mirando un poco tu código y tu mapa web esta claroq ue es imposible que con el navigation que tienes te saque el segundo nivel de hijos ya que solo viene preparado para sacar el primer nivel(en tu caso Constitucion,Leyes,Reglamento,Regulaciones). PAra sacar el segundo nivel de hijos(Sector Financiero, Sector no financiero) debes usar el siguiente código:

<nav class="sort-pages modify-pages" id="navigation">
	<h1>
		<span>#language("navigation")</span>
	</h1>

	<ul>
		#foreach ($nav_item in $nav_items)
			#if ($nav_item.isSelected())
				<li class="selected">
			#else
				</li><li>
			#end

			<a href="" $nav_item.gettarget()><span>$nav_item.icon() $htmlUtil.escape($nav_item.getName())</span></a>

			#if ($nav_item.hasChildren())
				<ul class="child-menu">
				
				#foreach ($nav_child in $nav_item.getChildren())
					#if ($nav_child.isSelected())
						<li class="selected">
					#else
						</li><li>
					#end

					<a href="$nav_child.getURL()" $nav_child.gettarget()>$nav_child.getName()</a>
					
					#if ($nav_child.hasChildren())
						
						<ul class="grandchild-menu">
						
						#foreach ($nav_grandchild in $nav_child.getChildren())
							#if ($nav_grandchild.isSelected())
								<li class="selected">
							#else
								</li><li>
							#end
							
							<a href="$nav_grandchild.getURL()" $nav_grandchild.gettarget()>$nav_grandchild.getName()</a>
						#end
						
					#end
					
					</li>
				#end
				
				</ul>
			#end
			
			</li>
		#end
	</ul>
</li></ul></nav> 

Te lo he escrito sobre la marcha asi que no se si tendrá alguna fallo de sintaxis pero el código es ese. Pruébalo y me dices. Fijate simplemente si en el firebug lo pinta. Lo siguietne ya sería maquetarlo.

[Marco Condor, modificado hace 11 años.]

Estimado Sergio
Te agradezco mucho por tu ayuda, enseguida voy a probar el codigo y te comento cualquier situacion.

Saludos
Marco

[Alberto Pérez, modificado hace 9 años.]

Hola Marcos: Sí, creo que falta un </ul> y un </li> del tercer nivel.

Yo estoy intentando realizar lo mismo pero que los niveles vayan quedando en "barras de menú" (Adjunto imagen para ver la idea).
Hasta el segundo nivel parece que no hay problema, pero el problema es que cuando hago click en el tercer nivel se me pierde la selección del nivel 2 y el nivel 3 ya no me aparece....alguna idea¿?¿. Os agradecería alguna ayuda.
Os pongo el código que tengo en mi navigation.vm

#* MENU NIVEL 1 *#
<nav class="sort-pages modify-pages" id="navigation">
<h1>
<span>#language("navigation")</span>
</h1>
<ul>
#foreach ($nav_item in $nav_items)
#if ($nav_item.isSelected())
<li class="selected">
#set ($item_seleccionat = $nav_item)
#else
<li>
#end
<a href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.icon() $htmlUtil.escape($nav_item.getName())</span></a>
</li>
#end
</ul>
</nav>

#* MENU NIVEL 2 *#
#if ($item_seleccionat.hasChildren())
<nav class="sort-pages modify-pages" id="sub-navigation">
<ul class="sub-menu">
#foreach ($nav_child in $item_seleccionat.getChildren())
#if ($nav_child.isSelected())
<li class="selected">
#set ($childitem_seleccionat = $nav_child)
#else
<li>
#end
<a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
</li>
#end
</ul>
</nav>
#end

#* MENU NIVEL 3 *#
#if ($childitem_seleccionat.hasChildren())
<nav class="sort-pages modify-pages" id="sub-navigation2">
<ul class="sub-menu">
#foreach ($nav_grandchild in $childitem_seleccionat.getChildren())
#if ($nav_grandchild.isSelected())
<li class="selected">
#else
<li>
#end
<a href="$nav_grandchild.getURL()" $nav_grandchild.getTarget()>$nav_grandchild.getName()</a>
</li>
#end
</ul>
</nav>
#end