Scroll inside menu not possible

[Graahf]

Hey :)

Great plugin, but when the number of children excess the screenheight, it's not possible to scroll in the menu, to get to the last element :(

[vcoppolecchia]

Hey @Graahf, I think I can help here.

Inside the file slide-menu.css you can see this CSS property:

.slide-menu {
    …
    overflow: hidden;
    …
}

I managed to solve the "issue" you mention this way:

.slide-menu {
    …
    overflow-x: hidden;
    overflow-y: scroll;
    …
}

This way you're basically telling the menu container to scroll in the y (vertical) axis when the content is taller than the viewport height.

Extra informations (not mandatory to solve your problem): you can edit the slide-menu.css file or the slide-menu.scss SASS file; you'll find both the files inside the npm package. Personally I've copy/pasted the .scss file and I'm compiling that one with all my others SASS chunks instead of editing it directly in the node_modules/@grubersjoe/slide-menu/ folder.

Hope this will help you, bye!

[grubersjoe]

As @vcoppolecchia says a overflow-y: auto CSS rule for the .slide-menu container solves the problem. However, the whole menu will be as tall, as the longest (sub)menu then. So the user can still scroll a lot, if not all menus have the exact same height (which is very unlikely).

So I guess, it might be a good idea to dynamically set the height of the current menu container via JS. This way the user would only have to scroll, if the menu is actually taller than the available screen space. I'll look into it, when I have time.

[nickfmc]

I ran into this issue with having a div below my menu and the menu going overtop of it. this would actually be really easy to solve with your api if you could add a class to the visible menu ul currently there if your nav is 3 deep then you will have something like this

<ul class="slide-menu__submenu--active"><li><ul class="slide-menu__submenu--active"><li>current menu</li></ul></li></ul>

If you could do something like this, it would be much easier to grab the height of the div.

<ul class="slide-menu__submenu--active"><li><ul class="slide-menu__submenu--active slide-menu__submenu--inview"><li>current menu</li></ul></li></ul>

then simply something like this would work to adjust the menu
menuElement.addEventListener('sm.forward', function () { var ulheight = jQuery('.slide-menu__submenu--inview').height(); jQuery('#my-menu-wrapper').css('height', ulheight + 30 ); });