adgsm / multi-level-push-menu Goto Github PK

I made this a single issue because it think it can be resolved with one fix. Right now if you use the cover mode, the existing content disappears then the new content slides in.
This only takes effect when going down the nav tree, and not when going back using the back link.

See sample: http://multi-level-push-menu.make.rs/demo/covermode/covermode.html

Also is there a way to reverse the animations? The problem with the way tympanus has coded this is the back button is pointing to the right and sub menu items are pointing to the left. It should really be the opposite to make sense for how people expect the web to behave. Plus sliding should be in reverse directions.

THANKS IN ADVANCE!

Hi,

I'm trying to toggle (expand/collapse) menu by pressing only one button but can't get the current status...
Method "menuexpanded" always return me false.

Could you provide a simple example on how to know if menu is expanded or collapsed no matter the level ?

Or just provide a new method that automatically toggle menu ?

Thanks !

EDIT :
@adgsm Works nicely ! Thanks ! But please consider adding a "toggle" method ;)

Hello,
thanks for plugin...
is it possible to push iframe as div?

I tried this but it's not work
containersToPush: [$('#wrapper'), $( 'iframe.win') ],

Best regards
Pepe

When the .container is too large you can't scroll down, it looks cut.
The same effect when the browser window is small.

*I try this only on Mac

I use onitemclick to fill #pushobj with the appropriate content ,

IdName is a hidden html element which is a placeholder for my content.

