This item is by an Elite Author
Pixelworkshop
- Sold between 100 000 and 250 000 dollars
- Elite Author
- Author was Featured
- France
- Item was Featured
- Author had a File in an Envato Bundle
- Author had a Free File of the Month
- Contributed a Tutorial to a Tuts+ Site
- Repeatedly Helped protect Envato Marketplaces against copyright violations
- Referred between 200 and 499 users
- Bought between 50 and 99 items
- Has been a member for 3-4 years
- Exclusive Author
3,532
Purchases
Buyer Rating:
4.55 stars
4.55 average based on 305 ratings.
-
5 Star
22072%
-
4 Star
5518%
-
3 Star
175%
-
2 Star
51%
-
1 Star
82%
| Created | 19 January 11 |
| Last Update | 1 May 13 |
| Compatible Browsers | IE7, IE8, IE9, IE10, Firefox, Safari, Opera, Chrome |
| Software Version | jQuery |
| High Resolution | No |
| Files Included | JavaScript JS, HTML, CSS |
- clean
- css3
- drop down
- fade
- fly-out
- jquery
- mega dropdown
- megamenu
- menu
- mobile
- navbar
- navigation
- responsive
- slide
- toggle
© All Rights Reserved Pixelworkshop -
Contact Envato Support


Hi, thanks for a great script. I’ve implemented your menu on my website, but when it goes responsive (to phone mode) the menu disappears. The responsive option is set to 1. I have no idea what I’m doing wrong I was hoping you could help.
Hello, could you send me an email with an URL from my profile page please ? Thanks !
hello! i’d like to purchase the menu but i noticed it doesn’t support having the menu items expand to take up 100% of the width of the menu.
here are some stackoverflow links to show you what i mean: http://stackoverflow.com/questions/9894176/css-how-to-make-li-fit-the-width-of-the-ul http://stackoverflow.com/questions/10632284/stretching-the-ul-li-menu-with-padding-to-fit-the-full-widththank you and great job on the menu bar!
Hello, yes that’s not something implemented in the menu. I’m having holidays so I can’t help much for now…
Can I adjust the width of the menu? I want to change it to 1200 px. If so do i have to adjust the media queries? And what would I need to change?
Hello, the menu is coded to fit and take the available space. It’s explained in the documentation so if you put the menu in a 1200px container, then the menu will inherit this same width. I’m having holidays so I can’t give you more details but feel free to contact me again if you need help.
I have tested this in IE8 on a few computers and doesnt seem to be responsive? Can you please advise how to fix this issue.
Thanks
Hello, it’s not an issue, IE8 is simply very old and doesn’t support any modern techniques or effects. If you really want this browser to be responsive, you’ll need a script that will make it support media queries.
The reason I pruchesd this is because you advertised as compatible in IE7+? Not having the jQuery effects and CSS3 styling is fine but really need the width to be reponsive in IE8 and up.
There’s a live preview to test and before purchasing anything you should test by yourself. Responsive is a term used to say that it’ll work on mobile / tablets and it has nothing in common with 10-years old versions of IE.
Now as I said earlier, there are scripts for that, I’ve never tested any of them but you should find something that will enable media queries under IE.
Hi, I have a site design that calls for the menu panel/drop-down to display above the menu, more of a pop-up then drop-down. I read through most of your comments and saw the code from the bottom of megamenu.js that controls the menu position. I played around with it a little and wasn’t able to come up with anything. Have you ever had an implementation using this display? Do you have any tips as to how I might go about changing the code to incorporate it? All the menus will be full width and when you hover over the navigation the menu panel will display above the navigation rather than below. The navigation will be positioned about half way down the page.
Thank you!
Hello, I’m not sure to understand, would you like the drop downs to appear above the menu bar ? Something like a footer bar that would have “drop up” panels ? If so, I have 2 footers in my portfolio but feel free to correct me if I misunderstood your question
EDIT : something like this ?
Yes, that’s exactly what I was looking for! If I were to use your Sticky Footer (jQuery) what would you recommend as the best way to place it, for example, the middle of the page. Change the css for the footer to – position: absolute; top: 150px;? Thank you for your help
Well, it’s coded to stick at the bottom of the page. I’ve never tried another position and as I’m having holidays I can’t really test for you. If you’re still interested, I’ll be back home in a week and I can try it
If you could take a look at this that would be great! I want to make sure whatever method I use for repositioning it is what you would recommend vs. however I am able to figure out, which may not be correct or the easiest. Thank you
Alright, the best would be to send me an email on monday, I’ll be back home. You’ll find a contact form on my profile page, in the sidebar (you can reach it by clicking on my avatar). Thanks !
Hi,
I’ve two questions before buying;
- If you click and then move the mouse out of the active item / out of the menu is it posible that the menu stays open? For an example see the menu on www.eneco.nl
- Is it also possible with this menu that if you click in the menu all other things on the website will get kind of dark layer? For an example see the menu on www.eneco.nl
Tank you for your attention!
Hello and thanks for your interest in my work !
For your first question, yes there are 3 effects that keep the drop downs open until you click again.
Concerning your second question, yes that would be possible but you’d have to write a script for that or maybe use an existing plugin but I’m not aware of anything like this.
Can you set one button to toggle and the rest to hover?
Hello, this is not an option available but it could be possible by customizing the script I guess.
Is there a way to have the menu stay visible when the user right-clicks a link in the expanded menu?
Also on mobile devices for the hover menu, when you tap to have it display, it also registers the link click on tap and takes the user to that page instead of just showing the menu, and register the link click only on the second tap. Is there a way around this besides removing the link?
Hello, I’ve never worked with right clicks so you’ll maybe need to look for a script that would handle them…
Concerning your second question, it has been asked already and it’s something that you would need to code in the script. The plugin included to detect mobiles and handle tap events can handle other types of mobile-specific events.
I’m having holidays so I’ll be back next week, unfortunately I can’t help more for now,
Is there a way to keep the active or current menu state lit up when a page is in focus – and if a child item of the parent is selected have the parent item stay in the active/current state so that it is easy for a user to determine what section of the website he/she is in?
Hello, I’m still having holidays this week so I can only give you general advices… You can create your own CSS classes and apply them on each page, for example you create the class “active_page”, style it in the CSS and apply it in the HTML where you need.
bummer … i’m using a shared menu as an include. wonder if it could be done through the JS … I could figure it out on the parent items, but not once you go to the child level. Would be a great feature enhancement since I’ve seen so many sites with mega menus using same functionality. Awesome menu though! Really like it.
Thanks
Do you mean an integration of the menu via the PHP include function ?
yes – that’s precisely what i’m doing. i want to be able to maintain and manage the menu from one central location. currently, i’m using php to set the page name and then applying the class is active state to the parent level li if it matches the page name. The problem is once you move to down to a child level within the drop menus, you lose the selection state on the parent level. I don’t necessarily need the child level menu items to highlight since i have various elements in the sub area, but it would be great if the parent level stayed lit if i was on any page within a particular section. Make sense?
Ok I see… So I guess that you’ll need to handle that via a script. It could be done by customizing the mega menu script file and adding / removing classes. It’s not something I can quickly explain here, do you have some experience in modifying jquery scripts ?
Is it possible to have two instances of the menu on the same page?
Yes, you’ll probably need to assign each one a unique ID so you can target them separately (for the script, customizations, etc.).
I am adding an image to the top level of the megamenu_right (a cart image) with no dropdown, but when I put the image in, it doesn’t lineup with the rest of the menu. I have been troubleshooting and trying to position it correctly and no matter what I do – change the css, style the
Hello,
As you probably know, there are main 2 ways to insert an image : either as a background (which I prefer in a case like yours) or directly in the HTML markup. But for both, CSS styling is necessary in order to overwrite other properties or add your own. I feel that I have more control with the first method, as a background (it can be a span element or whatever you want).
Have you tried Firebug to spot which styling properties are missing or not working properly ?
Hello, I’ve just purchased the script and I am facing an issue, it joins Ehaft21 question, when I am browsing the menu with an iPhone and in my top level menu i have a link but also a sub menu when i tap the top level menu to see the sub menu, it triggers the link of the top level menu. is there a way to set that for the frist tap it is only to see the submenu ?
thx
Hello, no it’s not coded for that. The top button can be used only to toggle the drop down. If you need to modify this behavior, you can see here the script used to handle touch events. From there, you could customize the mega menu script to behave like you explained.
Thanks for your help, I am not very good at javascript, can you tell me where to look at in je megamenu script ?
And is it normal that flyout menu is not showing on iPhone devices ? or there is a setting to set to make it show ?
Unfortunately it’s not a simple change in the script that I could quickly explain. It would require some tests and possibly recode some parts of it.
Concerning the iphone issue, can you see the same problem on the demo ? Because the fly-out works like an accordion on mobiles as you should see in the default HTML examples.
Hi,
i’m trying to use it in a RTL website (html css states direction:rtl) and it makes an endless wide scroll. Any recommendations?
Hello, I’ve never tested this menu with RTL. Could you send me an email from my profile page please ? Thanks !
Thanks – sent with description.
Reply sent, thanks
Thanks for the fast reply and accurate support!!! RECOMMENDED! (it works RTL)
You’re welcome and thanks !
Okay, I must be a complete idiot, but I don’t see how I am supposed to use this menu set, and I don’t see any help documentation here or in the file I downloaded. I’m assuming it’s not a plugin as it isn’t installable that way.
Hello, no this is not a plugin, it’s a set of hard-coded HTML/CSS files. It means that all the integration and customization must be done directly in the code.
Very nice. Decided to go with this after having previously purchased the non-responsive version. I’ve tweaked the CSS considerably for my own benefit, but thought I’d pass on the following 3 changes I think would be worth considering for the next version.
I did prefer the tabbed look to the other menu bar and tried to reproduce that, but was always 1 pixel out on the dropdowns, so gave up with that. Life’s too short
Hello, thank you very much for your feedback, I really appreciate and I’ll consider your suggestions for the next update
Hi there, just bought this as its just what I need and works really well so firstly thank you
I am trying to implement this on a bootstrap site and there seems to be some overlays in the styles. Are there any specific instructions on using this with the bootstrap framework ? thanks 
Hello and thanks for using my work
I don’t have any particular instructions for that, you’ll have to go through the CSS and make sure that the menu properties overwrites the ones provided in bootstrap. The !important rule is quite handy in some cases !
I regularly use ctrl-click to open a new tab in my browser from links. This doesn’t work from this menu. Nothing happens. This was from the “fixed” demo version provided as part of the purchased package, when I changed one of the many ”#_” links to something else.
I’d consider this a major issue with the menu, which needs addressing.
On my own version I get an error when I click on links. In Firefox “uncaught exception: Syntax error, unrecognized expression: [my_url]”. Any ideas on that?
Hello, for me the ctrl-click is working in the fixed version aswell… It can be a link in the menu bar or in a drop down, that’s fine for me. Which jquery effect are you using ?
For the errors you get in firefox, the best would be to send me a link from my profile page, thanks !
Link sent.