Customizing the Orchard navigation menu

Question

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?

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.)

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?

If you're already using jquery/css to set the widths, why not use jquery to count the number of menu items and calculate accordingly within the javascript? — Brandon Joyce
Thanks, but how would the user then be able to add newly created content to the navigation menu? Also I added another small query to my question, I'd be glad if you could give your opinion, thanks. — Mohammad Sepahvand
Are you using the built-in navigation admin and menu widget? In that case, you shouldn't need to put the html into your layout. You would just add the widget to a zone in the admin. You could use jquery and css to style the menu as needed. I don't think you need to make a change to how users would add menu items. Just use your javascript to inspect the html, and apply widths or other style changes dynamically. — Brandon Joyce
I'm not using the built-in navigation and menu widget, but I wanted to know how I would go about creating a more interactive one (with jQuery) that still had the capabilities of the built-in menu widget, should have worded my question better. Thanks for the help. — Mohammad Sepahvand
Ya, I think I would just use the built-in one and use your javascript/css to enhance it as needed. Good luck! — Brandon Joyce

Mohammad Sepahvand Mohammad Sepahvand · Accepted Answer · 2012-08-29T16:28:35

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>
}

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

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.

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.

Customizing the Orchard navigation menu

1 Answers