Code

Discussion on Zetta Menu - CSS3 Mega Menu and Drop Down menu

_nK

_nK does not currently provide support for this item.

45 comments found.

Hi nKdev, You’ve a really great work! I’m just looking for the strong HTML coder for partnership. Check my works. What do you think about? Thank you!

Congrats ! nice work :)

Thank you! ;)

I have come across a problem when menu is used on mobile device in switch mode. When the user taps on the hamburger icon the dropdown menu item list appears but the first option (the logo) is highlighted as if selected, then the page automatically reloads as if the user has tapped the logo, meaning that it is not possible to select any of the other menu options. It is not even possible to quickly select them before the reload. My menu is horizontal and full width. Am I missing something here? Like this the menu is unusable on smaller screens. - there is also a similar problem with sub menus on the smaller screen because even on a narrow window on a desktop the sub menus obscure lower top level menu items and therefore anything except the upper top level menu item is not selectable. I would appreciate your help with this. thank you.

Thanks for the fast response. I will send you a message.

Both those issues seem to work with the version you have sent me. Thanks again for acting so quickly.

No problem! Thank you for interest in our product. Fixes and 2 new responsive view will be included in the next update.

Hi, The menu is not working for me at IE11 http://m.my-answers.com/

Do i need the Jquery version? please advice?

Hello, luckyskill.

Menu works fine in IE8-IE11 and you dont need jQuery version, we checked it out on your site. Please, try to press F12 and check “Document mode” – picture

OK. Thank you now it’s working!

Hi

I’ve been trying to implement your menu in my site, but I’ve been having issues trying to add a background image to some of the menus. It seems like there’s an overriding element that prevents an image from being displayed in the background. I’ve even tried another class, but no luck. How can I fix this?

The second issue that I have is the font. It doesn’t seem like the font is working, it reverted back to Time New Roman. is that because you used a special font that I don’t have or is the CSS missing something?

Hello.

1) We just checked the image on background. And it works. Maybe you send us the address of your site through this form and show where you want to use an image?

2) Menu uses a font that is used on your page. We use the google font Lato – link.

I’ll upload an example soon, in the meantime, I’m not sure what area you tested, but I can add an image to the overall menu, then every drop down menu has the same image, however I’m trying to add it just to the multi-column .

Ah, multi-column menu has a structure:
<div>
<ul></ul>
<ul></ul>
</div>
So, each UL element has background-color. You have to make them transparent. And than use background image to div.

I love this plugin! Almost have it set up. One thing: the search is not supported in Safari! Can you provide a fix for that?

Hello, igerards.

Thank you for your feedback. We will try to fix this as soon as possible and update the menu.

Any updates on this?

Hello.
Yes, this was fixed 18 July.

Hi,

Great script !!

I’ve one question: how align to right search icon ?

Thank you !

Hello, francois53.

Thank you for your feedback. Search icon is aligned to the right side in all demos. You need to use “zm-right-item” class:
<li class=”zm-search zm-right-item”>...</li>

Thank you !

Is there any way the hover can work with the hoverIntent jquery extension?

Hello, richardreid14.
We tested the hoverIntent. And hover events works. Can you tell why you would like to use this extension?

The hover is a little erratic. Users often just drag their mouse over things briefly without meaning to select an item in the nav, so hoverIntent fixes this.

JavaScript isn’t able to delay the CSS :hover state itself. You have to replace all the :hover states into classes manually and manipulate it with jQuery.

How can I center the menus horizontally across the page?

Usually near the nick shows “purchased”.
You can send us the mail using this form. And please specify how you want to center the menu (screenshot or mockup will be ok).

What’s a “nick”???

nickname

Hey! First of all, very nice package. What about making a class for normal link buttons.

zm-button

Hello, FabianKoestring.
Thank you for your feedback. We have taken note of your suggestion. Wait for the update, it will be very soon.
Yours faithfully, nK.

Hey there! I have problems with the mobile version on chrome browser. In Safari everything works fine. iPhone 5.

To open the menu on Apple devices, you need to be sure to insert this code in UL tag:
onClick=""
See demo folder, please.

Thx again. Did not see that. Works!

No problem! :)

Does this menu support for Arabic Website, that is right to left

