CTA Farm - Adds CTAs to your navigation menu

Highlighted
Top Advisor

I have used this technique on the headers of two separate projects, so I thought I would share it. 

 

The idea is that you have created a custom module for your sites header, and you are using menu field(s) to call in menus from your portals navigation settings.

 

The problem is that it doesn't seam to be possible to customize the markup output by the menu field token. Hubspot has some specific classes it applies to menu markup to make it work out of the box with their framework css, but it creates issues when you want a mega menu, want to use a different framework, or if you want to use ctas as part of the menu. 

 

There are two use cases I have ran into:

1. the design calls for ctas in the menu drop down.

2. The design calls for ctas inline with the navigation.

 

No. 2 is possible through structuring, but having the ctas in the menu makes them behave as part of the menu. No. 1 isn't possible unless you do this. 

 

The Idea, create a cta repeater field. Sample markup:

<div class="cta_farm" style="display: none">
    {% for item in cta.repeater.field %} 
         <span class="transporter">
            {% cta guid="{{ item }}" %}
         </span>
    {% endfor %}
</div>

.cta_farm is set to "display: none;" and can be placed anywhere within your module, I place my within the document flow towards the bottom. I use the .transporter class to move the ctas.

 

Give your menu a custom wrapper:

<div class="nav_wrap">
     {% menu id="{{ module.site_navigation_menu }}" %}
</div> 


After that it is actually some pretty simple javascript&colon;

$(function(){
	/* Each item out of the cta repeater is wrapped in a <span> with a 
	 * "transporter" class. 
	 * Each .transporter is transported into it's own <li> inside the navigation.
	 * The cta farm container is destroyed.*/
var farm = $('.cta_farm'),
transporter = $('.transporter'), count = transporter.length, mainNavUl = $('.nav_wrap div > ul');
transporter.each(function(x, y){ mainNavUl.append($('<li></li>').addClass('hs-menu-item hs-menu-depth-1').append($(this))); }); if (!--count) { cta_farm.remove()
} });

In this example, for each .transporter in .cta_farm, I append a new <li> to the first <ul> in in the default markup for the menu, giving the <li> the same class from Hubspot's framework as the original menu links. I then append each .transporter to the <li> that was created for it. 

 

That is pretty much it. I have expanded this to allow the editor to choose the tier and tier link whose submenu the cta will appear. I did this using number fields and data-attributes.

 

You could use this method to add rich text content, images, forms, etc. in and/or around your menu items and dropdowns.  You can also use this to break up those preheader menus whose links always seam to separate to the bottom and top of mobile menus. 

 

There is another option, and that is to build the menus out in the module. This give you full markup control, but it negates the usefulness of the navigation settings and it is a mess. The above approach is my way of creating a simple editor experience while extending functionality.

 

 

1 Reply
Community Manager

Thanks for sharing @Jsum!


Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes