Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Marco Condor
Mostrar segundo y tercer nivel de menu
November 17, 2012 1:59 PM
Answer

Marco Condor

Rank: New Member

Posts: 18

Join Date: November 5, 2011

Recent Posts

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 Gonzalez Barrios
RE: Mostrar segundo y tercer nivel de menu
November 18, 2012 11:23 PM
Answer

Sergio Gonzalez Barrios

Rank: Junior Member

Posts: 65

Join Date: April 26, 2011

Recent Posts

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:

 1<nav class="$nav_css_class" id="navigation">
 2    <h1>
 3        <span>#language("navigation")</span>
 4    </h1>
 5
 6    <ul>
 7        #foreach ($nav_item in $nav_items)
 8            #if ($nav_item.isSelected())
 9                <li class="selected">
10            #else
11                <li>
12            #end
13                <a href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.icon() $nav_item.getName()</span></a>
14
15                #if ($nav_item.hasChildren())
16                    <ul class="child-menu">
17                        #foreach ($nav_child in $nav_item.getChildren())
18                            #if ($nav_child.isSelected())
19                                <li class="selected">
20                            #else
21                                <li>
22                            #end
23                                <a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
24                            </li>
25                        #end
26                    </ul>
27                #end
28            </li>
29        #end
30    </ul>
31</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.

1
2#navigation li .child-menu{
3display:none;
4}
5
6#navigation li.hover .child-menu {
7display:block;
8}


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
RE: Mostrar segundo y tercer nivel de menu
November 19, 2012 12:25 PM
Answer

Marco Condor

Rank: New Member

Posts: 18

Join Date: November 5, 2011

Recent Posts

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>
Attachments: navigation.vm (0.7k)
Sergio Gonzalez Barrios
RE: Mostrar segundo y tercer nivel de menu
November 19, 2012 1:45 PM
Answer

Sergio Gonzalez Barrios

Rank: Junior Member

Posts: 65

Join Date: April 26, 2011

Recent Posts

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
RE: Mostrar segundo y tercer nivel de menu
November 22, 2012 3:16 PM
Answer

Marco Condor

Rank: New Member

Posts: 18

Join Date: November 5, 2011

Recent Posts

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 Gonzalez Barrios
RE: Mostrar segundo y tercer nivel de menu
November 24, 2012 5:16 AM
Answer

Sergio Gonzalez Barrios

Rank: Junior Member

Posts: 65

Join Date: April 26, 2011

Recent Posts

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:

 1<nav class="sort-pages modify-pages" id="navigation">
 2    <h1>
 3        <span>#language("navigation")</span>
 4    </h1>
 5
 6    <ul>
 7        #foreach ($nav_item in $nav_items)
 8            #if ($nav_item.isSelected())
 9                <li class="selected">
10            #else
11                <li>
12            #end
13
14            <a href="" $nav_item.getTarget()><span>$nav_item.icon() $htmlUtil.escape($nav_item.getName())</span></a>
15
16            #if ($nav_item.hasChildren())
17                <ul class="child-menu">
18               
19                #foreach ($nav_child in $nav_item.getChildren())
20                    #if ($nav_child.isSelected())
21                        <li class="selected">
22                    #else
23                        <li>
24                    #end
25
26                    <a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
27                   
28                    #if ($nav_child.hasChildren())
29                        
30                        <ul class="grandchild-menu">
31                        
32                        #foreach ($nav_grandchild in $nav_child.getChildren())
33                            #if ($nav_grandchild.isSelected())
34                                <li class="selected">
35                            #else
36                                <li>
37                            #end
38                           
39                            <a href="$nav_grandchild.getURL()" $nav_grandchild.getTarget()>$nav_grandchild.getName()</a>
40                        #end
41                        
42                    #end
43                   
44                    </li>
45                #end
46               
47                </ul>
48            #end
49            
50            </li>
51        #end
52    </ul>
53</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
RE: Mostrar segundo y tercer nivel de menu
November 26, 2012 5:39 AM
Answer

Marco Condor

Rank: New Member

Posts: 18

Join Date: November 5, 2011

Recent Posts

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

Saludos
Marco
Alberto Pérez
RE: Mostrar segundo y tercer nivel de menu
October 8, 2014 5:29 AM
Answer

Alberto Pérez

Rank: New Member

Posts: 3

Join Date: January 24, 2014

Recent Posts

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
Attachment

Attachments: Niveles_menu.jpg (81.5k)