Discussion on Friendly CSS3 MegaMenu(Horiz & Vert) w/transitions

Discussion on Friendly CSS3 MegaMenu(Horiz & Vert) w/transitions

4.15 (55 ratings) 4.15 stars
Cart 468 sales

iamfriendly does not currently provide support for this item.

36 comments found.


Happy purchaser here with a question…

How do you keep the seleted LI (top level tab item) highlighted when perusing the sub menu?

Ex. In your video you hover over Categories. When your mouse enters the submenu the Categories LI item doesn’t stay highlighted.

Is there a way to make it stick as hovered until hovering over another LI top level item?


Hi Loony2nz, firstly thanks very much for purchasing my little menu. I really appreciate it. Secondly, what you’re asking is actually a little tricky and it was something that I thought about when developing the menu.

Basically, as the menu is coded, what you’re asking for isn’t possible. The reason for this is that to allow for the transitions and backwards compatibility with IE 7 /8.

You could possibly do it with some javascript so that if you’re hovering over one of the sub menus, it adds a class to the parent which you could then style the same as the :hover state that I use. I’m updating this file over Christmas with new styles and with my new branding, so look out for that!

Yeah…you’re right…

I added this to the header using jquery

$(function(){ $(’.mega_sub_cats’).hover(function() { var tabParent = $(this).prev().attr(‘id’); $(”#”+tabParent).addClass(‘tabHover’); }, function() { var tabParent = $(this).prev().attr(‘id’); $(”#”+tabParent).removeClass(‘tabHover’); });


I gave each of the menu items a specific ID. .tabHover class looks like ul.mega_menu li a:hover

simple workaround

thanks for pointing me in the right direction

Simple and elegant. Nice work Loony2nz. There is a way in CSS to have this effect, but, as I said it would require a complete rewrite. If only there was a ‘parent’ selector in CSS . sigh ;)

Again, thanks for the purchase and thanks for sharing your code with others on here. Best regards from a chilly and snowy Manchester, England.

Hi there, happy customer here, except one issue with Safari browser 5.0.3. For some strange reason (one mouse event out …. slow movement) the submenu seems to hang of flicker.

Also pics and text seem to shoot away to the left instead of nicely fade out.

Mind you it is a minor issue as Firefox and IE 8 do not have this problem, as far as I can see …... although my eyes blood shoot and starting to make silly mistakes with coding.

Perhaps I completely overlook something or messed-up css.

Anyway please let me know if i’m due for a long holiday or perhaps it is a Safari issue?

Thanking you in advance for your help


Hey there, can you send me a URL where you’re having the problem? I can’t seem to recreate it. I’m not saying it doesn’t happen, but just not quite sure I’m looking in the right place :)

If you’d like to e-mail me from the link on my profile with a URL where I can see it, I’ll see what I can do.

Best regards,


Hello check our site which we will launch early 2011 go to button “stoffen” here you see small images jump away when using Safari browser.

Hope this will help a bit.


hello, can this be done easily with this script?


Hi Tae,

Thanks for your question. My item is for a ‘mega menu’ which is basically a 1-level list of items you wish to embellish more than a normal drop down menu. What you’re after isn’t a mega menu and also requires several levels – so this item isn’t for you.

There are plenty of other menu items for sale on code canyon though, so I’d recommend you do a search for ‘menu’ on here and take a look through the previews. Best of luck finding one!

Merry Christmas and I hope you have a great festive period.


i’ve been searching for a while with no luck.. thanks anyway!

Would it be pretty simple to add some JS that would give a little delay before the dropdown goes away – just in case the user didn’t mean to hover off-?

Yeah I would imagine it would be. I think there’s a jq plugin called hover intent which you might want to look at. You could probably adjust the css animation too – change the time property to be longer, perhaps. (that’ll only work in Chrome/FF4 and Safari, though)


I’m not sure if anyone else has noticed this yet, but there seems to be a rather annoying problem. When you move the cursor out of the drop-down menu box, the CSS style of the box’s elements gets very messed up as it fades out.

Is there a fix planned for this as I cant use it whilst it has this rather major bug?

It seems ok in FireFox but in any webkit based browser (any version of Google Chrome/Chromium or Safari) it is present.


Hi rmwebs,

Thanks for purchasing, I really appreciate it. Yes, the issue has been noticed and it’s actually an issue in webkit rather than in this script – hence a fix not being directly available from me. It is a relatively simple fix with javascript (if that’s an option) – if you need help working out exactly how, then give me a shout (but it’s basically applying a ‘fade’ function on the mouse out event when in a webkit browser).

Cant seem to get a JS fix working – any idea/demo code?


If you e-mail me from my Den, send over the code you’ve currently got and I’ll see if I can help. I’m not a js coder, but I’ll certainly try and help!


This is a great menu. I have one small problem which you might be able to help me with. When the menu overlaps a text link in the body of my page, the text link in page is above the menu. Here is an example: I have only tested this in FF 3 .6 (Mac). Any suggestions will be appreciated, thanks. - Simon

Hi Simon,

Thanks for purchasing my item, I really appreciate it. The link is showing through the menu (rather than ‘above’ it) – basically because the menu is opaque. You need to adjust the opacity value in the CSS to prevent this. This is on line 292 of your megamenu.css file – change opacity: 0.9; to opacity: 1.0;

As well as that, you’ll need to apply a new z-index to the hovered menus. So, somewhere around line 265 of the same file, add: z-index: 999;

That will mean the menus are definitely above your content below!

Hope that helps.


Thanks so much!

Can this be made to work with onclick instead of hover? Also, does this support styling of the menu itself – that is: how easy would it be to add an icon (like a little house to represent “home”) to the menu?

As this is a strictly CSS approach, it is not set up for the click event as CSS natively doesn’t have one. However, it would be relatively simple to add some javascript to hijack the hover event and only fire the CSS changes on click, I would suspect. There is also a chance to use the active state rather than hover, if you wanted to stick to a strict CSS approach – it’d be hacky, but probably possible. As I am not a javascript coder, I couldn’t really give you a direct example.

As for styling the menu – it’s as flexible as your imagination is. It’s fully documented and dead each to change – includes examples about how to add your own colour scheme and has loads of different layouts.

Plus, I’m only an e-mail away.

There was nothing in my download, just screenshots?

Hi, there was a problem with the update – can you please e-mail me from my Den and I’ll send you the file via e-mail – I have informed CodeCanyon of the error – I’m so sorry, I have absolutely no idea why this has happened! Please make sure you e-mail me…

The wonderful folk at Code Canyon (It was Jeffrey on this occasion) have pushed the update through, so you should be able to re-download. Alternatively, e-mail me via my den and I’ll send you the file. Genuinely sorry for the inconvenience, no idea what caused those problems. It seems to be sorted now.

A few questions before I buy: 1) is this a WP Plugin or only code? 2) is there instructions on implementing into WP if it’s not a plugin? 3) are there any live examples that are using this that I can see? I’m specifically concerned with seeing it do vertical menus.



