adnantopal / slimmenu Goto Github PK

Hey Guys,

Great menu, only problem I have with it so far is that the Sub Menu Items Don't Collapse on iPad on the first go. Once I click it the arrow changes to up but the items don't collapse, then I click it again and the arrow goes down, then when I click again the arrow changes and the menu items disappear.

Cheers,
Rhys.

I cannot get slimmenu to follow links, rather than anchor tags.

For example, I want to add a "home" button to lead from a sub page back to index.html. Instead of following the link, it simply brings me back to the top of the page. But if I right-click and tell it to open in a new tab/window, it follows the link fine.

What's going on here?

Scrolling through the menu on Chrome for iOS collapses the menu. It is more evident when there are a lot of menu items, however I can see it even on the demo. Works fine in Safari for iOS.

Hello!!
Why menu is not 100% width? And submenu width different width?
https://monosnap.com/file/a5v9DBIC0D6RUfSsfLXhpr34ybT0y1.png

I am creating a WordPress responsive menu plugin , what can is use slimmenu jQuery for my plugin ?

Hello, im using slimmenu, but when the menu is open and i scroll down, it disapears... but just with mobile safari - do you have a solution for me?

http://brixner.ep-vorschau.at/

regards

If using slimmenu with submenus, the menu closes itself when I try to drag the page (to see opened submenue e.g.) even if the second-level-submenu is not opened yet, I cannot drag the menue. it closes. testet on the example page.

only appeats on multi-level-menues.

is there any chance you can fix it quick?

Could you, please, provide an example on how multiple instances are working? The inline javascript is based on a class, so thats doable.What about changing options like "collapserTitle" into something else for another menu on the same page? I need to port this to Drupal (not as a public module, but on my personal projects).
Please, advise.

thanks

I can't get this to work. The menu is just fully expanded. I have everything set up properly but no joy.

http://novalaska.com/rafting/alaska_wilderness_raft_trips/lake_creek

This is an issue I encountered while working on my CMS site's admin pages.

1. Below image shows the dropmenu when I first loaded the site:
   
2. Below image shows a black line instead of dropmenu when I resized the firebug window:

probable resolution:
I debuged the jquery.slimmenu.js file and found that every time the browser window is resized, resizeMenu function is called which binds the mouseenter and mouseleave events to the submenus(line 115 executes by default) while not removing the previous binding.

What I suggest is, we should remove the bindings first before binding them to the submenus.
On line 78 we can execute the below line:

$menu.find('li').has('ul').off('mouseenter mouseleave');

This has worked for me. :)

First off, great menu! I've looked at a bunch and went with this one.

Now, I want to customize it a bit.... I have a small main menu (with a bunch of sub menus) and don't want the collapse button to ever appear. Is there a way to make the vertical menu always appear once the right width is reached, without showing (and then clicking on) the collapse button?

Thanks for any help you can provide!

Hi,

Firstly thanks for your hard work and putting your plugin online for open use. It's definitely looking like a great candidate for a responsive design project I'm working on.

I have a problem though with setting up the menu using percentage widths to get a full width 'responsive' menu. I have 5 columns set at 20% with each, like this:

