menu / submenu

Topics: Customizing Orchard
Wiki Link: [discussion:430699]
borrierulez
Jan 24 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?
sebastienros
Coordinator
Jan 24 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.
borrierulez
Jan 25 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
borrierulez
Jan 29 at 10:28 AM

Does anyone know how to do this?

Borrie
bertrandleroy
Coordinator
Jan 31 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.
bertrandleroy
Coordinator
Jan 31 at 5:12 AM
(otherwise you can try to use the Classy feature of Vandelay Industries)
borrierulez
Feb 8 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
borrierulez
Feb 9 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!
Sign in to post message or set email notifications