Feature request - enhanced menus

Jan 18, 2011 at 10:39 PM

First off, a big thank you to Nicholas Mayne for his excellent blog post on how to implement multi-level menus:

http://www.themayneissue.com/memorystream/making-menus-in-orchard-a-little-better

Are there any plans to enhance the menus in Orchard and perhaps bake this kind of functionality into the project?

Coordinator
Jan 18, 2011 at 10:50 PM

It depends what the community comes up with. It's clearly in very high demand.

Jan 19, 2011 at 9:24 AM

using this reference link: http://www.themayneissue.com/memorystream/making-menus-in-orchard-a-little-better   which cannot applied to cshtml file. Can't work. Please advice...

Developer
Jan 19, 2011 at 11:56 PM

Hi!

I've managed to create a full-featured hierarchical menu. I contributed it to the gallery so feel free to try it - Hierarchical menu:)

It creates hierarchy from Position property - just use dot-notation and that's all. Menu building is trie-based so it's pretty fast even with lots of entries.

Cheers, Piotr

Coordinator
Jan 19, 2011 at 11:58 PM

Hurray! So how did you manage to suppress the default menu?

Developer
Jan 20, 2011 at 12:35 AM

At last:D

I've replaced the MainMenuNavigationProvider existing in the Autofac container with an empty stub (as registrations cannot be removed:/). It involved writing an Autofac.Module implementation to plug into the Autofac instance resolving pipeline. A bit tricky, but also a nice experience with Orchard internals:)

I thought about writing a docs article covering more advanced module programming techniques I learned in the process. What do you think?

Cheers, Piotr

Coordinator
Jan 20, 2011 at 2:36 AM

Sure. Great idea.

Jan 20, 2011 at 9:20 AM

Great!!.. It's pleasure to heard about it. Thanks guy..

Jan 20, 2011 at 12:54 PM

Piotr,

I for one would be most grateful if you do write this up as an article.

Thank you.

Jan 21, 2011 at 1:46 AM

strange.. i tried to set the position property once i enabled the hierarchical main menu features. The system still can't show the multi level menu.. Do I lack of some steps of configuration?

Jan 21, 2011 at 8:08 AM

Hi pszmyd,

   Have you finished to write the document for the steps of having multi level menu? I tried many themes which are prepared in the gallery. Some of the themes can't work totaly, but so far i can see one theme (cantoso) which is working. Anyway i need to modify the site.css file a little bit.. How you do it at your side? Please advice.

Thanks.

Jan 21, 2011 at 4:03 PM
vteck328 wrote:

strange.. i tried to set the position property once i enabled the hierarchical main menu features. The system still can't show the multi level menu.. Do I lack of some steps of configuration?

 Did you do this part?

"Okay once this is done… So can then apply Suckerfish or what ever over the top… i used http://be.twixt.us/jquery/suckerFish.php which is the jquery equivalent."

Developer
Jan 21, 2011 at 7:39 PM

Exactly - you have to apply appropriate styling to the lower level menus. Most of the themes don't take into account that menu can have more than one level, so the nested <ul>'s are shown inappropriately:/ The module adds multi-level functionality, but the look is up to theme designers.

It was my intention not to apply any built-in styling/scripting, because:

  1. It can be done in hundreds of ways (JS/CSS/JQuery/... etc.), so I'd better leave the choice to the designers. 
  2. I wanted to keep the code clean and simple, so the developers wouldn't have to override menu shapes just to get rid of my script includes...

There are lots of simple to really sophisticated examples on the web - all you have to do is find the one you like the most:)

Cheers, Piotr

Jan 25, 2011 at 9:59 AM

hi
i tried all the steps using this reference link: http://www.themayneissue.com/memorystream/making-menus-in-orchard-a-little-better  but its didn't work for me i.e i created Products page i want the "sub Products" under it.
first i created Menu.ascx n drop the code there.secondly i give "Products" page position 1 and "sub Products " position 2.but "sub Products" page didn't appear under "Products" page.

Developer
Jan 25, 2011 at 11:38 AM

You should set the positions like this: "Products" - 1, "Sub Products" - 1.1

