Question

我是Liferay 6.1的新手。我需要一个可以使用hover或onmouseover方法显示子孙链接的导航portlet。我正在使用6.1中的默认导航portlet，但我无法弄清楚如何配置它以在悬停时显示grahdchild链接。

这样的任务是否需要自定义导航portlet？或者提供的默认portlet是否可配置？

说我有一个类似于下面的网站结构：

主页
- 客厅
  - 长椅
  - TV
- 厨房

导航portlet标题将是Home，其中显示的是Living Room和Kitchen。将出现在沙发和电视的客厅上空盘旋。

我尝试创建一个类似于here的钩子虽然无济于事。

类似于3 Javascript＆gt;的方法。 3.1 jQuery见here

更新

我和Liferay一起就这个问题订了一张票。由于页面未显示嵌套（级别2）导航，直到选择了父页面/选项卡，为其提供“打开选定”选择器。如果在HTML中生成了这个2级导航，则可以通过“高级样式”轻松配置悬停css选择器。将以分辨率更新。见下面的例子：

请参阅下面的视觉表示：注意：在这种情况下，有两个FIRST_LEVEL_OBJECT和一个SECOND_LEVEL_OBJECT。

选择第二个FIRST_LEVEL_OBJECT的实例

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

选择第一个FIRST_LEVEL_OBJECT且显示子SECOND_LEVEL_OBJECT的实例

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

Answer 1

以下是提供功能的方法。

将子页面添加到portlet上显示的父页面。
选择Options
选择Configuration
找到included-layouts配置All并保存 - 这将启用＆＃34;布局级别-2＆＃34;要在HTML中呈现而不需要先选择的类。
第2步
选择Look and Feel
导航至Advanced Styling
添加以下CSS：

li.open ul.level-2 a {
    border: none;
    background: #E1E1E1;
    text-indent: 15px;
}
li.open:hover ul.level-2 {
    display: block;
}

如果页面上有多个导航portlet，则此实现将影响所有导航portlet。隔离1 portlet以启用此功能的唯一方法是：

选择Options
选择Configuration
找到Bullet Style Arrows的配置（默认值为Dots）并保存 - 这会将HTML类从nav-menu-style-dots更改为nav-menu-style-arrows。

返回高级样式，在li.open:hover ul.level-2前添加.nav-menu-style-arrows，如下所示：

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

注意：我知道高级样式下的Add a CSS rule for just this portlet，它似乎没有在这个实例中有所作为。我认为，对于每个导航portlet，Portlet ID的基本问题是相同的。

您现在已将悬停CSS选择器添加到默认导航portlet中！

使用导航portlet显示嵌套页面

更新

1 个答案: