can not see second level child menu items

[Hasan Jr. Basan, modifié il y a 14 années.]

hello;

i am new to liferay. i want to have a page hierarchy in navigation menu like this :

Accounting

Operations

Marketing

Sales
|_Domestic Sales
|_Outgoing Sales
\t |_Invoices
\t |_Order Details


....

and etc. Domestic and Outgoing Sales are under Sales and Invoices and Order Details are under Outgoing Sales.

The problem is that, i can not see the page links those are under Outgoing Sales. In other words I can not see two level depth nodes of the tree, namely Invoices and Order Details, in the navigation menu.

Do you have any suggestion about how to solve the problem. Thanks.

[Mirco G, modifié il y a 14 années.]

Equal error for me. If you want see the pages of second level, you could add a navigation portlet to your page that can view the pages that you are looking for.

[Hasan Jr. Basan, modifié il y a 14 années.]

The source of the problem is navigation.vm template file. It only supports one level of the tree. It does not have a recursive nature. I edit the navigation.vm file to support a third level and corresponding css classes should be edited or new css classes should be added accordingly. I will post them here as soon as it works.

[Lisa Simpson, modifié il y a 14 années.]

It depends on the theme you are using. Some have it and others do not. You can, as another poster, suggested add the navigation portlet - which also has some configuration options which you might want to explore.

[Hasan Jr. Basan, modifié il y a 14 années.]

ok so how can i configure it to have the same effect as a drop down menu?

as i see it only displays an ordered set of links depending where you are in the site. Can you describe pls?

P.S. : I am using the default theme coming with liferay 5.2.3. Which theme supports a multi-level drop down menu?

[Lisa Simpson, modifié il y a 14 années.]

Umm... click on the Configuration link where the ... thingy is in the top right corner. Go play with the options until you find one that suits you.

[Hasan Jr. Basan, modifié il y a 14 années.]

Here i is my navigation.vm file for one more level of tree in liferay default theme. I used some custom css attributesd according to my company's look and feel requirements. Hope this helps to liferay users with the same problem.

<div id="navigation" class="sort-pages modify-pages">
<ul>
#foreach ($nav_item in $nav_items)
#if ($nav_item.isSelected())
#set ($nav_item_class = "selected")
#else
#set ($nav_item_class = "")
#end

<li class="$nav_item_class">
<a style="font-weight:bold;font-size:12px;color:white" href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.getName()</span></a>

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

<li class="$nav_child_class" >
<a href="$nav_child.getURL()" onmouseover="if(this.nextSibling){ var n=this.nextSibling; if(n.nodeType != 1) n = n.nextSibling; if(n) if(n.style.display=='block') n.style.display='none'; else n.style.display='block'; }" $nav_child.getTarget()>$nav_child.getName()</a>
#if ($nav_child.hasChildren())
<ul class="child-menu" style="display:none;margin-left:100%;margin-top:-30px;width:80%;z-index:9999;" >
#foreach ($nav_childjr in $nav_child.getChildren())
#if ($nav_childjr.isSelected())
#set ($nav_childjr_class = "selected")
#else
#set ($nav_childjr_class = "")
#end

<li class="$nav_childjr_class">
<a href="$nav_childjr.getURL()" $nav_childjr.getTarget()>$nav_childjr.getName()</a>
</li>
#end
</ul>
#end
</li>
#end
</ul>
#end
</li>
#end
</ul>
</div>

[Maxim Semenov, modifié il y a 14 années.]

That is how I made it. My second navigation level is generated in a different div tag because of the web page design. Moreover, at the end I added active class to the second level active element.

<div id="primary-navigation">
<ul>
	#foreach ($nav_item in $nav_items)
	
	#if ($nav_item.isSelected())
	#set ($nav_item_class = "selected")
	#else
	#set ($nav_item_class = "")
	#end
	
		<li class="$nav_item_class">
			<a href="$nav_item.getURL()" $nav_item.gettarget()><span>$nav_item.getName()</span></a>
		</li>
	#end
</ul>
</div>

