Discussion on CSS3 Responsive Mega Drop Down Menu


thebestdesigns supports this item


49 comments found.

This menu looks and functions great. Do you know if this plays well with scrolling page JS and/or scrollto scripts? I have another mega menu that will not scroll.

Example: // Scrolls to the selected menu item on the page $(function () { $(‘’).bind(‘click’, function (event) { var $anchor = $(this); $(‘html, body’).stop().animate({ scrollTop: $($anchor.attr(‘href’)).offset().top }, 1500, ‘easeInOutExpo’); event.preventDefault(); }) ; });


This is a great menu.

How could one change the hover color for each menu item? Just as you did for the social media icons. In other words how could one assign a separate hover color to each menu item?

What about changing the display color of each item and just leaving the hover color alone? Is this doable?

Much thanks.

check your mail

Hey readers, this menu can also be used as a footer menu. I will use it on almost every page of a large site I’m working on. At the bottom of each page. It not only provides quick and complete navigation but also contains social sharing, search, and contact! Not to mention branding, via a small logo, if you so desire.

Obviously it’s very clever and cool. The support is also fantastic. It is as good as you will ever find. You will not be disappointed!

Hi. Menu has lost the responsive functionality (pretty sure I retained all the right code). My menu is within a table though, hopefully that’s not the problem. The source code will reveal any errors. Thanks!

See link:

Hi, I like the mega menu version of yours…. Is it compatible with oscommerce 2.3.4 overlayed bootstrap. Can you incorporate this with two custom-category.php files with max4 sub levels file?? I want one file compatible with desktop, tab and one file with mobile layout. Also can you give a similar effect without js, I would prefer pure css versions….

First, i am not sure about this oscommerce compatible. Second, this menu not works without js. so pure CSS is not possible.

I noticed while testing the responsiveness of this menu on a PC, that when you click the words on the mobile menu, they do not extend the menu, and that you have to click in the “open area” of the button. If it’s like this on purpose, can you tell me if I assign a “pointer-events” of none to the words in this mobile portion of the css, if the entire button will then be clickable?

I don’t want users thinking the menu is broken, because they clicked on the words, instead of the open area of the button.

HI, Can I put the logo in the middle of the menu ?

Middle of the menu logo not supported yet. but I will do it for you. Send me the link where you have to implement the menu?

I would like to know if this menu will work within the foundation framework?

I think works. because this is HTML menu. If any problem arises. Message me I will help you to setup the menu.

One more question: How can I set the menu to hover when in the small(Iphone) viewpoint? Currently, you have to click on it. P.S.Yes, it seems to work just fine within the Foundation Framework, “Yeppe”

First, I want to see the URL where you have installed the menu. I did not understand anything like this

Does this use jquery or not? it says pure CSS but then you have a change log saying added jquery. I don’t want a jquery menu want pure css.

yes jquery used

Is this menu capable of tab through accessibility?

No, it’s not.