Design and CSS styles
Version 7.x > Design and CSS styles > Mega menu using the hierarchical viewer View modes: 
User avatar
Member
Member
mnorton - 4/24/2013 10:18:22 AM
   
Mega menu using the hierarchical viewer
How do I configure a mega menu using the hierarchical viewer similar to the Kentico example?

http://devnet.kentico.com/Knowledge-Base/Design-and-css/Creating-a-Mega-Menu-(step-by-step).aspx

User avatar
Member
Member
mnorton - 4/24/2013 10:57:21 AM
   
RE:Mega menu using the hierarchical viewer
More specifically... I understand how to achieve this with nested repeaters, but I'd like to utilize the hierarchical viewer as a cleaner solution.

User avatar
Kentico Support
Kentico Support
kentico_janh - 4/25/2013 1:08:24 AM
   
RE:Mega menu using the hierarchical viewer
Hello,

Sure, here is the article you are looking for:

How to build up a menu using the hierarchical transformation

Best regards,
Jan Hermann

User avatar
Member
Member
mnorton - 4/25/2013 12:17:38 PM
   
RE:Mega menu using the hierarchical viewer
Ok, I almost have it working correctly...

Here is a screenshot of my menu: http://i36.tinypic.com/n3xgcm.jpg

Using kentico's sample data, the left column of my menu should list all level 1 categories (Electronics, Computers, Clothing, etc.). However, it only successfully displays the first category. Under the Electronics link in the first column, the web part correctly produces links where the other categories should show up, but they are empty links. When I build the menu using nesting repeaters, the other category links display fine.

Here is my hierarchical viewer setup:
(I use the header/separator/footer to leave open the div class="rollover-conten" so I can later place multiple level 1 Item transformations within the div.

Header transformation - level 1
<div class="<%# IfEmpty(Eval("DocumentMenuClass"), "col_1", Eval("DocumentMenuClass"))%>">
<a href="<%# GetDocumentUrl() %>"><%# Eval("DocumentName")%></a>
<div class="rollover-content">
<!-- divs left open -->

Item transformation - level 1
<h2><%# Eval("DocumentName") %> </h2>

Separator transformation - level 1
  </div>
</div>
<div class="<%# IfEmpty(Eval("DocumentMenuClass"), "col_1", Eval("DocumentMenuClass"))%>">
<a href="<%# GetDocumentUrl() %>"><%# Eval("DocumentName")%></a>
<div class="rollover-content">
<!-- divs left open -->

Footer transformation - level 1
  </div>
</div>

Header transformation - level 2
EMPTY

Item transformation - level 2
<p><%# Eval("DocumentName") %></p>

Separator transformation - level 2
EMPTY

Footer transformation - level 2
EMPTY

User avatar
Kentico Support
Kentico Support
kentico_janh - 4/28/2013 3:10:02 PM
   
RE:Mega menu using the hierarchical viewer
Hello,

Please remember just one simple rule and place all document related fields only to Item transformations like:

Header, Footer, Separator transformations: <ul>, <li>, <div> etc. (general HTML elements)
Item transformations: same as in previous point and document fields like GetDocumentUrl, DocumentName, DocumentMenuClass, etc.

If you follow this simple rule, your menu should render properly.

Best regards,
Jan Hermann

User avatar
Member
Member
mnorton - 4/29/2013 1:27:54 PM
   
RE:Mega menu using the hierarchical viewer
Putting all document fields in the Item transformation fixed my issue. Thank you.

I have a few other questions regarding the hierarchical viewer.

1. I need two item transformations on the same level using the same document type. In my menu rollover area, I'm trying to display teaser images of featured categories (first item transformation) and then a list of all categories (second item transformation). For example, two different transformations with the configuration: Item transformation - Level 2 - MenuItem. However, one overrides the other since they both share the same hierarchical configuration. Do I need to use a nested repeater for this?

2. I can't seem to access MenuItemTeaserImage in the item transformation. It worked fine in the nested repeaters. Is MenuItemTeaserImage accessible in the hierarchical viewer?

<%# IfEmpty(Eval("MenuItemTeaserImage"), "", "<img src='" +GetFileUrl("MenuItemTeaserImage") + "?maxsidesize=100'/>") %>


3. I need to flag certain sections as Featured. Can sections be assigned to a Group or Status similar to the way products can be assigned to a Status? If so, how can it be specified in the hierarchical viewer similar to the WhereCondition in the nested repeater?

User avatar
Kentico Support
Kentico Support
kentico_janh - 5/5/2013 5:47:08 AM
   
RE:Mega menu using the hierarchical viewer
Hello,

1) If you are using ASCX transformations, then a nested control or a custom function would be a solution

2) It is working fine on my installation. What exact version of Kentico are you using?

3) Do you mean a similar functionality as you can see for the Page (menu item) document type -> Menu group? If so, then you can get inspired in this field.

Best regards,
Jan Hermann

User avatar
Member
Member
mnorton - 5/7/2013 10:33:25 AM
   
RE:Mega menu using the hierarchical viewer
As you recommended, I reverted back to using nesting controls and everything seems to be working fine.

I believe the Menu Group will work for flagging categories as Featured.



User avatar
Kentico Support
Kentico Support
kentico_janh - 5/8/2013 3:44:39 AM
   
RE:Mega menu using the hierarchical viewer
Hello,

1) I meant to use the nested control in the hierarchical transformation (not rebuild the entire menu to nested controls)

2) You don't have to use the Menu Group property, you can make a new property the same way the Menu Group works and name it according your needs

Best regards,
Jan Hermann

User avatar
Member
Member
mnorton - 5/8/2013 9:24:29 AM
   
RE:Mega menu using the hierarchical viewer
Will a nested control in a hierarchical transformation outperform mulitple nested controls?

User avatar
Kentico Support
Kentico Support
kentico_janh - 5/9/2013 2:31:18 AM
   
RE:Mega menu using the hierarchical viewer
Hello,

I am not sure, I am getting your question. Basically yes, if you register a nested control in your item transformation, then a separate control will render for each item in that transformation, however this is a required behavior, isn't it.

Best regards,
Jan Hermann