#foreach ($nav_item in $nav_items)
	#if (($nav_item.isSelected()) &amp;&amp; ($nav_item.hasChildren()))
			<div id="secondary-navigation">
				<ul class="child-menu">
					#foreach ($nav_child in $nav_item.getChildren())
					
					#if ($nav_child.isSelected())
						#set ($nav_child_class = "active")
					#else
						#set ($nav_child_class = "")
					#end
					
						<li class="$nav_child_class">
							<a href="$nav_child.getURL()" $nav_child.gettarget()>$nav_child.getName()</a>
						</li>
					#end
				</ul>
			</div>
	#end
#end

[George geovin Vincent, modifié il y a 9 années.]

Hi all,

I got same problem in liferay 6.2 GA2. I was able to create structured page in control panel but i could not access it.
If you all could help me that would be great.


Thank you

[Gopinath PR, modifié il y a 9 années.]

Same Prob

[George geovin Vincent, modifié il y a 9 années.]

Hi,
I found a solution it worked for me you can also do this. By replacing <nav class="$nav_css_class navbar site-navigation" id="navigation" role="navigation"> </nav> this block you will be able to see third level menus too. I have attached file please have look at it.

Note:-
If it works please reply and rate this post so that others can benefit out of it.

[vijay kumar, modifié il y a 9 années.]

i am new to liferay. i want to create the child menus how can possible can you give any suggestions

[Gwowen Fu, modifié il y a 8 années.]

The menu icon is configurable in control panel for each page. For child menu, you also need to add $nav_child.icon() in navigation.vm.

<li class="$nav_child_css_class" id="layout_$nav_child.getLayoutId()" $nav_child_attr_selected role="presentation">
<a aria-labelledby="layout_$nav_child.getLayoutId()" href="$nav_child.getURL()" $nav_child.gettarget() role="menuitem">
$nav_child.icon() $nav_child.getName()</a>
</li>

[Wayne Lapaglia, modifié il y a 8 années.]

RE: can not see second level child menu items

[Devang Patel, modifié il y a 8 années.]

Hello
Try this,
You have to use _diffs folder and paste these files into this folder.
Path:- Docroot->_diffs->templets->paste all the files which you want to modified.

First replace your navigation.vm to below snippet:

<nav class="$nav_css_class trinet-navigation" id="navigation" role="navigation">
	
	
	<ul aria-label="#language (" site-pages")" role="menubar">
		#foreach ($nav_item in $parentNavItems)
			
			
			#if($theme_display.getPermissionChecker().hasPermission($nav_item.getLayout().getGroupId(),"com.liferay.portal.model.Layout", "$nav_item.getLayout().getPrimaryKey()","VIEW"))
			
			#if($nav_item.getLayout().isHidden()==false)
				
				#set ($nav_item_attr_has_popup="")
				#set ($nav_item_attr_selected="")
				#set ($nav_item_caret="")
				#set ($nav_item_link_css_class="")		
				#set ($nav_item_css_class = "lfr-nav-item")
	
				#if ($nav_item.isSelected())
					#set ($nav_item_attr_selected="aria-selected='true'")
					#set ($nav_item_css_class = "$nav_item_css_class selected active")
				#end
				
				#if ($theme_display.getScopeGroupId() != $parentSiteGroup.getGroupId() &amp;&amp; $nav_item.getName() == $theme_display.getScopeGroup().getDescriptiveName())
				
					#set ($nav_item_attr_selected="aria-selected='true'")
					#set ($nav_item_css_class = "$nav_item_css_class selected active")
				#end				
	
				#if ($nav_item.hasChildren())
					#set ($nav_item_attr_has_popup="aria-haspopup='true'")
					#set ($nav_item_caret='<span class="lfr-nav-child-toggle"><i class="icon-caret-down"></i></span>')
					#set ($nav_item_css_class="$nav_item_css_class dropdown")
					#set ($nav_item_link_css_class="dropdown-toggle")
				#end
	
				<li class="$nav_item_css_class" id="layout_$nav_item.getLayoutId()" $nav_item_attr_selected role="presentation">
					<a aria-labelledby="layout_$nav_item.getLayoutId()" class="$nav_item_link_css_class" href="$nav_item.getURL()" $nav_item_attr_has_popup $nav_item.gettarget() role="menuitem">
					<span> $nav_item.getName() $nav_item_caret</span>
					</a>
	
					#if ($nav_item.hasChildren())
						<ul class="dropdown-menu  child-menu" role="menu">
							#foreach ($nav_child in $nav_item.getChildren())
								#set ($nav_child_attr_selected="")
								#set ($nav_child_css_class = "lfr-nav-item")
	
								#if ($nav_child.isSelected())
									#set ($nav_child_attr_selected="aria-selected='true'")
									#set ($nav_child_css_class = "selected")
								#end
	
								<li class="$nav_child_css_class" id="layout_$nav_child.getLayoutId()" $nav_child_attr_selected role="presentation">
									<a aria-labelledby="layout_$nav_child.getLayoutId()" href="$nav_child.getURL()" $nav_child.gettarget() role="menuitem">$nav_child.getName()</a>
								</li>
							#end
						</ul>
					#end
				</li>
				#end		
			#end
		#end
	</ul>