The article under the link you provided and the menu I created (which is available via Gallery) both use dot-notation (1, 1.1, 1.1.1, 1.1.2, 1.1.2.1 etc.) for Position property. I encourage you to use the module from the Gallery as it works out-of-the-box with Orchard 1.0 and built-in .cshtml view files. The article applies to Orchard version 0.5 so it's a bit old.

The only thing you have to do is the appropriate styling of the menu (as written in posts above).

Cheers, Piotr

Jan 26, 2011 at 9:39 AM

pszmyd,

thanks for ur reply.

Actually i forget to tell u that i was setting the position like this:"Products" 2,  "Sub Products" 2.1,,,,also tried -2 and -2.1......it didn't work for me either....

i install the Hierarchical menu module from the gallery.i dunt know what to do after as i didn't find any help for this module.i have orchard latest version.

 

cheers

Waqar

Developer
Jan 26, 2011 at 1:28 PM

Hi,

The usage of the module is very simple as it works out-of-the-box and need no setup steps.

First of all you have to install the Hierarchical menu module and enable the feature through the Features admin panel. And, basically, that's all:) The module fetches the data you enter inside Navigation menu panel (menu items) and creates a hierarchical menu based on their Position property. The default shape for displaying menu displays it properly (as nested lists: <ul><li>1st level</li>...<li><ul><li>2nd level</li>...</ul>...</ul>) so you don't need to (and shouldn't!) override your menu rendering shape (like in the solution from Nick Mayne's blog).

The only thing you have to take care of is to apply the appropriate CSS/JQuery to the <ul>'s to make it look like a menu (as written in  one of the posts above). Unfortunately, the default themes style properly only the first menu level...

I'm going to write a short help article that on my soon-to-be-launched blog about Orchard development.

Cheers, Piotr

Jan 27, 2011 at 6:00 AM

Hi,

thank u so much for the reply.

ok i am gonna do the steps that u have explained .

we all r eagerly waiting for your article.i am wondering  how long it gonna take.please do let us know about your article when you are done with it.

thanks.

Cheers.

 

 

Developer
Jan 27, 2011 at 9:19 PM

The menu that is built in for Orchard should take care of this if the dot notation made it so 1.1 whas a child of 1 - But alas it doesnt. You could always use my menu and put it in the Razor syntax...

Developer
Feb 5, 2011 at 2:39 AM

Hi!

I just aired my blog and the post about building a menu is finally ready. Check it out:)

More articles coming soon.

Cheers, Piotr

Feb 7, 2012 at 3:14 AM

pszmyd, thanks for the great module. The hierarchical parts worked out of the box for me. I want a widget to show sibling items on each page. I added the menu widget. When I specify siblings it shows all my menu items.

If my menu looks like this

1

2

2.3

2.5

2.6

When I'm on pages 2.3, 2.5, and 2.6 I want to see links for 2.3,2.5, and 2.6.

Am I being clear? Can you help?

Developer
Feb 7, 2012 at 3:24 AM
Hey,

Which mode have you chosen for the widget?
SiblingsExpanded - it shows the siblings + all other items collapsed to their roots (sth like an accordion).
SiblingsOnly - it only shows the siblings of the current item. This mode should work for you.

Cheers,
Piotr

2012/2/7 smithd98 <notifications@codeplex.com>

From: smithd98

pszmyd, thanks for the great module. The hierarchical parts worked out of the box for me. I want a widget to show sibling items on each page. I added the menu widget. When I specify siblings it shows all my menu items.

If my menu looks like this

1

2

2.3

2.5

2.6

When I'm on pages 2.3, 2.5, and 2.6 I want to see links for 2.3,2.5, and 2.6.

Am I being clear? Can you help?

Read the full discussion online.

To add a post to this discussion, reply to this email (orchard@discussions.codeplex.com)

To start a new discussion for this project, email orchard@discussions.codeplex.com

You are receiving this email because you subscribed to this discussion on CodePlex. You can unsubscribe on CodePlex.com.

Please note: Images and attachments will be removed from emails. Any posts to this discussion will also be available online at CodePlex.com




--
Piotr Szmyd
There's no place like 127.0.0.1...

Feb 7, 2012 at 3:35 AM

Sorry, you are right. It does work out of the box.

Thanks for the great module!