Thanks for the questions. No, at the moment, this isn’t a WP plugin. Actually turning this into something which is easy to use with WordPress is relatively trivial, as long as you know your way around WP.

As for live examples, most customers (and there’s 250 of them) sadly don’t let us know where they use it. The demo video shows you the vertical menus (as well as horizontal, too). Basically, it’s a very easy to use framework which is incredibly easy to create your own colour schemes with.

The code is heavily commented with hints and tips about how to modify it.

To implement this into WP, you’ll probably (not definitely) want to create your own custom walker function which acts on your WP 3 .0 menus. If that sounds like gobbledigook, then by all means ask me via e-mail via my den and I’ll show you what I mean.

The WP 3 .0 menus can be easily modified to output the necessary markup which this menu code ‘expects’ (it’s actually been written with WP in mind) – which is why I added the WP tag. By all means, if you want help, just give me a shout. Otherwise, thanks for the question and good luck with finding something right for you.

Just a quick question before I purchase. . .

Can the top menu float within the container of a page rather than all the way across the top of the page?

Hi Seilche,

Thanks for the question – you can place this menu script anywhere in your page. You’ll see on my demo that I have 4 of them on one page – one at the top, one at the bottom and one on either side.

You can literally style them any way you want and place them at any point in your page.

Thanks again,


Can you use this on Wordpress as a dynamic Menu skin?

Hi Renny, thanks for the question

If you know how to write a custom walker function for your theme, then you can absolutely use this with WordPress. The markup that this plugin uses is very standard and so if you can write a walker function, you’ll be all set.

Hi, i’m totally new to all this, but can i use this amazing menu nav in iWeb? Will it work if I just add it to a HMTL snippet?


Hi workingallday, thank you very much for purchasing my menu. I’m afraid I have no idea about iWeb – I’ve never used the product. But if your menu structure is set up the same way as I have it in the demo (i.e. the HTML is the same) then the CSS should just be a ‘drop-in’ which will make the whole thing work. Thanks again!

I’m really happy with your menu, I would recommend it to anyone looking for a simlple and elegant solution: good work!

However, I have a problem: if I use anchor inside a H1 the font-size gets messed-up: the whole text inside the H1 gets smaller. Is this a bug? Any workaround?

The problem is very easy to reproduce: just edit your sample file combined_menu1.html and replace:
  <h4>Additional Lists</h4>
  <h4><a href="#">Additional Lists</a></h4>

Then you will notice that the ‘Additional Lists’ text will get much smaller (not like a level-1 header should be).

Hi mgraziosi, thanks for the comment. It’s not a bag as-such, this item is designed for people who generally know their way around CSS a little bit, so if they find some issues like this then it’s a very simple matter to fix it.

Thanks a lot for pointing this out.

Hi, the “Live Preview” of this item does not seem to work in Chrome for me.


How integrate this menu into my wordpress website, i can’t see this in the help document