Home → Velocity Formats →

Section navigation, need to only show current level 1 parent

• Edit

tdb

08 Apr, 2016 10:42 PM

I'm having a bit of a challenge trying to match up our typical navigation format with what an outside vendor's javascript side menu is anticipating. Ideally the output would look like this, current page being "Biochemistry and Molecular":

<ul>
    <li><a href="#" title="Academics">Academics</a>
        <ul>
            <li><a href="#" title="">Majors, Degrees, and Programs</a>
                <ul>
                    <li><a class="current" href="#" title="">Biochemistry and Molecular</a></li>
                    <li><a href="#" title="">Biology</a></li>
                    <li><a href="#" title="">Certificates, Minors, and Specializations</a></li>
                </ul>
            </li>
            <li><a href="#" title="">Honors Programs</a></li>
            <li><a href="#" title="">Living-Learning Communities</a></li>
            <li><a href="#" title="">Research</a></li>
            <li><a href="#" title="">Study Abroad</a></li>
            <li><a href="#" title="">Academic Support</a></li>
            <li><a href="#" title="">Faculty</a></li>
        </ul>
    </li>
</ul>

The href for the current page is given a class="current", and Academics is the level 1 parent folder for this particular page.

After a lot of experimentation, I feel like I'm close but not quite there, what I'm getting is this:

<ul>
    <li>
        <a title="" href="#">Academics</a>
    </li>
    <li>
        <a title="" href="#">Life at MSU</a>
    </li>
    <li>
        <a title="" href="#">Cost &amp; Aid</a>
    </li>
    <li>
        <a title="" href="#">Plan a Visit</a>
    </li>
    <li>
        <a title="" href="#">Admitted Students</a>
        <ul>
            <li>
                <a title="" href="#">Freshmen Students</a>
                <ul>
                    <li>
                        <a title="" href="#">Steps to Enroll</a>
                    </li>
                    <li>
                        <a title="" href="#">Complete Your Enrollment</a>
                    </li>
                    <li>
                        <a title="" href="#" class="current">Attend Orientation</a>
                        <ul>
                            <li>
                                <a title="" href="#" class="current">Academic Orientation Program Information</a>
                            </li>
                            <li>
                                <a title="" href="#">Orientation FAQs</a>
                            </li>
                            <li>
                                <a title="" href="#">Parent Orientation Program</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a title="" href="#">Transfer Students</a>
            </li>
            <li>
                <a title="" href="#">International Students</a>
            </li>
        </ul>
    </li>
    <li>
        <a title="" href="#">Apply</a>
    </li>
</ul>

A couple of issues:

1) Not only is Academics showing, but its level 1 siblings (Life at MSU, Cost & Aid, Plan a Visit, Apply) are also showing. Normally I'd hide those with CSS, but I can't in this case because it causes problems with the vendor's javascript. If more than one level 1 items appear, it basically breaks.

2) Only one item should be marked with a class="current". If the current page is the default file for the folder, the folder href needs to have a class="current", however if it's a page within that folder like this example, class="current" should only appear on the page and not the folder.

Any help would be much appreciated.

• index-block.jpg 55.3 KB
• side-nav.vm 3 KB
• index-block.xml 6.76 KB

1. 1 Posted by Ryan Griffith on 11 Apr, 2016 01:14 PM

   

   Hi,

   Quick question about this:

   Not only is Academics showing, but its level 1 siblings (Life at MSU, Cost & Aid, Plan a Visit, Apply) are also showing. Normally I'd hide those with CSS, but I can't in this case because it causes problems with the vendor's javascript. If more than one level 1 items appear, it basically breaks.

   Do you always need to hide top-level links if the current page is within a folder, regardless of what type of asset that first level item is (ie page, folder, symlink)? If so, you'll need to tweak the way you start your navigation.

   Thanks!

   • Edit

2. 2 Posted by tdb on 11 Apr, 2016 01:21 PM

   

   I always need the top-level link to show for the section that I'm currently in regardless of whether it's a folder or a page. Symlinks aren't being used at this point. None of the other top-level links should show up though, except the one that I'm currently in.

   • Edit

3. 3 Posted by Ryan Griffith on 11 Apr, 2016 01:32 PM

   

   Thank you for following up with the additional information.

   When you have a moment, give the attached Format a try and let me know how it works out.

   Please let me know if you have any questions.

   Thanks!

   • side-nav.vm 3.58 KB
   • Edit

4. 4 Posted by tdb on 11 Apr, 2016 03:26 PM

   

   Ryan, that works great, looking so much better.

   The only thing not currently working is applying class="current" to folders if currently on the default page of a folder.

   This is the output if I'm currently on /life-at-msu/activities/default for instance.

   
   
                       
   <ul>
       <li>
           <a title="" href="site://admissions.msu.edu/life-at-msu/default">Life at MSU</a>
           <ul>
               <li>
                   <a title="" href="site://admissions.msu.edu/life-at-msu/activities/default">Organizations, Events &amp; Activities</a>
                   <ul>
                       <li>
                           <a title="" href="site://admissions.msu.edu/life-at-msu/activities/clubs-organizations">Clubs and organizations</a>
                       </li>
                       <li>
                           <a title="" href="site://admissions.msu.edu/life-at-msu/activities/arts">Arts and culture</a>
                       </li>
                   </ul>
               </li>
               <li>
                   <a title="" href="site://admissions.msu.edu/life-at-msu/diversity">Diversity</a>
               </li>
               <li>
                   <a title="" href="site://admissions.msu.edu/life-at-msu/health-wellness">Health and wellness</a>
               </li>
               <li>
                   <a title="" href="site://admissions.msu.edu/life-at-msu/neighborhoods">Neighborhoods</a>
               </li>
               <li>
                   <a title="" href="site://admissions.msu.edu/life-at-msu/athletics-recreation">Athletics and recreation</a>
               </li>
               <li>
                   <a title="" href="site://admissions.msu.edu/life-at-msu/east-lansing">East Lansing</a>
               </li>
               <li>
                   <a title="" href="site://admissions.msu.edu/life-at-msu/getting-around">Getting around</a>
               </li>
               <li>
                   <a title="" href="site://admissions.msu.edu/life-at-msu/safety">Safety</a>
               </li>
               <li>
                   <a title="" href="site://admissions.msu.edu/life-at-msu/living-dining">Living and dining</a>
               </li>
           </ul>
       </li>
   </ul>
   

   It seems like this should be taking care of that:
   

       #if ( $_PropertyTool.isNull($currentSibling) && $folder.getAttribute("current").getValue() == "true" )
           <a title="" href="${folderLoc}/default" class="current">$_EscapeTool.xml($theFolderTitle.value)</a>
       #else
           <a title="" href="${folderLoc}/default">$_EscapeTool.xml($theFolderTitle.value)</a>
       #end
   

   (I updated the script just to add in the links.)

   • side-nav-v2.vm 3.63 KB
   • Edit

5. 5 Posted by Ryan Griffith on 12 Apr, 2016 02:53 PM

   

   Hi,

   My apologies for overlooking that use case. When you have a moment, let's try the following adjustment:

    #set ($currentSibling = $_XPathTool.selectSingleNode($folder, "system-page[name = 'default' and @current]"))
   
       #if ( !$_PropertyTool.isNull($currentSibling) && $folder.getAttribute("current") )
           <a title="" href="${folderLoc}/default" class="current">$_EscapeTool.xml($theFolderTitle.value)</a>
       #else
           <a title="" href="${folderLoc}/default">$_EscapeTool.xml($theFolderTitle.value)</a>
       #end
   

   This should look to see if the current page is the folder's immediate default page, and the folder contains the current attribute.

   Please let me know if you have any questions.

   Thanks!

   • Edit

6. 6 Posted by tdb on 15 Apr, 2016 04:51 PM

   

   Sorry, I was out sick a couple of days. Thank you so much Ryan. You've been more helpful than you probably realize. When I have some time I'm going to go through this more so that I can learn from it and hopefully don't have to keep relearning navigation formats each time they come up.

   • Edit

7. 7 Posted by Ryan Griffith on 15 Apr, 2016 06:15 PM

   

   Not a problem at all! I am glad to hear the latest tweaks did the trick.

   I'm going to go ahead and close this discussion, please feel free to comment or reply to re-open if you have any additional questions.

   Have a great day!

   • Edit

8. Ryan Griffith closed this discussion on 15 Apr, 2016 06:15 PM.