How to customize a menu (newbie)

Topics: Customizing Orchard, General
Mar 12, 2014 at 1:40 PM
Hi all,

I'm just starting with Orchard, and need a bit of a boost to get started. I've watched the videos, read the docs site, and have a good feel for the concepts. I'm a software architect by profession and well versed in MVC, so Orchard makes sense conceptually.

I'd like to create a metro style menu, with content based on user-selected content items. The example of what I'd like to recreate is at http://www.checkohiofirst.com. But I'm not sure how to begin this.

Is it a theming thing? Is it its own widget? Both? Neither? With the extra text in the hover slide-ins, there's more data than a standard menu, so does that point me to any implementation choices?

Obviously, although Orchard makes sense conceptually, I haven't gotten my head around all the bits and concepts yet. Any help, be it explanation or pointers to good 'net writeups that I've missed, would be great. I'm feeling a bit foolish not being able to figure out how to implement something as innocuous as a menu in Orchard, but maybe I'll feel better having admitted it. :-)

Thanks.

-- Michael
Mar 12, 2014 at 1:54 PM
Hi,

what do you mean by "with content based on user-selected content items"? Is it the authenticated user, or the admin selecting the items for all users?


Mar 12, 2014 at 3:07 PM
Edited Mar 12, 2014 at 3:09 PM
Sorry for the confusion. The admin would be selecting the items, much like any other menu.

When I think of “user”, my brain defines that as “not programmer” although, In Orchard, one of my more pleasant surprises was that admins can do things normally requiring custom programming in other CMS products.
Mar 12, 2014 at 4:33 PM
Ok, no problem, just to be clear.

As you might have noticed OOTB Orchard menus are managed in Navigation menu of admin dashboard, to create menu items and their hierarchies (submenus, ordering), and Widgets to put a Menu Widget to some zone that renders the selected menu. In Navigation page of the dashboard, you can create a menu and add several types of menu items (html menu item, customlink, taxonomy link, content menu item etc.) and all have menu text as common, but no menu image. If you want to use this, you can add a Media Library Picker Field to Content Menu Item content type. When you create the menu in Navigation, you can select content items and and image, and enter text that would fade in to the text. Then you can change the Menu rendering using alternates (what you refer to as theming includes this I think). You may need to create alternates for Menu, MenuItem, MenuItemLink an maybe the menu widget shapes (menu alternates are tricky in Orchard) to create the table and div tags of the menu you pointed as an example, and some javascript to make the menu text fade in when hovered.

Alternatively, you can create a content part, and add it to the content types of the content items you want to display in this menu. In that content part, you can add a Media Library Picker Field to keep the menu image, a text field to keep the fade in text, a boolean field to determine if the content item will be shown in the menu, and a numeric field to keep the ordering of the items. Then you can create projection query which is filtering and ordering on these fields. Then you can create a layout to generate the html you want. You can show the query result with a projection widget in the zone you want then, as you would do with the menu widget in the first alternative with Navigation.

Both have advantages and disadvantages. With navigation menus, you would go through menu alternating, tricky. With projection, you will keep the menu image with the content item, which can be seen as an advantage or disadvantage. You can not disable a menu item, you need to delete it if you don't want to see it anymore. I don't know what happens if you delete a content pointed by a content menu item. With projection, you will need to hide the fields of the new content part when not displayed in the menu using placement.info, wihch can also be tricky at the beginning. With projection, you will also spend some time to find out how to implement the layout, choose btw content layout or properties, a table layout or a shape layout etc.

I'm sure there are other ways, but these two are the ones that come to my mind and don't require any other coding than the alternate templates in your theme, and some placement.info changes.

Good luck.


Marked as answer by sawczyn on 3/12/2014 at 9:42 AM
Mar 12, 2014 at 5:42 PM
Thanks a million. While I won't say that what you've posted is crystal clear (don't forget -- newbie!) it's concise, direct, and gives me a handhold to move forward with.

You've been a great help.