menu / submenu

Topics: Customizing Orchard
Jan 24, 2013 at 9:11 AM

hey everyone,

I was wondering what is the proper way to work with menu and submenu.

I have a standard main menu and created another one to be used as submenu.

What I want to do is add the submenu as a link in the main menu, when you click on it you should see the tabs of the submenu (sort of like tabs in tabs) and the first item (page) of the submenu should be shown.

How can i accomplish this?

Coordinator
Jan 24, 2013 at 5:10 PM

You only need one menu, then you can change the Widget to display only one level, and create another one which starts at level 2 and also displays one level.

You can customize the css of the second menu to look like tabs.

Jan 25, 2013 at 11:53 AM

Sebastien,

Do you know how I can give an id to an li item? This would be easy for attaching jquery code to it. Now the li's are generated but have no id.

Kind regards,

Borrie

Jan 29, 2013 at 10:28 AM

Does anyone know how to do this?

Borrie

Coordinator
Jan 31, 2013 at 5:11 AM
It's better not to target by id, but rather by class. Look in your browser's dev tools if there is some specific chain of classes that you can use to uniquely identify and target that particular menu.
Coordinator
Jan 31, 2013 at 5:12 AM
(otherwise you can try to use the Classy feature of Vandelay Industries)
Feb 8, 2013 at 12:34 PM
Bertrand,

I've installed the Classy feature, added the part to my content menu item, fild in the id and class but nothing happens (i'm using 1.6)

I've also found this: http://vandelay.codeplex.com/workitem/22

I really need to be able to add custom classes to my li's for accessing them with javascript.

What can I do?

Borrie
Feb 9, 2013 at 3:42 PM
It's sad it doesn't work but I've solved it using jquery (in my layout view)
@using (Script.Foot())
        {
<script type="text/javascript">
    $('#layout-navigation li').eq(1).addClass('Nameofyourclass');
    var pathname = window.location.pathname;
     if (pathname == "/link1" || pathname == "/link2") {
         $(".Nameofyourclass").css("background-color", "white");
    }
</script>}
I have a submenu and when cliked on one of the submenu links the top level link loses its selected color.

Solved!