Kombinierte Ansicht Flache Ansicht Baumansicht
Threads [ Zurück | Nächste ]
toggle
Max H
Unable to assign new class/ID to specific sub-menu nav
18. Juli 2012 12:45
Antwort

Max H

Rang: New Member

Nachrichten: 17

Eintrittsdatum: 11. Juli 2012

Neue Beiträge

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?

 1<nav class="$nav_css_class" id="navigation">
 2    <h1>
 3        <span>#language("navigation")</span>
 4    </h1>
 5       
 6    <ul>
 7       
 8        #foreach ($nav_item in $nav_items)
 9            #if ($nav_item.isSelected())
10                <li class="selected">
11            #else
12                <li>
13            #end
14            #if($nav_item.getName().equals("Tools") || $nav_item.getName().equals("Administration"))
15                <a href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.icon() $nav_item.getName()<span>&#9660;</span></span></a>
16                #elseif($nav_item.getName().equals("Transmissions") && $nav_item.isSelected())
17                <a href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.icon() $nav_item.getName()</span></a>
18                    <span id="trsmsnArrow">&#9660;</span>
19            #else
20                <a href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.icon() $nav_item.getName()</span></a>
21            #end
22                #if ($nav_item.hasChildren() && $nav_item.getName().equals("Administration"))
23                    <ul class="child-menu">
24                        #elseif($nav_item.hasChildren())
25                            <ul class="child-menu">
26                        #foreach ($nav_child in $nav_item.getChildren())
27                            #if ($nav_child.isSelected())
28                                <li class="selected">
29                            #else
30                                <li>
31                            #end
32                                <a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
33                            </li>
34                        #end
35                    </ul>
36                #end
37                <hr />
38            </li>
39        #end
40    </ul>
41</nav>
David H Nebinger
RE: Unable to assign new class/ID to specific sub-menu nav
18. Juli 2012 13:06
Antwort

David H Nebinger

Community Moderator

Rang: Liferay Legend

Nachrichten: 11113

Eintrittsdatum: 1. September 2006

Neue Beiträge

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

 1#if ($nav_item.hasChildren() && $nav_item.getName().equals("Administration"))
 2  <ul class="child-menu">
 3#elseif($nav_item.hasChildren())
 4  <ul class="child-menu">
 5  #foreach ($nav_child in $nav_item.getChildren())
 6    #if ($nav_child.isSelected())
 7      <li class="selected">
 8    #else
 9      <li>
10    #end
11      <a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
12    </li>
13  #end
14  </ul>
15#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
RE: Unable to assign new class/ID to specific sub-menu nav
18. Juli 2012 14:48
Antwort

Max H

Rang: New Member

Nachrichten: 17

Eintrittsdatum: 11. Juli 2012

Neue Beiträge

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

1#if ($nav_item.hasChildren() && $nav_item.getName().equals("Administration"))
2  <ul class="child-menu">


Should actually look like this:

1#if ($nav_item.hasChildren() && $nav_item.getName().equals("Administration"))
2  <ul id="admin-submenu" class="child-menu">


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 emoticon

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

1#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:

1#elseif($nav_item.hasChildren())
2  <ul class="child-menu">


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. emoticon
Max H
RE: Unable to assign new class/ID to specific sub-menu nav
18. Juli 2012 15:08
Antwort

Max H

Rang: New Member

Nachrichten: 17

Eintrittsdatum: 11. Juli 2012

Neue Beiträge

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

 1#if($nav_item.hasChildren())
 2                <ul class="child-menu">
 3                #foreach ($nav_child in $nav_item.getChildren())
 4                    #if ($nav_item.hasChildren() && $nav_item.getName().equals("Administration"))
 5                    <ul id="admin-submenu"  class="child-menu">
 6                        
 7                        #end
 8                                #if ($nav_child.isSelected())
 9                                    <li class="selected">
10                                #else
11                                    <li>
12                                #end
13                                <a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
14                            </li>
15                        #end


I'
David H Nebinger
RE: Unable to assign new class/ID to specific sub-menu nav
18. Juli 2012 17:09
Antwort

David H Nebinger

Community Moderator

Rang: Liferay Legend

Nachrichten: 11113

Eintrittsdatum: 1. September 2006

Neue Beiträge

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:

 1<ul>
 2  #foreach ($nav_item in $nav_items)
 3    <li>
 4    #if ($nav_item.hasChildren())
 5      <ul
 6      #if ($nav_item.getName().equals("Administration"))
 7        id="admin-submenu"
 8      #end
 9        class="child-menu">
10      #foreach ($nav_child in $nav_item.getChildren())
11        <li>...</li>
12      #end
13      </ul>
14    #end
15    </li>
16  #end
17</ul>
Max H
RE: Unable to assign new class/ID to specific sub-menu nav
19. Juli 2012 10:16
Antwort

Max H

Rang: New Member

Nachrichten: 17

Eintrittsdatum: 11. Juli 2012

Neue Beiträge

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:
1
2#if($nav_item.hasChildren())
3    <ul
4    #if ($nav_item.getName().equals("Administration"))
5        id="admin-submenu"
6    #end
7        class="child-menu">


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 … emoticon

I have learned a lot and greatly appreciate your help.