Kentico 导航菜单

Question

我在 Kentico 7 工作，我需要将某种类型的 CSS 样式应用到新的 "drop-down-menu"。母版页为其导航菜单显示某种 CSS 样式，但是，导航菜单由转发器（Web 部件）组成。这造成了一个问题，因为我现在必须向我的导航菜单添加一些转发器不允许的复杂性。通过添加 "drop-down-menu" Web 部件，我能够获得所需的导航菜单特征，但是，CSS 样式看起来与使用中继器时完全不同。如何找到中继器上正在使用的 CSS 并将其应用到 "drop-down-menu"？谢谢！

Answer 1

有一篇关于Best Practices for Implementing Site Navigation in Kentico

的好文章

对于下拉菜单，您最好使用分层菜单

Answer 2

对于 v7，Kentico Support 的 take a look at this article 讨论了如何使用分层查看器和分层转换构建超级菜单。本质上，您将根据节点级别、文档类型和您可以添加到转换中的任何其他条件，使用所需的 HTML 构建导航。

对于 v8 和更新版本，可以选择在转换中放置一个占位符以说明子节点的去向；此功能在 v7 中不可用，我认为这是升级的充分理由，因为它可以节省大量时间。

Answer 3

扩展关于根据 Kentico 最佳实践构建菜单的博客 post：

http://devnet.kentico.com/articles/best-practices-for-implementing-site-navigation-in-kentico

分层转换的标准结构如下所示：

Header 变换：

<ul>

物品改造：

<li>
  <a href="{% GetDocumentUrl() %}" title="{% HTMLEncode(DocumentName) %}">{% HTMLEncode(DocumentName) %}</a>
  {^SubLevelPlaceHolder^}
</li>

页脚转换：

</ul>

这会生成如下结构：

<ul>
 <li>
  <a href="/item-1.aspx" title="item 1">item 1</a>  
 </li>
 <li>
  <a href="/item-2.aspx" title="item 2">item 2</a>
  <ul>
   <li>
    <a href="/item-2/subitem-1.aspx" title="subitem 1">subitem 1</a> 
   </li>
  </ul>
 </li>
 <li>
  <a href="/item-3.aspx" title="item 3">item 3</a>
 </li>
</ul>

当您希望菜单反映页面的 属性 → 导航 部分的属性时，您需要对项目转换实施一些逻辑。 CMS_Document 数据库 table 中有以下列反映了 Navigation 部分的属性：

[DocumentMenuCaption]
[DocumentMenuStyle]
[DocumentMenuItemImage]
[DocumentMenuItemLeftImage]
[DocumentMenuItemRightImage]
[DocumentMenuJavascript]
[DocumentMenuRedirectUrl]
[DocumentMenuClass]
[DocumentMenuStyleHighlighted]
[DocumentMenuClassHighlighted]
[DocumentMenuItemImageHighlighted]
[DocumentMenuItemLeftImageHighlighted]
[DocumentMenuItemRightImageHighlighted]
[DocumentMenuItemInactive]

让我们浏览一下导航部分的所有相关属性：

1) 菜单标题

您可以指定不同于页面名称的自定义菜单标题，因此您需要检查此属性是否为空，如果已填写，请改用标题。要确定某些属性是否为空，您可以在宏中使用 String.IsNullOrEmpty(DocumentMenuCaption) 或 DocumentMenuCaption.ToString()==""。在我的示例中，我使用第二个选项：

{% HTMLEncode(DocumentMenuCaption.ToString()!=""?DocumentMenuCaption:DocumentName) %}

宏检查是否指定了任何 DocumentMenuCaption，如果没有，则使用 DocumentName。

2) 菜单操作

无效菜单项重定向到 URL:

{% (DocumentMenuItemInactive && DocumentMenuRedirectUrl.ToString()=="")?"":"href='"+GetDocumentUrl()+"' ") %}

Javascript 命令：

{% (DocumentMenuJavascript.ToString()!=""?"onclick=\""+DocumentMenuJavascript+"\" ":"") %}

Kentico 已经原生支持重定向。

3）菜单设计：

菜单项样式：

{% (DocumentMenuStyle.ToString()!=""?"style='"+DocumentMenuStyle+"' ":"") %}
Menu item CSS class:
class='{% (DocumentMenuClass.ToString()!=""?DocumentMenuClass:"DefaultClassOrNothing") %}'

左图菜单项：

{% (DocumentMenuItemLeftImage.ToString()!=""?"<img src='"+DocumentMenuItemLeftImage+"' alt='"+HTMLEncode(DocumentMenuCaption.ToString()!=""?DocumentMenuCaption:DocumentName)+"' />":"") %}

