styling navigation differently on the same page

Topics: Writing themes
Sep 30, 2011 at 11:05 AM

So here is my question.

I'd like to style my Navigation menu that comes with orchard out-of-the-box differently differently depending if it is in header or footer on homepage.

I'm sure I'm not the first one with this idea. How do i go about this?

Let me just give you some code if i wasn't clear enough before. This is my layout.cshtml in pseudocode.

<header>
   @Display(Model.Navigation)
</header>
<article>
   //actual content
</article>
<footer>
   @Display(Model.Navigation) // <--- this one should be stlyed differently as I've already overridden menu.cshtml
</footer>

I hopefully got my point across.

 

Regards,

T.

Coordinator
Sep 30, 2011 at 7:26 PM

The simplest solution is probably to create a completely new shape:

@Display.FooterNavigation(Navigation: Model.Navigation)

You can then create a FooterNavigation.cshtml template that gets its data from Model.Navigation.

Nov 22, 2011 at 11:13 PM

I did go with creating a shape on the fly and passing Model.Navigation in, however, my goal is to style the child menu items differently.

For example, in my AsideLeftMenu shape I would have something like:

 

@{
    var tag = Tag(Model, "ul");
}

<nav class="nav-aside-left">
    @tag.StartElement
        @DisplayChildren(Model.Navigation)
    @tag.EndElement
</nav>

 

But @DisplayChildren will loop through each item and Display it using it's logical template (e.g. - MenuItem.cshtml).

How can I further override the rendering of the child items with a shape like AsideLeftMenuItems.cshtml?

Thanks,

Matthew

Coordinator
Nov 24, 2011 at 1:50 AM

If it's just styling, why not CSS?

Nov 28, 2011 at 12:19 PM

Well, styling may have been a poor choice of words. I would want to perhaps add some classes based on some condition (e.g. - is this the first item in the submenu?) or remove uneccessary items from the model prior to rendering. I've accomplished the same in the past using purely css and javascript but doing too much clientside often this results in a flash of unstyled content or otherwise poor performance.

I guess I wish I had some way of doing @DisplayChildren.AsideLeftMenuItems(MenuItem: Model.Navigation), passing each item in Model.Navigation to a specific view, or some other way of overriding how these child items render.

 

Nov 28, 2011 at 9:03 PM

@betrandleroy: your article here - http://weblogs.asp.net/bleroy/archive/2011/05/23/orchard-list-customization-first-item-template.aspx , is completely relevent; thanks for directing me to it. I had read through it before but didn't apply it right away.

Luke Hertert, the Better Menus author, created an issue to investigate why the module doesn't work with the Widget Alernates feature in Orchard v1.3. I believe this will eventually address my scenario. I'll follow that channel from here on, but, in general, I'm still interested in discovering how DisplayChildren might render shapes to a specific template.

Coordinator
Nov 28, 2011 at 9:54 PM

To send shapes into zones: http://weblogs.asp.net/bleroy/archive/2011/03/26/dispatching-orchard-shapes-to-arbitrary-zones.aspx

Oct 22, 2013 at 10:32 AM
Edited Oct 22, 2013 at 10:33 AM
Hi I tried the simplest solution offered in post #2.
Running orchard cms 1.6.

This is my code:

layout.cshtml
<header>
   @Display(Model.Navigation)
</header>
<article>
   //actual content
</article>
<footer>
   @Display.FooterNavigation(Navigation: Model.Navigation) 
</footer>
Menu.cshtml
@{
    var items = (IList<dynamic>)Enumerable.Cast<dynamic>(Model.Items);   
}

@items.Count
 @foreach (var menuItem in Model)
{
    @Display(menuItem)           
}
FooterNavigation.cshtml
@{
    var items = (IList<dynamic>)Enumerable.Cast<dynamic>(Model.Items);   
}

@items.Count
 @foreach (var menuItem in Model)
{
    @Display(menuItem)           
}
As you can see both Menu.cshtml and FooterNavigation.cshtml contains similar code. This is for testing purpose only.
But orchard will render them differently. @Display(Model.Navigation) vill render a correct menu with 4 items,
wheras @Display.FooterNavigation(Navigation: Model.Navigation) only render the @items.Count as 0 .

Why?
Coordinator
Oct 26, 2013 at 8:28 AM
In FooterNavigation, the way you wired things up, the actual navigation shape, instead of being Model like in Menu.cshtml, is Model.Navigation, which you never access. It should be Model.Navigation.Items, not Model.Items.