1

请原谅我问了这样一个笼统的问题。我正在使用 Orchard CMS 创建一个网站。网站的设计和交互性是关键要求。我有一个固定大小（900 px 宽）的导航菜单，但应该能够调整尽可能多的菜单项（我通过修改 css 手动执行此操作）。我使用了一些 jQuery 来为菜单创建一些鼠标悬停动画等。问题是 css 和 jQuery 参数是硬编码的。所以如果用户要更改添加一个新的菜单项，他们需要事先知道菜单项的数量，以及子项的数量，因此对于普通用户来说，定制一个CMS的全部点并不是很容易。保持此菜单交互的最佳方式是什么（使用 jQuery 动画），

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

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

4

1 回答 1

1

我最终在 orchard 1.5 中通过覆盖Menu.cshtml视图、编写一些逻辑来检查菜单项的数量，然后根据它们包含的菜单项的数量呈现具有不同 ID 的导航菜单来完成这项工作。然后我在我的 .js 中添加了不同的 CSS 选择器Site.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>
}

请注意，您需要在主题中为每个导航元素（和）添加 CSS 选择器ThreeItemNav，例如在当前主题中：FourItemNavFiveItemNavSite.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 中是如何呈现的，以及检查默认主题机如何设置导航菜单及其各种级别/子菜单的样式。

于 2012-08-29T16:28:35.980 回答