Unable to assign new class/ID to specific sub-menu nav

[Max H, geändert vor 11 Jahren.]

I am modifying the navigation.vm in order to set a new class (probably ID would be more appropriate) in order to target styles for correct positioning of a sub-menu dropdown. My sub-menus do not dropdown vertically in standard manner but instead appear as a horizontal bar directly below the main nav menu spreading out left to right in parallel.

Below is my code. While this code succeeds in creating a sub-menu ul with the class “child-menu-admin”, for reasons I do not understand, none of the child li elements that I created in the Liferay GUI for this sub-menu (I’ve checked and they do exist there) are created inside of it. The ul is completely empty.
Where have I gone wrong?

<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
			#if($nav_item.getName().equals("Tools") || $nav_item.getName().equals("Administration"))
				<a href="$nav_item.getURL()" $nav_item.gettarget()><span>$nav_item.icon() $nav_item.getName()<span>▼</span></span></a>
				#elseif($nav_item.getName().equals("Transmissions") &amp;&amp; $nav_item.isSelected())
				<a href="$nav_item.getURL()" $nav_item.gettarget()><span>$nav_item.icon() $nav_item.getName()</span></a>
					<span id="trsmsnArrow">▼</span>
			#else
				<a href="$nav_item.getURL()" $nav_item.gettarget()><span>$nav_item.icon() $nav_item.getName()</span></a>
			#end
				#if ($nav_item.hasChildren() &amp;&amp; $nav_item.getName().equals("Administration"))
					<ul class="child-menu">
						#elseif($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
				<hr>
			
		#end
	</ul>
</li></ul></nav>

[David H Nebinger, geändert vor 11 Jahren.]

Max H:

The ul is completely empty. Where have I gone wrong?

#if ($nav_item.hasChildren() && $nav_item.getName().equals("Administration"))
  

#elseif($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

After cleaning up your spacing, I hope you see that the #foreach is only in the #elseif portion of the outer condition...

[Max H, geändert vor 11 Jahren.]

First, I need to correct something in my code sample I provided. This portion:

#if ($nav_item.hasChildren() && $nav_item.getName().equals("Administration"))
  

Should actually look like this:

#if ($nav_item.hasChildren() && $nav_item.getName().equals("Administration"))
  

The second one containing the new ID to target that sub nav for CSS. My apologies for the oversight.

I hope you see that the #foreach is only in the #elseif portion of the outer condition

Be prepared to lose hope

I'm probably wrong but I would think this is the outer (as in outermost) condition:

#if ($nav_item.hasChildren() && $nav_item.getName().equals("Administration"))

But that wouldn't make sense since the li are appearing on the ul element that is returned by this portion of the code:

#elseif($nav_item.hasChildren())
  

I would call this the inner condition.

Hot? Cold? Warm?

Regardless, my take away from your comment is that my foreach portion is placed incorrectly. Unfortunately, I've flipped this code around many times and I'm not hitting it correctly yet.

[Max H, geändert vor 11 Jahren.]

Ok, I got a little closer (but still no cigar) with this:

#if($nav_item.hasChildren())
				

				#foreach ($nav_child in $nav_item.getChildren())
					#if ($nav_item.hasChildren() && $nav_item.getName().equals("Administration"))
					<ul id="admin-submenu" class="child-menu">
						
						#end
								#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>

I'

[David H Nebinger, geändert vor 11 Jahren.]

Based on the code you've provided, you'll end up generating:

<ul class="child-menu">
<ul id="admin-submenu" class="child-menu">
<li />

First, if you know HTML you would know that the sequence <ul><ul> will not have a visual representation, as the inner one is not surrounded by the necessary <li /> tag.

Second, your "#if ($nav_item.hasChildren() && $nav_item.getName().equals("Administration"))" line does not need the hasChildren() check, because you wouldn't be in this section if it wasn't satisfied by the first line of code.

I think ultimately what you're trying to do is something along the lines of:

<ul>
  #foreach ($nav_item in $nav_items)
    <li>
    #if ($nav_item.hasChildren())
      <ul #if ($nav_item.getname().equals("administration")) id="admin-submenu" #end class="child-menu">
      #foreach ($nav_child in $nav_item.getChildren())
        <li>...</li>
      #end
      </ul>
    #end
    </li>
  #end
</ul>

[Max H, geändert vor 11 Jahren.]

I think ultimately what you're trying to do is something along the lines of:

You nailed it, David, you just nailed!

Examining the code you produced, I see that I had more fundamental problems with my code and that my foreach statement really wasn’t a problem.

This portion of your code is very instructive for me:

#if($nav_item.hasChildren())
	

Here I see that rather than establish the entire <ul> tag and then, based on different conditions, attempt to completely rewrite it as I did, you instead construct the <ul> piece by piece based upon the different conditions. I wish I could I say that I would have thought to do this but …

I have learned a lot and greatly appreciate your help.