Mega menu with CTA (call to action) buttons

Dennis Hulsmans asked on May 25, 2016 16:36

Hi

I've implemented a mega dropdown menu. Now the customer wants an "easy to configure" call-to-action button (or multiple buttons) on the right side of the menu (blue part with 2 buttons):

megadropdown with cta

So, is there a good approach to accomplish this (good = easy to change for the customer)

KR, D.

Recent Answers


Joshua Adams answered on May 25, 2016 17:11

You could make the call to actions a simple page type, and include that in your transformations. Then the customer just creates a new one the same way they create a page. Maybe have the page type include a name/text and a link.

4 votesVote for this answer Mark as a Correct answer

Dennis Hulsmans answered on May 25, 2016 17:39

Hi Joshua

This could be a possible solution. Do I have to use the ASCX transformations instead of the XML ? I'm using a hierarchical view webpart to render the menu.

1 votesVote for this answer Mark as a Correct answer

Joshua Adams answered on May 25, 2016 19:04

You should be able to use either.

1 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on May 26, 2016 03:42 (last edited on May 26, 2016 03:44)

I like the page type idea. Here's what I recently did which is a little different

Image Text

It was assumed those buttons or in your case the blue background area was part of any of the top level 1 pages. The top level pages are the ones you hover over or click on to get your mega menu to show up. So on the Page (menu item) page type I added 2 fields:

  • Menu heading
  • Menu image

On both of those fields, I set visibility so they could only be accessed at the top level when adding new pages. You can use this macro in the visibility field: EditedObject.NodeLevel == 1. In your case you might be able to add 3 or 4 button URL fields and 3 or 4 button text URL fields. I'd make sure you limit it to whatever your design can handle.

The menu is displayed in a Universal Viewer so I then adjusted my transformations to properly display the items as needed. Here's a sample of my transformation:

  <li class="dropdown">
      <a href="<%# GetDocumentUrl() %>" class="dropdown-toggle">
        <%# Eval("DocumentName") %>
      </a>
      <div class="dropdown-menu">
      <h4 class="droptitle"><%# Eval("MenuSummaryText") %></h4>
      <hr>
        <cms:SubLevelPlaceHolder runat="server" ID="plcSub" />
      <%# IfImage("MenuItemTeaserImage", "<div class=\"col-md-3\">" + GetImage("MenuItemTeaserImage", 0, 0, 0, Eval("DocumentName")) + "</div>", "") %>
      <%# If(Eval<bool>("NodeHasChildren"), "</div>", "") %>
</li>

This is simply an example as yours might be a bit different but it's another possible solution.

2 votesVote for this answer Mark as a Correct answer

Dennis Hulsmans answered on May 26, 2016 07:50

Hi Brenden

Thanks for your great response. I'm going to try your approach.

The page type idea is great too (I'll try that approach in my own time ;) )

I'll keep you posted !

1 votesVote for this answer Mark as a Correct answer

Dennis Hulsmans answered on May 26, 2016 17:23

Brenden

I'm using a pages data source webpart which gets several page types. So I had to add CTA fields to the existing page menu item (CONTENT_MenuItem). Now when I add those fields to the columns filter, I get the error these fields do not exist (although they do exist).

So I'm struggling with the naming convention of the fields

1 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on May 27, 2016 06:07

So Dennis any reason you're using a pages datasoure webpart vs. a control that already has that built-in like a repeater or a Universal or Hierarchical Viewer? Those webparts already have the pages datasource built in and you can include multiple page types with it. In my example I was pretty fortunate to only have a need for the CMS.MenuItem page type.

1 votesVote for this answer Mark as a Correct answer

Dennis Hulsmans answered on May 27, 2016 08:46 (last edited on May 27, 2016 14:53)

Wow, you are absolutely right. Stupid me :)
But the issue still remains.. unless I remove the columns and select everything

1 votesVote for this answer Mark as a Correct answer

Dennis Hulsmans answered on May 27, 2016 14:56 (last edited on May 27, 2016 15:00)

Is there a way to select table specific fields like you do in sql (select m.ctalink1 from content_menuitem m) ?

my other page types don't have these fields

Invalid column name 'CTALink1'.
Invalid column name 'CTALink1Text'.
Invalid column name 'CTALink2'.
Invalid column name 'CTALink2Text'.
Invalid column name 'CTALink1'.
Invalid column name 'CTALink1Text'.
Invalid column name 'CTALink2'.
Invalid column name 'CTALink2Text'.

I also get the message from sql query debug to only select the used fields, that's why I bumped into this problem:

Web part 'hvMain' used only 2 of 173 columns from the data source. Some of these columns might have been required automatically by the component. Restrict the columns in the web part properties to the following list if possible:
CTALink1, CTALink2
1 votesVote for this answer Mark as a Correct answer

Dennis Hulsmans answered on June 30, 2016 09:16

Hi I also posted this question to "Ask the experts 2", but I'm not completely satisfied with the answer. https://youtu.be/8YAWafwYGDA?t=510

Kentico performance tips tell you to use the column selector (otherwise you'll have 173+ columns), but the query that kentico creates does a join on a field that doesn't exist in my other page type.

Any thoughts?

Kind regards, D.

1 votesVote for this answer Mark as a Correct answer

Jay Sheth answered on November 21, 2016 06:07 (last edited on November 21, 2016 06:10)

0 votesVote for this answer Mark as a Correct answer

Arshad Kunnath answered on November 21, 2016 06:19

Hi Dennnis,

I would like to know how you implemented this mega dropdown menu in kentico. Looks interesting. Please assist me how to accomplish the same.

Regards, Arshad

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.