ul.slimmenu {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
ul.slimmenu li {
position: relative;
display: inline-block;
background-color: #AAA;
width:20%;
}
ul.slimmenu li ul li { background-color: #BBB; width:100%;}

As you'd expect, this doesn't quite do the job. In the lines below there is some styling relating to a negative right margin and the left border:

ul.slimmenu > li { margin-right:-0.3125em; border-left: 0.0625em solid #fff; }
ul.slimmenu > li:first-child { border-left: 0 }
ul.slimmenu > li:last-child { margin-right: 0 }

If I set the border-left to 0, the menu then fits into the full page width as desired on Chrome and Safari(windows) but not on Firefox or IE9. Opera seems to add its own border! In any case, I really like to keep the border, but I can't see a straight forward way to do this. Can you help?

Also, why is that negative 'margin-right' there?

Regards and thanks in advance.
Rich

Hey,

Wondering if anyone can help me out I have used the slimmenu jquery on my website but once I go below the set width defined in the activation, the menu goes completely white. And the expand button works once to open but then will not close. Here is my website url:

www.bhcreate.co.nz

Hopefully someone knows what I have done wrong?
Any help would be greatly appreciated.

Thanks
Ben

Slim menu collapses back onto the menu if page is scrolled down on Android Chrome browser. it makes the navigation impossible if i have long list of submenus.

it works fine on native android browser. i tested on different devices.

Please resolve the issue.

I was checking the example out and noticed that the animations are getting queued up instead of being stopped and queued again.

For instance enter/leave a button several times and you will see it expand several times until it stops.

to fix, check out:
http://api.jquery.com/stop/
http://stackoverflow.com/questions/2857998/stop-jquery-animations-stacking

Hello,
the menu seems not to work properly on mobile devices with IOS5 or lower.
It does slide down and immediately back up when I click the menu button.

The plugin works fine on IOS6 however.

Best regards,
JoHauns

Would be good to have some delay before hiding sub-menus in desktop mode, otherwise they are quite hard to use when there are multiple sub navigation levels

This menu code hasn't been updated since 2013. However there is a bug with how this menu behaves on Android and older iOS devices. In short, the slim menu closes every time the page is scrolled.

The issue is reported here:
#41, #38, #27, #21 (issues where the problem is reported)

There are two pull requests which are supposed to address the issue: #28 - July 2014, #38 - Nov, 2014 (pull requests that APPEAR to address the menu collapse issue)

I have tested both solutions.. Both work, but I am not clear as to which ONE of these solutions is the correct/right solution. The question now is will this repo be updated with one or the other or yet another (working) solution.

Because the code in the master repo is UNUSABLE for Android devices, and because there are template designers using this menu who may not have BOTHERED to see if a solution for this issue exists, I wanted to summarize the problem, link it to other reports, and finally post solutions for those who come to this repo looking for answers to this issue.

Clicking the drop down menu button when viewing the mobile version of the menu (on iPhone and Android) results in a flashing grey effect. I would like to remove this. This flashing grey effect does not occur when the mobile version of the menu is viewed on a desktop browser. Thanks in advance.

When the menu is collapsed to the narrow version, the submenus still open to the right and go straight off the side of the screen.

Trying to integrate this menu into me existing website. Had to remove a link to css reset (http://meyerweb.com/eric/tools/css/reset/reset.css) otherwise I would loose my css formatting, however this stops the menu from working.

Any ides on what to do?

I have have everything set up like and it works beautifully in Chrome, Firefox, etc. But the ancient piece of software called Internet Explorer gives me a script error. it says 'this property or method isn't supported by the object' and then it just simply doesn't do anything.
Note: I've implemented it in a WordPress Theme, so there could be an issue there but I have no idea where it lies.

Hi, Great menu but when resized the 2nd sub menu doesn't push the rest of the menu down and appears behind the parents.

Top work though!

Hi! Is there a way to change the height of the submenu li?
by javascript it puts 44px. I want to make a megamenu.

Is it possible?

thnks

when you click multiple times on the same link, it seems like it re-scrolls to the same area, should prevent the menu from acting if its already on the right spot + maybe add a delay to the response of the menu.

Example Menu collapses on scrolling.
On large lists it is not possible to reach lower entries.

Using iPhone5 iOS 8.2.

Hello nice plugin.

is it posible to auto close the menu after click on a item. because it is still open after a click.

Thanx for your work and sharing it.

I am only using one sub-menu, the menu names are quite long then the background box stretches to accommodate the words (to a degree) but the boxes are different sizes, looks fine when browser window is shrunk to activate mobile version, but on desktop it looks ugly. I tried adjusting the width in the CSS and then get the three items under each other but centered with different widths. How do I get them to be the same width? See image below.

Finally I've come across a solid and simple responsive toggle menu!

I was tinkering with the code and wanted to remove the easing effect so that the menu doesn't slide down and instead just opens. I noticed that after removing the jquery easing script (jquery.easing.min.js) the menu opens but doesn't close. I also replaced the easingEffect:'easeInOutQuint' with easingEffect:'null'; again the menu opens but doesn't close.

What's the proper method to remove the slide down?

Hi

Correct me if I'm wrong, but the Slimmenu does not seem to support keyboard navigation for the drop downs, is there plan to include this in the future or is there something I can quickly change/add to address this?

Many thanks

Pete

I have a top menu item with the text "Shows" and submenu items with the the text Episode 1, Episode 2, and further sub submenu items with even longer names.

It seems that the children and grandchildren inherit the width of the parent so the text does not fix and wraps around.

I tried to put white-space: nowrap; on the children li's but it messed with the layout of the submenus

Is there an easy fix of the issue with css. I can't set a fixed width cause I will not know the length of all the names as some will be added later.

Hi,
Is there way to set menu to be opened by default without need to be clicked on "collaps button" so that main categories to be displayed.

Thanks

Hey guys,

wanted to know how I could change the top left item of the mobile menu.
Currently it just is "MENU" , I want to change this to home (and make it clickable)
or change it with a logo.

How do I do this?

Thanks in advance!

Hey,

Awesome work. Looked at many, but settled on your great work.

Quick question. Is it possible to remove the dropdown arrows when the nav is at normal width (desktop version)? As I would just like the nav text without arrows, But obviously have them visible when the nav is taken below 800px?

Many thanks

When I test your demo.html page I only get a single level menu. The easing effects seem to work, I get a shimmer on mouseover but nothing else. Furthermore, when I test in responsive mode the overall effect is not responsive at all (see attached image). But your page on GitHub works great. Am I missing something here?

Preview is generated in Firefox 23.0.1.

Hi,

Maybe its just me, but I can't even get the demo to work. I just end up with this static menu. Am I missing something?

Thanks

It is possible to have the parent item show their child after clicking? Right now the arrow does exactly that. Just wondering how easy it is to change the function.
Thanks for the great plugin

Windows 8.1 IE11

sub/sub menu won't stay open. Press arrow, sub opens, press sub, next level appears and disappears when you take off your finger. Love the menu, very nice. Is it possible to size the arrow active space? on smaller tablets can be tough to activate menu without hitting the title link.

Thanks.

I am trying to add a searchform to my collapserTitle within WordPress using the following:

collapserTitle: '<?php get_search_form( true ); ?>';

however when I do that it comments it out like so:

<!--?php get_search_form( true ); ?-->

When viewing on touch devices... I open a submenu and if it is longer than the screen is high, when I try to scroll the menu collapses. On both iOS and Android so far as I can test.

I have a menu that incorporates a search input text into the slimmenu. On desktop resizing it works fine, but on mobile browsers the menu collapses when the input box is selected.

Hm.. something which looks strange to me:

I've got this code inside my menu:

<li>
    <a href="/de/mobile/fragen_antworten/">Fragen und Antworten</a>
    <ul>
        <li><a href="/de/mobile/fragen_antworten/">Seite 1</a></li>
        <li><a href="/de/mobile/fragen_antworten/">Seite 2</a></li>
        <li><a href="/de/mobile/fragen_antworten/">Seite 3</a></li>
        <li><a href="/de/mobile/fragen_antworten/">Seite 4</a></li>
        <li><a href="/de/mobile/fragen_antworten/">Seite 5</a></li>
        <li><a href="/de/mobile/fragen_antworten/">Seite 6</a></li>
        <li><a href="/de/mobile/fragen_antworten/">Seite 7</a></li>
        <li><a href="/de/mobile/fragen_antworten/">Seite 8</a></li>
        <li><a href="/de/mobile/fragen_antworten/">Seite 9</a></li>
        <li><a href="/de/mobile/fragen_antworten/">Seite 10</a></li>
        </ul>
</li>

But clicking on these links doesn't lead me to mydomain.com/de/mobile/fragen_antworten/, but to mydomain.com/de/mobile/fragen_antworten/#/de/mobile/fragen_antworten/

What did I do wrong?

Hi,

When we resize the browser window (Click Slim Menu --> Slim Menu 1.1 --> Slim Menu 1.1.1), the child menu will go under the "Slim Menu 2"

Hello all,

Has anyone experienced this issue? Can anyone shed some light? It seems pretty strange. It works on EVERY device but a non retina ipod touch.

Any assistance would be amazing!

Cheers

When I open my site with normal screen, the menu list still displays.

I'm trying to customize the behavior/appearance of slimmenu to accommodate a logo or header floated at the left of a container with the main navigation floated to the right, as I've described here: http://stackoverflow.com/questions/19062327/designing-a-collapsible-responsive-navigation-bar. I also have a jsFiddle work-in-progress here: http://jsfiddle.net/nickpish/Nmh9Z/18/

Ultimately, I'd like to place the main navigation at right, but make the collapsed/mobile menu display the nav items at 100% width beneath the logo/header when activated at the breakpoint, I'm struggling with the appropriate CSS to achieve this layout-- any suggestions are most appreciated.

Dear Team,

what is the best way to uses the slimmenu vertically? I already figured out to set the display mode of the li's to block instead of inline-block. This works, but I also want to move the lower regions of the menu down when opening submenus, so that the main menu items are always visible.

Any help would be appreciated!
Kind regards
Manteltraeger

Hi!

I wonder if it's possible to change font-size, only when you are in smartphone mode (320 to 800px)

Any tips or tutorial?

Thank you guys

The menu should show the items in the width of the parent element. display Inline block does the magic.

    init: function()
    {
        var $options = this.options,
            $menu = this.$elem,
            $collapser = '<div class="menu-collapser">'+$options.collapserTitle
            +'<div class="collapse-button"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></div></div>',
            $menu_collapser;

// start

        $menu.find('>li').each(function(){

            var max_width = $(this).width();

            $(this).find('>ul>li').each(function(){
                $(this).parent().show(); // zeigen, um die Größe berechnen zu können
                var width = $(this).width();
                if (width > max_width) max_width = width;

                var max_width_2 = 0;

                $(this).find('>ul>li').each(function(){
                    $(this).parent().show(); // zeigen, um die Größe berechnen zu können
                    $(this).css('display','inline-block');
                    var width = $(this).width();
                    if (width > max_width_2) max_width_2 = width;
                });

                $(this).find('>ul').width(max_width_2);

                $(this).find('>ul>li').each(function(){
                    $(this).width(max_width_2).css('display','block');
                });

            });

            $(this).find('>ul').width(max_width);

            $(this).find('>ul>li').each(function(){
                $(this).width(max_width);
            });

        });

// end

The slimmenu doesn't fit at same line (not responsive enough) with more than 5 parent li in first ul. Is there a solution to this?