</nav>

Then replace the sub-navigation.vm to below code:

<nav class="navigationsubclass " id="navigationsub" role="navigation">
	<ul aria-label="#language (" site-pages")" role="menubar">
	
		#foreach ($nav_item in $nav_items)
			#set ($nav_item_attr_has_popup="")
			#set ($nav_item_attr_selected="")
			#set ($nav_item_css_class = "")
			
			#if ($nav_item.isSelected())
		         	#set ($nav_item_attr_selected="aria-selected='true'")
				#set ($nav_item_css_class = "selected")
			#end
			#if ($nav_item.hasChildren())
			
				$log.error($nav_item.hasChildren())
				#set ($nav_item_attr_has_popup="aria-haspopup='true'")
				
			#end
			<li class="$nav_item_css_class" id="layout_$nav_item.getLayoutId()" $nav_item_attr_selected role="presentation">
				<a aria-labelledby="layout_$nav_item.getLayoutId()" href="$nav_item.getURL()" $nav_item_attr_has_popup $nav_item.gettarget() role="menuitem"><span>$nav_item.getName()</span></a>

				#if ($nav_item.hasChildren())
					<ul class="child-menu" role="menu">
						#foreach ($nav_child in $nav_item.getChildren())
						
							#set ($nav_child_attr_selected="")
							#set ($nav_child_css_class = "false")

							#if ($nav_child.isSelected())
								#set ($nav_child_attr_selected="aria-selected='true'")
								#set ($nav_child_css_class = "selected")
							#end

							<li class="$nav_child_css_class" id="layout_$nav_child.getLayoutId()" $nav_child_attr_selected role="presentation">
								<a aria-labelledby="layout_$nav_child.getLayoutId()" href="$nav_child.getURL()" $nav_child.gettarget() role="menuitem">$nav_child.getName()</a>
							</li>
						#end
					</ul>
				#end
			</li>
		#end
	</ul>
</nav>

Thank You,
Devang Patel

[Shashank Surheley, modifié il y a 3 années.]

Hi Team,I am trying to edit the Menu Navigation to nth child submenus in Current default theme of DXP 7.2, in which there is no navigation.vm file in the provided bundle. So where to add & apply the above mentioned codes?

[Alfonso Crisci, modifié il y a 3 années.]

Hi Shashank, on 7.2 we use Freemarker templates instead of Velocity ones. You can create your own template by hovering the mouse on top-right of the Site Navigation Menu portlet > click on the ellipsis icon (3 vertical dots) > Configuration > Display Template > Manage Templates. You can use the ones here as a starting point: https://github.com/liferay/liferay-portal/tree/7.2.x/modules/apps/site-navigation/site-navigation-menu-web/src/main/resources/com/liferay/site/navigation/menu/web/portlet/template/dependencies

[Shashank Surheley, modifié il y a 3 années.]

Thanks Alfonso for the Github COdes, but do you have any ftl code similar which can give me n-level Navigation 1.) For pages & its CHild Pages etc  2.) Can we include child sites & its Pages as well?