自定义果园导航菜单 [英] Customizing the Orchard navigation menu

问题描述

请原谅我问这样一个一般性的问题。我创建与果园CMS网站。该网站的设计和交互性是关键要求。我有一个具有固定大小（900像素宽）导航菜单，但应该能够尽可能多的菜单项调整地（我手动执行此操作通过修改CSS）。我用了一下jQuery的创造上的鼠标悬停等为菜单一些动画。问题是，CSS和jQuery的参数很难codeD。因此，如果用户要发生变化，添加新的菜单项，就需要预先知道的菜单项，子项数量，因此，它不是很容易的，对于普通用户来定制它其中一个CMS整点。什么是保持此菜的互动（与jQuery的动画）的最佳方式，并使得用户可以能够内容页添加到这个菜单（如他们在果园默认的导航菜单做的），还人性化，使得非技术用户需要有与jQuery的浪费时间和CSS菜单？

Excuse me for asking such a general question. I'm creating a website with Orchard CMS. The website's design and interactivity are critical requirements. I have a navigation menu which has a fixed size(900 px wide), but should be able to adjust as many menu items as possible (I do this manually by modifying the css). I've used a bit of jQuery to create some animations on mouse hovers etc. for the menu. Problem is that the css and jQuery parameters are hard coded. So if a user were to change to add a new menu item, they need to know in advance the number of menu items, and sub items, thus it's not very easy for the average user to customize it which the whole point of a CMS. What is the best way of keeping this menu interactive (with the jQuery animations), and such that the user can be able to add content pages to this menu (as they do with the default navigation menu in orchard) and also user friendly such that the non technical user need to have to mess around with the jQuery and CSS of the menu?

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

What is the best way of doing this, should I create a module (a navigation menu component?) which will dynamically set the css/jQuery values (width etc.)

更新
另外，现在我有我的HTML（我的导航菜单，列表Unorderd等）和嵌入其jQuery脚本参考我的 Layout.cshtml 和风格的导航菜单在我的的site.css 在我的主题，这被认为是不好的做法？

UPDATE Also, right now I have my HTML (my navigation menu, Unorderd List etc.) and its jQuery script reference embedded in my Layout.cshtml, and the style for the navigation menu is in my Site.css in my theme, is this considered bad practice?

推荐答案

我最终得到了这个果园1.5通过重写 Menu.cshtml 视图，编码一些逻辑来完成检查的菜单项的数量，然后呈现导航菜单具有不同的ID的基础上，他们包含的菜单项的数量。然后我在的site.css ，各有适合各种尺寸的导航菜单CSS添加不同的CSS选择器。这里是我的 Menu.cshtml 结束看起来像（这正好在你当前活动的主题视图文件夹）。

I eventually got this done in orchard 1.5 by overriding the Menu.cshtml view, coding some logic to check the number of menu items and then rendering navigation menus with different ID's, based on the number of menu items they contained. I then added different CSS selectors in my Site.css, each with CSS suitable for navigation menus of various sizes. Here is what my Menu.cshtml ended up looking like (this goes in the Views folder of your currently active theme).

@
{

    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 ， FourItemNav 和 FiveItemNav ），例如在当前主题的site.css ：

Note that you need to add CSS selectors in your theme for each nav element (ThreeItemNav, FourItemNav and FiveItemNav), for example in your current themes 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

这肯定似乎是一个长篇大论办法，但它是我能想到了，这样我可以保持果园导航菜单的功能，并仍与CSS样式，并添加jQuery的动画最好的。我想最初的开发成本是值得的增加，从长远来看一些强大的功能导航菜单。我很想听听你对如何做到这一点的更合适的方法的任何建议。此外，我肯定会推荐使用果园1.5，因为它已经内置支持创建分层导航菜单。

This certainly seems like a long winded approach, but it's the best I could think off so that I can maintain the functionality of the Orchard navigation menu and still style it with CSS and add jQuery animations. I figured an initial development cost was worth adding some powerful capabilities to the navigation menu in the long run. I'd love to hear any suggestions on how to do this in a neater way. Also I would definitely recommend using Orchard 1.5, since it has built in support for creating hierarchical navigation menus.

签出的内部运作 Menu.cshtml 和 MenuItem.cshtml 的意见有很大的帮助来理解导航菜单是如何在果园渲染，以及如何检查默认的主题风格机器的导航菜单及其各级/子菜单。

Checking out the inner workings of Menu.cshtml and MenuItem.cshtml views help a lot in trying to understand how the navigation menus are rendered in Orchard as well as inspecting how the default Theme Machine styles the navigation menu and its various levels/sub menus.

这篇关于自定义果园导航菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！