Using a responsive template with skel.js, and the ipad is, I guess, such high resolution that it shows desktop mode, not the narrower mobile mode. The trigger link (which shows the dropdown when you mouseover) just acts as a regular link, so the dropdown doesn't show up.

I see the Expansion Mode can be hover or click - is there a way to say "if it's a touch screen use click, and if it's a mouse use hover"?

Hello.

I added inline sub-menu to your demo: https://github.com/UnickSoft/jquery.dropotron/blob/master/demo/demo1.html

It is shown incorrectly on first time, but correct on the next time.

First time:

Second time:

Maybe I used droptron wrong.

Hi,

I need to remove the right space on my drop-down but I can't.
I'm trying with:

.dropotron li {
			box-shadow: inset 0 1px 0 0 #e6e6e6;
			padding: 0 !important;
		}

Any advice?

Hello there!

I have been trying to use this js to make my menu on a website. Everything works as supposed except images stop displaying on mobile. I have been checking the CSS on desktop and tablet sizes (where the image is displayed), tried to copy it to the mobile CSS and didn't work. I tried also to attribute a new class to the

{
}

    #navButton .toggle
    {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

        #navButton .toggle:before
        {
            font-family: FontAwesome, 'Source Sans Pro';
            text-decoration: none;
            font-style: normal;
            font-weight: normal;
            -webkit-font-smoothing:antialiased;
            -moz-osx-font-smoothing:grayscale;

            content: 'drag for menu \f0c9';
            color: #fff;
            color: rgba(255,255,255,1);
            text-align: center;
            display: block;
            font-size: 14px;
            width: 150px;
            height: 30px;
            line-height: 30px;
            position: absolute;
            left: 10%;
            margin-left: -40px;
            background: rgba(18,36,58,0.75);
            border-top: 0;
            border-radius: 0;
        }

position: relative;
background: #12243a;
box-shadow: inset 0px -2px 5px 0px rgba(0,0,0,0.25);
font-size: 1em;

content: '';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url('images/overlay.png');
background-size: 128px 128px;

position: relative;
z-index: 1;
display: block;
text-decoration: none;
padding: 0.5em;
color: #98b8eb;
border: 0;
border-top: dotted 1px rgba(255,255,255,0.05);

border-top: 0;

color: #fff;
font-weight: 600;

display: inline-block;
height:45px;
z-index:9000;

display: inline-block; width: 1em;

display: inline-block; width: 2em;

display: inline-block; width: 3em;

display: inline-block; width: 4em;

display: inline-block; width: 5em;

color: #fff;

I'm using skel panels. My dropotrons are obscured by the parent #nav, and have found this is because the ul's for dropotrons are detached from the parent and inserted in a div above the #nav in the DOM. Hence, using z-index is of no use, because the panel containing the dropotron would then effectively hide the entire #nav bar, which is an overlay panel.

If I try to override the 'detach' parameter for dropotron, z-indexing works fine, but the positioning is wrong. It appears that the positioning calculation does not take into account that the dropotron is now a child of the parent menu item and not the page panel.

The calculation of the right boundary isn't including the opener's width, so it's allowing the menu to spill over the window boundary when the dropdown is located close to the right margin.

Specifically on lines 162 and 175, this code:

left + mw > _window.width()

needs to be:

oo.left + left + mw > _window.width()

I'd create a pull request, but I don't have the access rights to create a new branch.

Thanks!

Hi,
i want to know how i can close the menu after content page is scrolling.
Which event it performed when i click on the button to close the menu (see: https://html5up.net/verti)

Please help

Hi!

I've been using Dropotron successfully for a while now, love it – great work.

However, I've got a client who works with a Microsoft Surface tablet (v2 to be specific). He's saying that on touch devices, the dropdowns don't work too well. Usually, for tablets, I'd use a different mobile friendly nav. However, as the surface is a 10.6" tablet, it's getting a desktop view. I guess there's also quite a few touchscreen laptops out there which would represent a similar use-case.

I thought about switching over to expandMode: 'click' to help mitigate this. However, when I use this option, no dropdown appears at all. I've also tried downloading the demo project and adding this option, which also doen't work.

Any ideas or am I perhaps missing something?

I place a login form in a Dropotron Dropdown List Item, as do not want an extra Loginpage.

The problem is, that if you click in an input field, the dropdown disappears. I found the "isLocked" variable in the source code, but unfortunatley I cannot use this.

Is there any idea how I achieve this or is Dropotron not the right choice for this use case?

I am using your Dropotron plugin as part of a template from http://www.css3templates.co.uk/

A small problem, if a main menu item is off the right of the browser window and you have to scroll the content left, then clicking or hovering over the top level menu does not bring up the sub-menu?

My site is here: http://weather.wilmslowastro.com/

Just narrow your browser down a little (between about 500 and 900 pixels wide) so that one of the drop-downs is out (or partly out) of the window.

Hey,
Any chance you could publish an NPM package for this, for those using a blunder? Thanks!

Your plugin is just amazing and easy to get things working.
How about a minimum size or a minimum count of li to scroll the dropDown?

Hi all, not sure where to report this, either for dropotron or jquery, so please bear with me if this is the wrong place...

I'm using a free html5 website template from https://www.html5webtemplates.co.uk/ called "elements" which is using jquery 1.11.1 and dropotron 1.4.3.
I've noticed when using anchor links, the drop down menues overlap the part of the page where it's jumping to, ie the height of the menues are not respected by browsers. (checked it with FF, Chrome, Opera and Safari.)
Is this something that'd be easy to fix?

On some mobile devices, when you click on the menu button to open the menu, the dropdown menu (slide out) menu starts appearing but then disappears again, and starts (re?) loading a page. This seems to be a similar bug as described here (for Bootstrap).

http://stackoverflow.com/questions/17178606/bootstrap-dropdown-navigation-not-working-on-mobile-browsers/25041753#25041753

The menu behavior works fine on Boat browser in the Galaxy S3, but not with Dolphin Browser or the stock browser.

Not really an issue but I saw that you want to rewrite dropotron - it would be nice to add a "active" class to the top level (ul element) on hover the ul or the children, too. I use it on every project because it is the best and most flexible multi level menu I know :)

http://prntscr.com/ixg1qv

In order to help the users sometimes I do add repeated items on submenues.
The problem I have with this library is that I can not avoid those to show up in the collapsed version of the general menu. Perhaps a class could be used to filter the elements I don't want to show.

Tried in the demo i downloaded here. It has no effect:

$('#main-nav > ul').dropotron({ 
    offsetY: -10, 
    menuClass: 'dropotron',
    expandMode: 'click'
});

EDIT: sorry now i see it's only added to the pulldowns.

When I switch detach and cloneOnDetach to false, the dropdown stops appearing in iOS Safari. When viewing from an iPad or the iOS Simulator to the Web Inspector in Safari for Mac, I can see that when the dropdown is tapped, the UL that contains the menu items flickers between display:none and display:block numerous times before settling back on display:none. Any ideas?

offsetY: 0, baseZIndex: 9000000, mode: 'instant', alignment: 'right', noOpenerFade: true, detach: false, cloneOnDetach: false, expandMode: (skel.vars.isTouch ? 'click' : 'hover')

For better accessibility:

Dropdown expanded/collapsed state should be represented in the code.

Menu items that have a dropdown menu include an "aria-expanded" attribute that equals to "false" that changes to "true" and back when opening or closing the dropdown.

[I'm not sure if this is a duplicate of #2 . . . apologies if it is. I've done my best to track down the code, but failed to spot the relevant bits.]

I'm using an adaptation "Arcana" on a site. Some of the "News" items have long-ish titles. On wide displays, the menu simply spreads out:

[pic removed]

When the mobile widths kick in, the long titles overlap rather than wrapping or simply overflowing out of sight:

[pic removed]

Is there a way of getting long titles to behave more elegantly in mobile views, rather than the current jumble of characters?

• Version info: the site is running jquery.dropotron.js v1.4.3

Grateful for any help with this! (I have to imagine others bump into the same issue.)

Hello.
I'm checking a project that uses dropotron and can't accomplish something that seems pretty easy.
I wonder how do I capture the click event from the dropdown list on the top menu.
http://html5up.net/telephasic
I've been trying to log the mouse events on the console but it seems all mouse events on the dropdown are disabled.
Any ideas?
Thanks in advance.