$( '#pushobj' ).text();
$( '#pushobj' ).append( '
' + $( idName ).html() );

I added this function in the .js file :

$(function(){
$('.but').bind('click',function(){
alert('hi');
});
});

If i put a button in the default #pushobj content , this function works perfectly.
But if i put the input button in idName, and then make it shows in #pushobj by clicking the menu, the function is not triggered.

This issue gave me a headache, asking me why the example don't worked as expected if i´ve used the same code of example.

After a day i've discovered the cause, auto indent. To maintain my code clean always use auto indent on Brackets, and thats the problem.

If h2 aren't inline the javascript not work.

On the example expande to Men's Clothing:

The Javascript:
$(document).ready(function(){
    // Expand to Men's Clothing
    $( '#expandmensclothing' ).click(function(){
        $( '#menu' ).multilevelpushmenu( 'expand' , 'Men\'s Clothing' );
    });
});

<li>
                                        <a href="#"><i class="fa fa-male"></i>Men's Clothing</a>
                                        <h2><i class="fa fa-male"></i>Men's Clothing</h2>
                                        <ul>
                                            <li>
                                                <a href="#">Shirts</a>
                                            </li>
                                            <li>
                                                <a href="#">Trousers</a>
                                            </li>
                                            <li>
                                                <a href="#">Shoes</a>
                                            </li>
                                            <li>
                                                <a href="#">Sale</a>
                                            </li>
                                        </ul>
                                    </li>

<li>
                                    <a href="#">
                                        <i class="fa fa-male"></i>Men's Clothing</a>
                                    <h2>
                                        <i class="fa fa-male"></i>Men's Clothing</h2>
                                    <ul>
                                        <li>
                                            <a href="#">Shirts</a>
                                        </li>
                                        <li>
                                            <a href="#">Trousers</a>
                                        </li>
                                        <li>
                                            <a href="#">Shoes</a>
                                        </li>
                                        <li>
                                            <a href="#">Sale</a>
                                        </li>
                                    </ul>
                                </li>

Nice menu. Would be great to have an option to make the menu work in reverse for placement on the right side of the screen.

In iOS7, when using mode:cover, and collapsing from the second level using $menu.multilevelpushmenu( 'collapse' ), the menu is not returning all the way back to level 0. It stops in-between level 1 & 0. It works fine if mode is set to overlap.

I'm talking about the effect that can be seen here: http://multi-level-push-menu.make.rs/demo/collapsed/collapsed.html

when the menu is first opened the list items slide in from the left after the menu has opened. I just want to have them shown right away and get rid of this animation just like the original ml push menu was on codrops.

Is there any easy way to do that?

Hello,

I know your idea was to implement the original mlpm to use in older browsers. We all still know that translate3d is the way to use hardware acceleration in modern browsers (like mobile). And i think software animation with js must be an fallback way to help older browsers. Why not use original idea and extend animation for older browser?

Hey, its a really awesome work, it will be really useful install it by bower pkg manager!

Is it possible to add multiple push menus on the same page.

I have tried to do so with 1 on the left and the other on the right, by providing different id's to the div's containing the navigation. however its not working.. can someone let know how its possible.

Touch events detection does not work on WP8 phones.
Thanks.

I have input elements in menu and I want to make not possible to collapse menu if user works with input. For example - range input. If you try to move pointer - it will close menu. So I am doing this (updateNestedDOMStructure function):

$levelHolder.bind( dragEventType ,  function(e){
  if ($(e.target).prop("tagName").toLowerCase() == "input" || $(e.target).prop("tagName").toLowerCase() == "select") {
    return;
  }
  holderSwipe( e, $levelHolder );
})

$itemAnchor.bind( clickEventType , function(e){
  if ($(e.target).prop("tagName").toLowerCase() == "input" || $(e.target).prop("tagName").toLowerCase() == "select") {
    return;
  }
  itemGroupAnchorClick( e, $levelHolder, $item );
});

$itemAnchor.bind( clickEventType , function(e){
  if ($(e.target).prop("tagName").toLowerCase() == "input" || $(e.target).prop("tagName").toLowerCase() == "select") {
    return;
  }
  itemAnchorClick( e, $levelHolder, $item );
});

something like:

$el.multilevelpushmenu({
   dontToggleMenuFromInput : true
});

Hi

A lot of items can't be scroll when css is fixed.
I try myself fix that, but I can't. Meabe the library can do that.

The CSS I try with:

overflow: scroll;

Example:
http://jsfiddle.net/djflypo/3kpL3/2/

Thanks again
Regards.

Is it possible that the menu follows the page when the user scrolls the page when content is longer than the first screen ?

Actually, when i scroll down, the menu entries disapears at the top of the screen, forcing the reader to scroll back to top to go elsewhere.

Cool script !! Very useful

It will be possible to add a callback when the menu is finished building at the DOM.

Thanks!!! xD

Hello,

First of all thank your for this amazing plugin. Well done !!

I'm planing to use this navigation in my upcoming project. But I have a small issue which I like to explain briefly.

I like to provide deeplinks (bookmarkable pages) in my application. If a user visits one of those links, the content pops up and the navigation item, nested in the level holder class, should be visible.

So this is pretty simple. The entry in the navigation representing the content gets the css class '.active'. Then I check if the menu needs to be expanded. Could be something like:

if ($(menu).find('.active').closest('.levelHolderClass').attr('data-level') > 0) {
$(menu).multilevelpush.('exapnd', closest(h2 of the acitve item) etc.
}

This works fine. But if you use some ajax request in your application then you always have this tiny animation while swapping the levelHolderClasses (500ms). It would be awesome if there is a possibility to prevent the animation or init the navigation with the levelholderclass one would like to have visible on start.

Hope you can help me. Have a nice sunday.

When using haml to format the html for my menu in my project I could not get the following code to work:

$('#menu').multilevelpushmenu('expand', 'Devices');

Uncaught Error: Devices menu level does not exist!

On further investigation I discovered that the problem was the html markup being formed by haml. Observe the following two sets of html:

Created without haml

<div id="menu">
      <nav>
          <h2><i class="fa fa-reorder"></i>All Categories</h2>

          <ul>
              <li> <a href="#"><i class="fa fa-search"></i><input type="text" name="test" id="test" value=""></a>

              </li>
              <li> <a href="#"><i class="fa fa-laptop"></i>Devices</a>

                   <h2><i class="fa fa-laptop"></i>Devices</h2>

                  <ul>
                      <li> <a href="#"><i class="fa fa-phone"></i>Mobile Phones</a>
                      </li>
                  </ul>
              </li>
          </ul>
      </nav>
  </div>

Created with haml

<div id="menu">
    <nav>
      <h2><i class="fa fa-reorder"></i>All Categories
      </h2>
      <ul>
        <li>
          <a href="#">
            <i class="fa fa-search"></i>
            <input id="test" name="test" type="text" value="">
          </a>
        </li>
        <li>
          <a href="#"><i class="fa fa-laptop"></i>Devices
          </a>
          <h2><i class="fa fa-laptop"></i>Devices
          </h2>
          <ul>
            <li>
              <a href="#"><i class="fa fa-phone"></i>Mobile Phones
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>

Apart from the indentation, the html code is identical. Though only the first example works for functions like the following:

$('#menu').multilevelpushmenu('expand', 'Devices');

Haml slightly changes the indentation and structure of the html and thus the code above will no longer work. You can see examples of this in the following two jsfiddle examples. This JSfiddle represents the first html example (and is working) and this JSfiddle represents the second example (and doesn't work).

Is there anyway that the code can be changed so that functions like the above will still work regardless of small changes in html indentation?

Sorry if i'm at the wrong place to ask, but i'm not familiar with github.
I'm also not familiar with jquery.
And, not least, english is not my mother language.

In your sample 'onitemclick' you can retrieve the active menu's title
title = $menuLevelHolder.find( 'h2:first' ).text(),

that title was the caption of the item clicked before, one menu level above, (which i gave an id attribute for convenience)

Is there a way to find that id back ?
And is there a way to do the same with the onCollapseMenuEnd event ?

For example, i would like to be able, when the Item Shoes on Women's Clothing menu level is clicked to know that Women's Clothing is a child of the Clothes menu.

I'd also like to know that onCollapseMenuEnd is triggered on the Women's Clothing and that it's the child of Clothes. This would let me show automatically the default "Clothes" content

If this is not the right place to ask those technical stuffs, could you point me where to do so please ?

thank you.

I'm having some trouble getting the right-to-left nav working properly in Chrome (v 31.0.1650.63) after opening and closing the menu. You should be able to replicate the bugs using the examples in the repo.

1. The menu height no longer stretches to the bottom of the screen after closing and re-opening the menu.
2. After closing and opening the menu, the first-level nav items disappear/reappear when clicked, and the sub-levels stop opening.

It seems to only happen when the direction is set to rtl.

Demo: http://jsfiddle.net/lavrton/MRr4d/1/
It was working with v2.0.9

hi, AWESOME script!

how to detect when menu is fully closed?
"onCollapseMenuEnd" also callbacks when sub-menus closes, but i want only to callback when the Menu is completely closed,
is that possible?

thank you very much

Hello,
Very cool script.
I've just downloaded it and tested as it is.

However, any click won't work :-(

Why ?

Hello there!

I'm attempting to make the menu size responsive to browser dimensions by using menuWidth='20%' when the menu is initialized. The menu width is drawn correctly after initialization, but clicking any GroupItem causes the menu to partially collapse, and the deeper you try to navigate into the menu hierarchy, the more collapsed the menu becomes. I've duplicated this with your example code by simply adding "menuWidth='20%'," into the multilevelpushmenu initialization method. Any help you can provide in resolving this would be wonderful.

Thanks so much for your great work!

-Gray

Looks fine but is not functional. Swipe not working, links inside menu not working.

sorry delete this, duplicated.

Can a parent element be splited to two elements: text and icon would have link to some page, and the arrow would have default functionality (open submenu). Of course this should be optional.

Howdy! This question will probably boil down to CSS and not actually be mutli-level-push-menu-specific, but I've been banging my head against it for awhile and I'm not having any luck, so I'm hoping you might be able to point me in the right direction. Let's start with this fiddle...

http://jsfiddle.net/graycarper/W6nrX/8/

You'll see that I have a menu with many leaf nodes under the first three groupings (Venues, Departments, Types), but you can't scroll down to see all the leaf nodes because I've set overflow on body and html to 'hidden'. What I'd like to achieve is a scrollbar that's flush against the right side of the menu which will allow me to see all the menu leaves without scrolling the entire document. You'll see one of my attempts at doing this (by bounding the #menu with a fixed height and setting overlap-y to 'auto'), but that's not been effective, and I'm wondering if it's because of the various layers that the menu has.

At any rate, any help you can provide would be wonderful. Thanks so much!

-Gray

i create a simple example : http://jsfiddle.net/5rjg9/13/

it works just fine, but if you resize window while the menu is collapsed (in my case the menu is hidden)), it does not open anymore, i have to refresh the page

here a simple sample : http://jsfiddle.net/5rjg9/12/

As you can see i added a link in "Collections" item to google.
But if i click on it, it does not go

I added preventItemClick:false, but it does not help

Is there any way to display first level icons (as buttons) on bar when it collapsed?

It this case user need one action less to open needed menu. It is important in my application.

When direction is set to "RTL" and the menu is opened, the containersToPush's margin-left element is changed. It should be margin-right!

Hi, it's me again ^^

Found a problem, i put some input in the menu here is the code :

<input class="searchable form-control" placeholder="Recherchez un flux..." data-table="flux" data-champs="title"

name="search" type="text" value="">

The problem is when i click on it i can't get focus, it's like random... sometimes I click 10 times for finally got it (and then my input work perfectly) sometimes it's on third ..

Again did I miss something ? I've read your doc but didn't find mention of that.

Thanks again for your help.

Getting this error message in IE9 :

IE9 : Unable to get value of the property 'match' : object is null or undefined
jquery.multilevelpishmenu.min.js, line1, character 10553

Any ideas what's causing this?

I added this little useful snippen to code (createItem func):

if (item.data) {
    $itemAnchor.data(item.data);
}

for doing this:

var items = [];
items.push({
    name : t("tooltip." + action),
    icon: "fa " + icons[action],
    data : {
       action : action + "_current_obj"
    }
});
$("#menu").multilevelpushmenu("additems" , items , $addTo , 0 );

then:

onItemClick: (e) => {
  if ($(e.target).data("action")) {
    this.doAction($(e.target).data("action"));
  }
}

I think it is useful and can be added to repo, is it?

I want to add search input to menu as first element. Search results will be menu items. But <input type='text'> is not editable inside menu.

Hi,

A nice extension would be to display vertically oriented the name of the menu below the icon on the visible part of menu strip (not for the active menu, only for the collapsed menus).

Another nice extension would be to check for an attribute (e.g. imgsrc) that ponts to an image which will be used instead of the icon

Thx for considering this suggestions !

Kind regards,

Bart

Hi,

first of all I like to tell you that I like your menu very much. I´m doing my first steps in developing some Web-Applikation an your menu really fits my needs quite well.

But there´s something that I really can not figure out: When I put some content into the "pushobj"-container - for example a few lines of text and a text-hyperlink to some other Website - it´s not possible to click on the link. I can´t even mark the text with the mouse. I tried your demos and it seems like there is the same issue.

Can you please fix this or please tell me what am doing wrong.

Thank you

j.

It seems as though the reserved space for the menu to slide out is overlapping any body content and preventing interaction with it. Any ideas?

In the beginning of the script in code below you have a semicolon after 'arguments', but I think you meant to have comma there. The way it looks now, you have a global variable called returnValue, if I read code properly.
Thank you.

$.fn.multilevelpushmenu = function( options ) {
var args = arguments;
returnValue = null;

Hello,

After opening and closing the menu the first time, the menu will no longer close properly. The links are staying active and visible in the collapsed menu.

Here's an example
http://jsfiddle.net/SjSE7/

hi, i've make a simple button instead overlapwidth: 40px.
Links wich are under the .multilevelpushmenu_wrapper are not clickable beacause there is an area reserved for the menu i think. sorry for my english, but you can try to see what i say on this url : http://www.dashcam-shop.fr/mouldi/site4/

Facebook and twitter links are not clickable.
Do you have a tip to fix that ?

thx

Hi, this week I looked to adapt your awesome menu to a responsive website, but a wild problem appears.

The menu is behind the content, when menu doesn't interact with content, no problem, but when screen is very small menu just get hidden by content. So i tried to move it to the foreground with z-index and it worked.. Unfortunately when i did this the "menu_multilevelpushmenu" take the fullscreen foreground and block every interaction with content even with menu closed.

Do you have a solution ?

(I deleted the div who push the content, cause i can't have horizontal scrolling in my responsive)

Thanks again for your help and patience, Happy new year :)

Hello Sir,
Thanks for this wonderful multiple levels menu as i couldnt complete my website without it.

However,there is some issue in this menu while implementing it in bootstrap.When i included the code all works fine except some extra space between menu and left side of page.You can see it in the image below

When i gave margin-left a negative value in the css file it shifts towards left but when i reduced windows size,some part of menu hides itself as depicted in image below

It would be nice of you if you can provide some fix.

Thanks in advance..!!..

Is it possible to add some html above the menu?
For example a search field, and/or an image.
Thank you,
Andreas

If there is many items in menu, but vertical screen size is small and doesn't contain all of them, obviously I need to scroll. Naturally I want to touch menu and slide vertically, but instead I select item and it doesn't scroll. The only way to scroll is to touch screen outside the menu and slide there. But it not so natural and don't come to mind so fast. Can we get the desired experience?

Hello,
Thank you for a great menu!
I would like to separate click on the menu item and navigating into a submenu, clicking the ">".
That is, I would like to be able to catch an event when the user clicks
a menu item, for example "Devices" for example to redirect the user to another page.
In createItem() I would like to change to line
.text( item.name )
with
.html( "" + item.name + "" )
and at the end of createItem() I would like to add the following code
$( "#" + item.id ).click(function(e) {
//Do something here
stopEventPropagation(e);
});
What do you think about this?

Hi, I found your project very cool, and I 'm using it for one mine.

I meet a little problem when loading of my page with Chrome and Opera (good on ff), the Js load like 0.5s late and we got a "flash" with menu plain text without css in middle of the content before the js hooks the menu. Btw on Safari menu animations looks really slow but i didn't meet the same issue [edit] On safari close menu didn't work .

Did u have a solution ?

Thanks for this great menu anyway.

I got the files and tried pretty much all the options to avoid the flashing of raw menu contents before it construct the actual style and the menu appear. How would you stop that? Is there a trick to that - like to render the menu without the raw data flashing?

Thanks.

Window is not scrollable (overflow : hidden;) in my application. But menu can be larger than window size. So to make elements visible I have to:

1. calculate height of each ul
2. If it need - limit height
3. Then (if it need) - add scrollbar.
   And also I have to do it after every window resize.
   Example:
   
   How do you think is it possible to add this functionality into plugin?