菜单项图片：

{% if (DocumentMenuItemImage.ToString()!="") { "<img src='"+DocumentMenuItemImage+"' alt='"+HTMLEncode(DocumentMenuCaption.ToString()!=""?DocumentMenuCaption:DocumentName)+"' />"; } %}

菜单项右图：

{% (DocumentMenuItemRightImage.ToString()!=""?"<img src='"+DocumentMenuItemRightImage+"' alt='"+HTMLEncode(DocumentMenuCaption.ToString()!=""?DocumentMenuCaption:DocumentName)+"' />":"") %}

- 突出显示： 所有以前的属性都有自己的 - 突出显示的版本。此类属性的代码名称附加了突出显示的 post 修复程序。判断菜单项是否高亮，可以调用下面的宏方法：

IsCurrentDocument()

根据您的需要，您还可以使用以下方法使当前菜单项路径上的所有项目都突出显示：

IsDocumentOnSelectedPath()

最终的项目转换如下所示：

<li {% if (IsCurrentDocument()) { return (DocumentMenuStyleHighlighted.ToString()!=""?"style='"+DocumentMenuStyleHighlighted+"' ":""); } else { return (DocumentMenuStyle.ToString()!=""?"style='"+DocumentMenuStyle+"' ":""); } #%}class='{% if (IsCurrentDocument()) { return (DocumentMenuClassHighlighted.ToString()!=""?DocumentMenuClassHighlighted:"DefaultClassOrNothing"); } else { return (DocumentMenuClass.ToString()!=""?DocumentMenuClass:"DefaultClassOrNothing"); } #%}'>
  {% if (IsCurrentDocument()) { DocumentMenuItemLeftImageHighlighted.ToString()!=""?"<img src='"+DocumentMenuItemLeftImageHighlighted+"' alt='"+HTMLEncode(DocumentMenuCaption.ToString()!=""?DocumentMenuCaption:DocumentName)+"' />":"" } else { DocumentMenuItemLeftImage.ToString()!=""?"<img src='"+DocumentMenuItemLeftImage+"' alt='"+HTMLEncode(DocumentMenuCaption.ToString()!=""?DocumentMenuCaption:DocumentName)+"' />":"" } %}
  <a {% (DocumentMenuJavascript.ToString()!=""?"onclick=\""+DocumentMenuJavascript+"\" ":"") #%}{% ((DocumentMenuItemInactive && DocumentMenuRedirectUrl.ToString()=="")?"":"href='"+GetDocumentUrl()+"' ") #%}title='{% HTMLEncode(DocumentMenuCaption.ToString()!=""?DocumentMenuCaption:DocumentName) #%}'>{% if (IsCurrentDocument()) { if (DocumentMenuItemImageHighlighted.ToString()!="") { "<img src='"+DocumentMenuItemImageHighlighted+"' alt='"+HTMLEncode(DocumentMenuCaption.ToString()!=""?DocumentMenuCaption:DocumentName)+"' />"; } else { HTMLEncode(DocumentMenuCaption.ToString()!=""?DocumentMenuCaption:DocumentName); } } else { if (DocumentMenuItemImage.ToString()!="") { "<img src='"+DocumentMenuItemImage+"' alt='"+HTMLEncode(DocumentMenuCaption.ToString()!=""?DocumentMenuCaption:DocumentName)+"' />"; } else { HTMLEncode(DocumentMenuCaption.ToString()!=""?DocumentMenuCaption:DocumentName); } } #%}</a>
  {% if (IsCurrentDocument()) { DocumentMenuItemRightImageHighlighted.ToString()!=""?"<img src='"+DocumentMenuItemRightImageHighlighted+"' alt='"+HTMLEncode(DocumentMenuCaption.ToString()!=""?DocumentMenuCaption:DocumentName)+"' />":"" } else { DocumentMenuItemRightImage.ToString()!=""?"<img src='"+DocumentMenuItemRightImage+"' alt='"+HTMLEncode(DocumentMenuCaption.ToString()!=""?DocumentMenuCaption:DocumentName)+"' />":"" } else { DocumentMenuItemRightImage.ToString()!=""?"<img src='"+DocumentMenuItemRightImage+"' alt='"+HTMLEncode(DocumentMenuCaption.ToString()!=""?DocumentMenuCaption:DocumentName)+"' />":"" } %}
  {^SubLevelPlaceHolder^}
</li>

Kentico 导航菜单

Kentico Navigation Menu

css

frontend

web-deployment

content-management-system

kentico