Hello, murtuzab.
Unfortunately, menu is not optimized for RTL and not correct work with icons.

Hi I have the same issue from this user: timwatson

Menu items and therefore anything except the upper top level menu item is not selectable

I using the menu-default version.

can be implemented, text instead of an image for the logo?

Thanks

Hello, goseb.
We faced such a problem and found a solution.
Just add zm-response-margin class to UL.

DUDE!!! YOU ROCK!!!!

The menu works perfect now :)

Thanks for the excellent support.

No problem :)
Good luck!

Current menu

Hello and in advance congrats for the grat job!

My website use jscrollpane, so all my content is inside one page scrollable, how to use

zm-active
for make active the items in this case?
Thank you
Hello, mensoda.
I am just visit Full Screen Site Navigation Documentation and wrote the script for you:
$(function() {
    var zettaLinks = $('.zetta-menu').find('a[class!=active]');

    $('#fsn').on('fsn-pageChanged', function(e, $page) {
        var currentHash = '#'+$page.attr('data-link');
        zettaLinks.each(function(){
            $(this).parent()
                .removeClass('zm-active')
                .addClass((this.hash == currentHash)?'zm-active':'');
        });
    });
});

You can use a picture instead of icons. But you stylize them have to manually.

Hello nKdev
About the menu active solution

I called the function before the tag </body> and I changed few class to try make this working but unfortunately not working. So if is easy for you to solve this problem I write to you a private message with the link for download the website folder. And please if you will solve let me know how you did because I got crazy with this problem without solve anything. Sad story.

About the picture in the menu I will do like your advice above.

Thank you very much!
mensoda

Hello, i just purchased it and tried to install into my wordpress site as plugin. But it is not getting installed. Do let me know step-by-step installation process if i need to install it by modifying some code.

Hello, ghoriameer.
We’re not familiar with WordPress, so there is nothing we can advise. Soon we will begin to study it and write Zetta plugin for wordpress.

My menu is showing an error. He is getting behind a search field of a form. How do I make him stand in front overlapping this field?

Image of error: http://www.farsoft.com.br/menu_error.png

My piece of code:

<button type=”button” class=”btn btn-default dropdown-toggle” data-toggle=”dropdown”> {{query.filter}} </button>
  • Todos campos
  • {{field}}
<input type=”hidden” name=”search_param” value=”all” id=”search_param”> <input type=”text” class=”form-control” name=”x” ng-model=”query.query” placeholder=”Procurar…”> <button class=”btn btn-default” type=”button” ng-click=”reload()” ng-keypress=”onSearchKeyPress($event)”> </button> <!- -> <button type=”button” class=”btn btn-danger navbar-btn” ui-sref=”pessoa-new”>Novo</button> Fechar

I solved with z-index:0 in my code. Thanks!

Well done! Good luck.

Is there any way to convert this plugin into a wordpress plugin?

Hello, gavindc.
We have no experience with wordpress.

How do I use instead of the hover event I want to use the click event? It is possible that your menu?

Please, find this selectors and see code_inside:
.zetta-menu li,
.zetta-menu li > a,
.zetta-menu input,
.zetta-menu textarea,
.zetta-menu .zm-button {
  code_inside
}
1 Fix the following code:
 .zetta-menu li> div {
      z-index: 0; 
  } 
  for
  .zetta-menu li> div {
      z-index: 9; 
  } 

  For the menu is always up for anything.

For many sites it is not needed, but who needs that regulates manually.
I suggest you’d better set z-index on the menu.
.zetta-menu {
   z-index: 9;
}

I noticed that the search is not working on tablets. Do you have a fix for that?

Hello.

I just checked. There is a problem with Apple devices, not always triggered the search. Android devices work well.

Thank you for your comment. I will try to solve the problem.

Best regards, nK

Hi,

I want to intigrate this script into my upcoming html template. Its a bootstrap based template.
1. How easy it would be to integrate into bootstrap 3.2 template?
2. Since it has it’s own grid, will it be interfering with bootstrap’s main grid?

Thanks -chandan

Hello.

1. Just use it according to instructions and include zetta menu css file after boootstrap. Menu will work correctly and will not affect the bootstrap.
2. zetta grid does not affect the grid bootstrap.

Best regards, nK

by
by
by
by
by
by