Style Second Orchard Navigation

Topics: Core, Customizing Orchard, Writing themes
Apr 4, 2013 at 8:03 PM
Edited Apr 4, 2013 at 8:04 PM
I have successfully customized the orchard's main navigation menu.

Now I wish to add a new menu to a different zone. The problem is when i add a new navigation menu it has the exact same style.

The CSS gets applied in Layout.cshtml to Model.Navigation but i have no idea how to seperate it so i can have different navigations with each his own css. I have already split up all the menu specific CSS in a seperate file called menu.css that gets included in the Layout.cshtml.
Style.Include("menu.css");

  @if (Model.Navigation != null) 
    {
        <div id="layout-navigation" class="group">
            <div id="navigation">
                @Zone(Model.Navigation)
            </div>
        </div>
    }
For example the current layout must remain the same for the main menu, the second menu on the other hand will require a whole different look.

TLDR: How to apply different CSS when adding a new navigation menu?

Side question: The look of this second navigation will be alike the tab navigation found in the admin panel, is there a elegant way of adapting this style if so where is this to be found?

Thanks.
Developer
Apr 4, 2013 at 9:13 PM
One way to create a different look for the second menu is by using CSS. Each zone gets an ID, and obviously you can wrap your zones inside your own DIV elements and apply CSS classes. Also, all widgets get a class based on the zone it's part of (e.g. "widget-asidefirst"). In your CSS file, create rules targeting the second menu as you see fit.

If you need more control over the rendering of the second menu, you can use alternates. The easiest way is to use the alternates for the "Menu" shape. The one that comes out of the box is the alternate based on the menu name, e.g. "Menu__MyMenuName", enabling you to create a view called "Menu-MyMenuName.cshtml".
Apr 4, 2013 at 9:21 PM
sfmskywalker wrote:
One way to create a different look for the second menu is by using CSS. Each zone gets an ID, and obviously you can wrap your zones inside your own DIV elements and apply CSS classes. Also, all widgets get a class based on the zone it's part of (e.g. "widget-asidefirst"). In your CSS file, create rules targeting the second menu as you see fit.

If you need more control over the rendering of the second menu, you can use alternates. The easiest way is to use the alternates for the "Menu" shape. The one that comes out of the box is the alternate based on the menu name, e.g. "Menu__MyMenuName", enabling you to create a view called "Menu-MyMenuName.cshtml".
I have for example added a second navigation (by using admin dashboard to create a new navigation menu).

Currently i already have custom CSS but i fail to see how to split up the current navigation menu and the second (added to a zone) I've made?
The thing thats confusing me is the Layout.cshtml file where all the css / html for menus is currently located.
Developer
Apr 4, 2013 at 9:26 PM
What do you mean with splitting up the current navigation menu and the second?
Could you elaborate on what exactly is confusing about the Layout.cshtml file?
Apr 5, 2013 at 4:49 PM
Edited Apr 5, 2013 at 4:50 PM
sfmskywalker wrote:
What do you mean with splitting up the current navigation menu and the second?
Could you elaborate on what exactly is confusing about the Layout.cshtml file?
When creating a navigation menu (admin dashboard) it gets rendered under Navigation.
@if (Model.Navigation != null) 
    {
        <div id="layout-navigation" class="group">
            <div id="navigation">
                @Zone(Model.Navigation)
            </div>
        </div>
    }
But where do i apply other CSS for my second navigation?
Even when i add it to a different zone it gets the same CSS because ithe CSS only gets applied in 1 place atm.

Not sure what to do with Model.Navigation.

Regards Complex.
Developer
Apr 5, 2013 at 6:51 PM
Just for clarity, are you working with menu widgets on the front-end, or are you trying to add another menu to the admin dashboard?
Apr 6, 2013 at 11:16 AM
sfmskywalker wrote:
Just for clarity, are you working with menu widgets on the front-end, or are you trying to add another menu to the admin dashboard?
Menu widgets on the front - end. My site will contain 1 navigation menu viewable on the site and several other navigation menu's only displayed on certain pages.
Developer
Apr 6, 2013 at 12:07 PM
Ok. Then I have given you all the answers you need to be able to customize the second menu widget. Let's summarize:
  1. Create CSS rules to specifically target your second menu widget. E.g. if your second menu widget lives in the Footer zone, this zone has a CSS class called "zone-footer", thus allowing you to create a CSS rule like .zone-footer .widget-menu { ... } (use FireBug to find out the actual CSS classes being used, I'm making classes up here).
  2. If you need more control over rendering (including rendering additional class attributes on the HTML elements, different HTL structure, etc.) create views for the available shape alternates.
If I misunderstood your question, just let me know.
Apr 7, 2013 at 2:06 PM
Edited Apr 7, 2013 at 5:09 PM
sfmskywalker wrote:
Ok. Then I have given you all the answers you need to be able to customize the second menu widget. Let's summarize:
  1. Create CSS rules to specifically target your second menu widget. E.g. if your second menu widget lives in the Footer zone, this zone has a CSS class called "zone-footer", thus allowing you to create a CSS rule like .zone-footer .widget-menu { ... } (use FireBug to find out the actual CSS classes being used, I'm making classes up here).
  2. If you need more control over rendering (including rendering additional class attributes on the HTML elements, different HTL structure, etc.) create views for the available shape alternates.
If I misunderstood your question, just let me know.
Cheers for all the given input sfmskywalker!

Worked the CSS out with the following approach to split the CSS up to different nav elements:
[shape-id="13"] ul 
{
    list-style: none;
    z-index: 9999;
    position:relative;
}
I noticed in a earlier post you recommend the module "Advanced Menu" to implement the tab menu (the one found in the admin section) in the front-end.

Yet i cannot find any documentation whatsoever on how to use that module.

So i'm wondering on how to approach this try and attempt to do this with the module (no longer supported?) or with CSS?

Thanks.
Developer
Apr 10, 2013 at 1:32 PM
Edited Apr 10, 2013 at 1:32 PM
That CSS rule is probably not the best way of doing it, because the shape-id attribute is generated by the shape tracer, which should be disabled on production sites.
Instead, use the DOM hierarchy to construct CSS selectors, as done in my earlier example.

Recommending Advanced Menu to implement a menu in the front end is probably an old post pre 1.6. When you are on 1.6, I recommend using the out of the box menu.