Latest COS Design Blogs

Designers Blog

Implementing A Javascript Menu On Your COS Pages

Written By Jonathan Pavoni on Jan 29, 2015 10:00:00 AM

When creating websites, it is sometimes fun to do something completely different and totally unique. The only caveat is that you must have a client that is intrinsically creative themselves and open to something totally new. Luckily, I recently found myself in that very situation with a new customer called The Story Question.

The Story Question Screenshot

Customer Use Case:

The Story Question is a Philadelphia based content marketing and public relations agency. The owner of The Story Question is a super fun and creative woman that allowed me take some design liberties with her latest website redesign project. For this project, they wanted a site that communicated their fun and unique company culture and personality.

When viewing the homepage, visitors will immediately notice some of the oddities of the page. Viewers are greeted with only the logo, a picture of the ocean, and the words “There are no boring stories, only boring story tellers” fade in from the background. There are no navigational links or opportunities to connect on social media being presented to the user (at least initially).

Once visitors have viewed the image, logo, and tagline, they will scroll down the page to see what else the website offers. Only when the user scrolls, are they presented with a menu to navigate to other pages on the website. This hidden menu allows for more real estate for page content. This blog post focuses on implementing a hidden menu, so let’s get started!

 pavoni_javascript_2

How To Implement The Javascript Menu on Your HubSpot COS Pages

The Modules

To build your global header module you want to follow the same workflow process that you’re used too. In my use case I have an advanced menu on the right and social media icons on the left. 

Modules.png

Once you have the modules setup in your global header module you want to inspect the element on your site page or landing page (If you're using Google Chrome, use Firebug if you’re in Firefox), to find what the class name is. In my customer use case the HTML class name is:

div.span12.widget-span.widget-type-global_group.

Once you have the class name, you will want to hide that in your CSS stylesheet.

 

The CSS

Now that you have your HTML class name for your global module you want to hide that from view. To do that use the display none code as seen below:


div.span12.widget-span.widget-type-global_group{
    display:none;
}

 

The Javascript

Once the full menu is hidden from view you want to bring it back only when the user decides to scroll down the page. To do that we are going to use some Javascript, see below for the code snippet: 

Content_Settings.png

<script>
$(document).ready(function(){
$(document).scroll(function(){
$('div.span12.widget-span.widget-type-global_group').show("slow");
});
});
</script>

Through this script, we are instructing the page to show the global module only when the user scrolls down the page. So in your instance you will just replace the following html class with your own header class.

div.span12.widget-span.widget-type-global_group 

Once you have done that, put this script tag in the Site Header HTML section under content settings, and this will apply your script to every page on the website. You’re done!

 

Conclusion

This hidden menu is definitely not for every client under the sun, however it can be a fun tactic to use with select clients and unique situations. Please let me know if you have any questions as you implement this tactic, as I would be happy to help. Happy HubSpotting!

 

Subscribe to Hubspot's Designer Blog  

 

Topics: Tutorial

Jonathan Pavoni

Jonathan Pavoni is the CEO of Creatrix Marketing. He is a passionate entrepreneur, marketer, and writer. He loves to help companies utilize technology to achieve growth.