Using navigation portlet to display nested pages

StackOverflow https://stackoverflow.com/questions/22101499

Question

I'm new to Liferay 6.1. I am in need of a navigation portlet that can display child and grandchild links using the hover or onmouseover methods. I'm using the default navigation portlet in 6.1 but am unable to figure out how to configure it to also display grahdchild links when hovered over.

Would a task such as this require a custom navigation portlet? Or is the default portlet provided configurable?

Say I have a site structure much like below:

  1. Home
    • Living Room
      • Couch
      • TV
    • Kitchen

The navigation portlet title would be Home with Living Room and Kitchen being the child displayed. While hovering over Living Room with Couch and TV will appear.

I've tried creating a hook much like the one seen here though to no avail.

Somehting similar to the methods uses for 3 Javascript > 3.1 jQuery as seen here

Update

I placed a ticket with Liferay regarding this issue I am having. Due to the pages not presenting the nested (level-2) navigation until the parent page/tab has been selected giving it the 'open selected' selector. If this level-2 navigation was generated in the HTML the hover css selector would be easily configurable through "Advanced Styling". Will update with resolution. See example below:

See below for visual representation: NOTE: In this case there are two FIRST_LEVEL_OBJECT and one SECOND_LEVEL_OBJECT.

Instance where second FIRST_LEVEL_OBJECT is selected

<li class="">
 <a class="" href="/group/ssc/ssc-hr-contact-list">FIRST_LEVEL_OBJECT</a>
</li>
<li id="aui_3_4_0_1_2072" class="selected ">
 <a id="aui_3_4_0_1_2071" class="selected " href="/group/ssc/something-referral-program">FIRST_LEVEL_OBJECT</a>
</li>

Instance where first FIRST_LEVEL_OBJECT is selected and child SECOND_LEVEL_OBJECT is displayed

<li id="aui_3_4_0_1_2166" class="open selected ">
 <a id="aui_3_4_0_1_2165" class="open selected " href="/group/ssc/ssc-hr-contact-list"> FIRST_LEVEL_OBJECT</a>
  <ul class="layouts level-2">
   <li class="">
     <a class="" href="/group/ssc/test-gc-1">SECOND_LEVEL_OBJECT</a>
   </li>
  </ul>
</li>
<li class="">
 <a class="" href="/group/ssc/something-referral-program">FIRST_LEVEL_OBJECT</a>
</li>
Était-ce utile?

La solution

Here's the way to provide the functionality.

  1. Add child pages to the parent page being displayed on the portlet.
  2. Select Options
  3. Select Configuration
  4. Locate included-layouts configure for All and save - This enables the "layouts level-2" class to render in the HTML without the need for selection first.
  5. Step 2
  6. Select Look and Feel
  7. Navigate to Advanced Styling
  8. Add the following CSS:
li.open ul.level-2 a {
    border: none;
    background: #E1E1E1;
    text-indent: 15px;
}
li.open:hover ul.level-2 {
    display: block;
}

If you have more than 1 navigation portlet on the page this implementation will effect all navigation portlets. The only way to isolate 1 portlet to enable this functionality is to:

  1. Select Options
  2. Select Configuration
  3. Locate Bullet Style configure for Arrows (default should be Dots) and save - This will change the HTML class from nav-menu-style-dots to nav-menu-style-arrows.

Back in advanced styling add .nav-menu-style-arrows in front of li.open:hover ul.level-2 as shown below:

.nav-menu-style-arrows li.open:hover ul.level-2 {
    display: block;
}

NOTE: I am aware of the Add a CSS rule for just this portlet under Advanced Styling and it didn't seem to make a difference in this instance. I believe it's an underlying issue regarding the Portlet IDs being the same for each navigation portlets.

You have now added the hover CSS selector to a default navigation portlet!

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top