i have full package of modernizr not custom one. and i get this error on page load

Uncaught TypeError: Object # has no method 'prefixed'
jquery.dlmenu.js:57

It would be pretty helpful to have the ability to use custom selectors for navigation structure, like:

.some-cool-menu-trigger

instead of currently hardboiled:

.dl-trigger

Cheers

I thought this would be simple but wondering of someone can help. I would like to have this menu be already open on the page load and still have the toggle close open class still working. I see how the class dl-active on the button and dl-menuopen on the ul thinking it was there or the config open true might be it but not the case. Appreciate any advice thanks.

I tried to change the content of the menu button in the css but I have not found the class dl-trigger.

In my case, i'd really prefer to open the menu using an anchor (I don't need a 'button' component, i just want a text representative)

If you make the trigger listen to a class, the listener is more re-usable.

eg:
this.$trigger = this.$el.children( 'button' );
becomes
this.$trigger = this.$el.children( '.dl-trigger' );

currently we use "CLICK" for menu nevigation, which is good and working fine.
But Nice if you provide hover with 3 sec. delay(mean after hover on any menu, it will give same current "click" functionality. if mouse stay for 3-4 sec on same place/menu link)
It just request.

Is there a means to open the menu in desktop then show the hamburger menu on mobile

Using this in a Wordpress theme, and would like to pull the button out of the menu for the sake of layout control.

Currently cannot place the menu button around other elements in a webpage due to the menu covering up other elements. It would also be nice to use multiple instances for different menus such as "Cart/Shop" "MyAccount" and a full "Menu". Im not savvy with JS at all if anyone could update this script to support multiple instances. I believe someone posted a fix for this feature but it wasn't merged.

Suppose I want to use more than one menu instance on one page

Changing #dl-menu to a class one is a nobrainer, but menu's that are already open should be closed (or at least be an option)

I fixed this for now by adding a trigger:

...
_initEvents : function() {
    var self = this;
        this.$trigger.on( 'click.dlmenu', function() {
            if( self.open ) {
                self._closeMenu();
            } 
            else {
                /*addition*/
                if(!self.open && $('.dl-active')[0]) {
                    $('.dl-active').trigger('click');
                }
                /*end of addition*/
                self._openMenu();
...

Currently, a link that has children is assumed to be a dummy link that doesn't actually need to link to a page. Clicking it only shows its child items, and doesn't provide a way to actually navigate to that page.

CMSs such as Drupal build menus out of pieces of content and don't make heavy use of dummy links such as are expected by RMLM. To solve this, an option should be added to add a navigable link to an item at the top of its child link list.

Hello,
How can use with angularjs for create menu ?
ng-repeat not create li list, i use this other but not ok with dl-menu
thanks for your help

hi sir,
i am trying to implement third level menu in website but category.tpl is not working properly
plz help me in that
my email is [email protected]

the code is 👍

                    <ul> 
                           <?php foreach ($child['children_lv3'] as $child_lv3) { ?>
                           <li><a href="<?php echo $child_lv3['href']; ?>"><?php echo $child_lv3['name']; ?></a></li>
                            <?php  } ?>
                        </ul>
                    <?php } ?>

Has anyone had use for, or implemented a change to the menu where only the arrows advance the menu, but the links still work? I've got a menu that needs parents as links. So, basically, each item on the menu takes you to a page unless you click the button (which will advance to next level).

I know there is the: useActiveItemAsLink: true, config, but that still requires the user to click once more to get to that item and it's not very intuitive. Is there simple way to do: useParentItemAsLink: true ? By maybe appending a clickable arrow on each link that has children?

I'm just thinking about this right now, but I'm not entirely sure how to implement it:

        if (this.options.useParentItemAsLink) {
            this.$el.find( 'ul.dl-submenu li' ).append(function() {
                var parentlink = $(this).parents('li:not(.dl-back)').find('a');
                return '<span class="chevron-right"></span>';
            });
        }

I realize that would have to become the new trigger, but not exactly sure how to proceed. Any thoughts?

Thanks!

Hi,

since IOS 9.0, Safari seems to handle some things differently.

When using the demo on http://tympanus.net/Development/ResponsiveMultiLevelMenu/index2.html
on an iphone with ios 9, the screen size jumps to fit the sliding in submenu, which does not look nice at all

best regards

Bernd

When using on Android browser 2.2, when you click on a menu item it looks as if nothing happens, but the sub menu is loaded in you just cant see it.

Currently due to https://github.com/codrops/ResponsiveMultiLevelMenu/blob/master/js/jquery.dlmenu.js#L123 any 3rd party JS set to listen for clicks on those menu items for whatever reason never get triggered.

If you are going to call event.stopPropagation there then do it conditionally for the situations you deem it necessary, not on all clicks, which is not needed.

To clarify the situation, several WP themes use this library. When combined with a plugin like my own (Popup Maker) the user wants to be able to trigger a popup from the menu item, everything is set up correctly except that line prevents it from triggering the popup so it just sits there doing nothing.

Hope that is clear what we are hoping for.

Hello. I'm experiencing an issue on Chrome browser (v.80.0.3987.163). Unfortunately, I don't know from which version problem appeared maybe from v75-78... But the menu definitely was working on older versions of Chrome.
Uncaught TypeError: self.options.onLevelClick is not a function at jquery.dlmenu.js:152
jQuery version 1.8.3, jquery.dlmenu.js v1.0.1.
Any help?

When viewing pages with dlmenu using IE9...
Problem appears in my project as well as on the demo pages for dlmenu.

Expected behaviour:
When menu is minimised (closed), normally the area where the menu expands is completely clear. Hit zones for the menu items are hidden. This can be seen in Firefox, Safari, etc.

IE9 behaviour:
When the menu is minimised (closed), a ghost area remains where the menu would normally expand to, when open. Menu content seems invisible, however the hit zones for menu items remain present and active.

These hit zones overlay the content of the page, including any links or other things in the content, which presents as a bug to users.

Can anything be done to avoid this issue in IE9?

There are reserved words used in the code. These should be ascaped.

jshint breaks on this. IE8- breaks on this. ex:
animationClasses : { in : 'dl-animate-in-1', out : 'dl-animate-out-1' },
var $flyin = $submenu.clone().insertAfter( self.$menu ).addClass( self.options.animationClasses.in ),

I add

max-height: 400px;
overflow-y: auto;

to dl-submenu, because i have a very tall sub menu.

But it seems the animation ignore the height and overflow settings. The sub menu will show with full height and then change to 400px after the animation.

When this plugin is used within a React component, onClick events do not fire. Here is the line of code causing this problem:

this.$menuitems.on( 'click.dlmenu', function( event ) {

                event.stopPropagation();

Source: https://github.com/codrops/ResponsiveMultiLevelMenu/blob/master/js/jquery.dlmenu.js#L123

I suggest that stopPropagation should only be called when a submenu parent node is clicked, but not when normal links are clicked, to improve compatibility with React and other frameworks.

Love the multilevelmenu. It normally opens with the menu displayed to the right and thats fine when you display the button on the left of a page. If you display the menu button on the right side of a webpage, the (sub)menu isn't shown entirely.

Would like to see a (simple) option to open the menu displayed to the left.

Hi,

What can i use this ResponsiveMultiLevelMenu JQuery for free Wordress Plugin ?

Hi,

Thanks for the nice looking menu.
How do you capture the click event on a submenu item ?

I have tried : $(document).on('click', '.dl-menuwrapper li a:only-child'....
As my menus are dynamically generated but I don't capture a click.
I have seen in the js that there is the onLinkClick event, but I don't manage to capture it.

Help would be much appreciated.

Hello, thank you for this great work. There seems to be a problem when browsing from the third level menu and after. Cannot get the submenu to open, it shows nothing. This is the website it is on:

http://petsiavas.businesswebsites.gr/staging/ (From 768px and down)

Hey, maintainer(s) of codrops/ResponsiveMultiLevelMenu!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library codrops/ResponsiveMultiLevelMenu is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "codrops/ResponsiveMultiLevelMenu",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Do not reset option on menu close.

Right now menu resets to menu root.

I tried to trigger the opening if the menu over a href link somewhere else on the site which is not located in the

I was wondering if there was a way to change the color of the sub menu list that would be different from the main level menu. It appears that the css overlays the .dl-menuwrapper li a style on top of the submenu item so it all remains the same style. If anyone has any suggestions it would be appreciated!

Thanks so much!

Hi,

Are you able to either:

• close the menu if the clicked element has an HREF (i.e. a link has been navigated), or
• trigger an event to allow me to close the menu myself?

I would prefer the first option, but perhaps others would like the menu to remain open - maybe it is an option to be passed in init.

Ta

Is there any way say I can go to the URL of the parent link item. You know, now when I click on a parent link, it will open the sub menu, so I cannot go to the URL of parent link.
I tried to add the parent link to its sub menu but when I click it, it still just open the sub menu.

change
-webkit-animation: MenuAnimOut1 0.4s linear forwards;
to
-webkit-animation: MenuAnimOut1 0.4s;
and others
"linear forwards"
to
""
resolve the problem

Great plugin, but unfortunately it crashes on Android 2.3 :(
I try debug this on Android via Weinre, but your JS code not throw any bug on console...

Hi..

Firstly a big up for creating something so helpful for so many users around the world.. I'm facing a slight problem.. I would like the menu to stay open at the current submenu-level when I click an item.

For eg. : When I goto Fashion / Men / Shirts and I click on Shirts.. I would like the menu to stay open at the item 'shirts' and let the user make the choice of going back instead of loading a new page with the menu closed.

Please help.

Cheers,
N.