I'm using skel panels. My dropotrons are obscured by the parent #nav, and have found t

z-index problem about jquery.dropotron HOT 5 CLOSED

ajlkn commented on August 16, 2024

z-index problem

from jquery.dropotron.

Comments (5)

ajlkn commented on August 16, 2024

Have you tried changing the baseZIndex used by Dropotron?

from jquery.dropotron.

Bendico commented on August 16, 2024

Yes. The problem with this, is that when the dropmenu is detached from the nav, it is placed in an entirely different skel panel which is z-indexed "under" the nav panel, which is an overlay panel. Since the panels are entirely separate divs with z-index and positioning, z-index of the dropmenu will only affect elements within that panel. In other words, to have the dropmenu on top, I will have to z-index the page panel above the nav panel, effectively hiding the whole menu entirely. If I could control the detachment, it would solve the problem, is it possible to tell dropotron where in the DOM to attach itself?

from jquery.dropotron.

ajlkn commented on August 16, 2024

Not without modifying Dropotron itself, but if you're okay with that, this bit of code (line 534 of the unminified source) controls how that works:

// Detach the menu and move it to the end of the <body> element.
    $menu
        .detach()
        .appendTo($body);

Changing $body to a different element/selector (eg. $('#myelement')) ought to do the trick.

from jquery.dropotron.

Bendico commented on August 16, 2024

Thanks a million, problem solved! I actually elaborated a little bit and added a setting 'attachSelector' with default value 'body', then replaced the harcoded ('body') in line 97 with (settings.attachSelector). So now I can customize the attachment from the initializer, if needed, otherwise it will default to body as before.

I also figured out that it is the skel-panels framework that actually causes the problem, because it reorganizes things in the DOM after dropotron has been initialized. So my solution here was to append the dropotron to the #nav element and use a ul:not(.dropotron) css selector to avoid the main menu styling interfering with the dropotron css.

BTW, the project I am working on is customizing the TXT Starter Kit for Umbraco CMS, which I believe is originally your TXT by HTML5UP, right? However, the submenus are not implemented in the Starter Kit, and that is what I have accomplished now actually, thanks to your help:-)

Would you consider making my attachSelector setting an official part of the dropotron code? It would mean I don't have to synchronize any updates, and maybe someone else could even find use for it? (I'm thinking particularly of Umbraco and skel-panels users.)

from jquery.dropotron.

ajlkn commented on August 16, 2024

Sure, I'll look into doing that in the next release.

from jquery.dropotron.

z-index problem about jquery.dropotron HOT 5 CLOSED

Comments (5)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent