Building drop-down header menus tutorial


#1

I have a lot of landing pages that I want to be really, really integrated with my website, to the point that visitors don’t think they’ve headed off my site when they visit them. Particularly, I want the site header to look and behave the exact same way whether these pages are on kinvey.com or Unbounce.

If you look at www.kinvey.com you’ll notice I have a few drop downs for secondary navigation in my header. Today I discovered it’s pretty easy to replicate that that with CSS in Unbounce (compare one of my newer pages, e.g. http://go.kinvey.com/cognitive-computing-insurance-webinar-recording/). I didn’t see anything in the knowledge base about it, so I figured I’d post it here.

DISCLAIMER: I know enough CSS to get me in trouble but I am not a developer. I’m sure I’ve failed to adhere to all development best practices here. I’m open to suggestions/criticism.

All I had to do was to create a div for each of my menu items and then hide the 

element that contained my submenu. For example:

CUSTOMERS Pharma & Healthcare Construction & Manufacturing Energy & Utilities Finance & Insurance Media & Entertainment Retail Other

CSS then makes it really easy to display that
element on hover. Here’s what I used (I also added some animated transitions):

/* this section displays the dropdown menu and defines the dropdown styles */

 @-webkit-keyframes fadeIn {



from { opacity: 0; }



  to { opacity: 1; } }

 @keyframes fadeIn {



from { opacity: 0; }



  to { opacity: 1; } }

 .dropdown {



position: relative;



display: inline-block; }

 .dropdown:hover .dropdown-content {



display: block !important;



-webkit-animation-delay: 0.5s;



animation-delay: 0.5s



-webkit-animation: fadeIn 0.5s;



animation: fadeIn 0.5s; }

I put this, along with the rest of the CSS I use to style my menu (to be honest, that was the hard part), in the script manager so I don’t have to worry about adding it to each page.

Anyways, pretty simple stuff but maybe this will help point someone in the right direction. Happy lead hunting!


Issues embedding HTML (Unbounce and WebinarJam)
#2

This is helpful as I have been trying to do the very same thing. I posted my project on Freelancer dot com and had two takers but they never got around to tackling the project.  I really agree that the customer needs to have a similar look and feel regardless if they are on an  LP or the company site.  My problem is that my home page is pretty fancy and uses a portrait type styling theme which is hard to duplicate in Unbounce.  I think I may just redesign my home page template for a fresh new look later this year and that will make uniformity that much easier.  Thanks for your hints. 


#3

Thank you for this!! I used it for one of our internal pages here at unbounce!! :) 

http://unbounce.com/domain-setup/


#4

Hi Rob, 

I am Alejandra one of the designers at Unbounce! Thanks for this! I used if for one of the LP pages that I made at Unbounce! :) 

http://unbounce.com/domain-setup/

Ale


#5

Love the design of this page, Alejandra! :) 


#6

Thanks Justin!!


#7

Hi Rob & guys,

Does anyone know how to include the drop down menu when it switches to mobile mode?

From your examples, in mobile all your navs are hidden.

Btw, Rob your site formatting on mobile has overlapping text. Need to rearrange.

Thanks!


#8

Hey. Can you explain how you used the script manager to put this on every page? I’m about to begin an initiative to adda stick-nav bar to our pages and can’t seem to figure it out. We have dozens of pages, so I’m trying to avoid having to make a navbar and drop downs on each individual page.


#9

I am still not able to put this in. What exactly do we need to do? I don’t know much HTML or CSS.


#10

Could somebody explain how I would go about ‘creating a div’ for each of the items, as Rob states in this original post? Is this done via custom HTML, or source code in a text box, or another way? Thanks in advance.


#11

do you have have a tutorial about this on the unbounce forum? I tried following Rob O Connor’s instructions but I’m too newbie for this!


#12

Hi @iriske,

You can find a lot of useful scripts and tips over here.

You might want to take a look at this one in particular.

Best,
Hristian


#13

Thank you very much Hristian. I found this page yesterday but the article about creating the hamburger menu on mobile isn’t exactly what I wanted; I’m looking to specifically create a drop down menu on my desktop page (I already have the sticky navigation bar/menu). There was one source that suggested that you could use the instructions to create a roll over image and/or tooltip but that also didn’t seem to do it.
Do you by any chance have a clear tutorial on how to create the drop-down box? I wanted to create the exact same effect as Rob O Connor’s and Alejandra’s examples (hover over the menu items and have the submenu appear)


#14

I’m also looking for more details of how to have a dropdown menu in the header. Unfortunately the above does not give enough information to do so…(no steps aor even where to put the code)… can anyone help on this?