Question

请原谅我提出这样一般性的问题。我正在用Orchard CMS创建一个网站。网站的设计和互动是关键要求。我有一个固定大小（900像素宽）的导航菜单，但应该能够调整尽可能多的菜单项（我通过修改css手动完成）。我已经使用了一些jQuery来为菜单创建鼠标悬停等动画。问题是css和jQuery参数是硬编码的。因此，如果用户要更改以添加新的菜单项，他们需要事先知道菜单项和子项的数量，因此普通用户不容易定制CMS的整个点。保持此菜单交互（使用jQuery动画）的最佳方式是什么，以及用户可以将内容页面添加到此菜单（与在果园中使用默认导航菜单一样）以及用户友好的非技术用户需要不得不搞乱菜单的jQuery和CSS？

这样做的最佳方法是，我应该创建一个模块（导航菜单组件？），它将动态设置css / jQuery值（宽度等）

更新此外，现在我有我的HTML（我的导航菜单，无序列表等）和我的Layout.cshtml中嵌入的jQuery脚本参考，导航菜单的样式在我的主题Site.css中，这被认为是不好的做法吗？

Answer 1

我最终通过覆盖Menu.cshtml视图完成了这项工作，编写了一些逻辑来检查菜单项的数量，然后根据它们包含的菜单项的数量渲染具有不同ID的导航菜单。然后我在我的Site.css中添加了不同的CSS选择器，每个CSS选择器都适用于各种大小的导航菜单。这是我的Menu.cshtml最终看起来像（这在你当前活动主题的Views文件夹中）。

@
{

    Script.Require("jQuery");
    var tag = Tag(Model , "ul");
    var items = (IList<dynamic>)Enumerable.Cast<dynamic>(Model.Items);

}
@{//if the menu contains 3 items, render a nav called 'ThreeItemNav'
if(items.Count == 3){
<nav id="ThreeItemNav">
    @tag.StartElement
        @* see MenuItem shape template *@
        @DisplayChildren(Model)
    @tag.EndElement
</nav>
}
else if(items.Count == 4){
<nav id="FourItemNav">
    @tag.StartElement
        @* see MenuItem shape template *@
        @DisplayChildren(Model)
    @tag.EndElement
</nav>

}
else if(items.Count == 5){
<nav id="FiveItemNav">
    @tag.StartElement
        @* see MenuItem shape template *@
        @DisplayChildren(Model)
    @tag.EndElement
</nav>


}
}

//Include the jQuery to add animations to the navigation menu
@using (Script.Foot())
{
    <script type ="text/javascript">
    //<![CDATA[
        $(document).ready(function () {
       //Add your script here
            $(" #FiveItemNav li").hover(function () {
        //Do something when the sub menu list items are hovered....
            });


            $(" #FourItemNav li").hover(function () {
        //Do something when the sub menu list items are hovered....
            });

            $(" #ThreeItemNav li").hover(function () {
        //Do something when the sub menu list items are hovered....
            });
        });


    //]]>
    </script>
}

请注意，您需要在主题中为每个导航元素（ThreeItemNav，FourItemNav和FiveItemNav）添加CSS选择器，例如在当前主题Site.css中：

/*Style the Three Item Navigation menu*/
#ThreeItemNav li
{    
background-color:#263A79;
}

#ThreeItemNav a:hover
{
border-right:1px solid #333;
border-left:1px solid #333;
}


#ThreeItemNav > ul li.current 
{
       background:#5882FA;
}

/*Style the Four Item Navigation menu*/

#FourItemNav li
{
       background:#Purple;
}

#FourItemNav a:hover
{
       background:Orange;
}

.........more styles

这看起来似乎是一个冗长的方法，但它是我能想到的最好的，这样我就可以维护Orchard导航菜单的功能，并且仍然使用CSS设置样式并添加jQuery动画。我认为从长远来看，初始开发成本值得在导航菜单中添加一些强大的功能。我很想听听有关如何以更简洁的方式做到这一点的任何建议。另外我肯定会推荐使用Orchard 1.5，因为它内置支持创建分层导航菜单。

检查Menu.cshtml和MenuItem.cshtml视图的内部工作原理有助于了解如何在Orchard中呈现导航菜单以及检查默认主题机如何设置导航菜单和它的各种级别/子菜单。

自定义Orchard导航菜单

1 个答案: