我在 Kentico 7 中工作，我需要将某种类型的 CSS 样式应用于新的“下拉菜单”。母版页为其导航菜单显示某种 CSS 样式，但是，导航菜单由中继器（Web 部件）组成。这造成了一个问题，因为我现在必须在我的导航菜单中添加一些中继器不允许的复杂性。通过添加“下拉菜单”webpart，我能够获得所需的导航菜单特性，但是，CSS 样式看起来与使用中继器时不同。如何找到中继器上使用的 CSS 并将其应用于“下拉菜单”？谢谢！
【问题讨论】：
标签： css content-management-system frontend web-deployment kentico
要扩展有关根据 Kentico 最佳实践构建菜单的博客文章：
http://devnet.kentico.com/articles/best-practices-for-implementing-site-navigation-in-kentico
层次转换的标准结构如下所示：
标题转换：
<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 数据库表中有以下列反映导航部分的属性：
[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)+"' />":"") %}
- 突出显示： 所有以前的属性都有自己的 - 突出显示的版本。此类属性的代码名称附加了突出显示的后缀。要查看菜单项是否突出显示，可以调用以下宏方法：
IsCurrentDocument()
根据您的需要，您还可以使用以下方法来突出显示当前菜单项路径上的所有项目：
IsDocumentOnSelectedPath()
最终的 Item 转换如下所示：
<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>
【讨论】：
对于 v7，take a look at this article 由 Kentico Support 提供，其中讨论了使用分层查看器和分层转换构建超级菜单。本质上，您将使用基于节点级别、文档类型和您可以添加到转换中的任何其他条件所需的 HTML 来构建导航。
在 v8 和更新版本中，可以选择在转换中放置一个占位符来说明子节点的去向；此功能在 v7 中不可用，我认为有足够的理由进行升级，因为它可以节省大量时间。
【讨论】：
有一篇关于Best Practices for Implementing Site Navigation in Kentico的好文章
对于下拉菜单，使用分层菜单会更好
【讨论】：