I have the menu working beautifully on www.keerim.co.uk and tested on multiple devices.

There are two features that I would definitely implement, given that I want the option of presenting the tablet portrait display either as Superfish or Mobile, depending on the site.

The following apply to left drawer menus.

1. Multiple menus, which I know that you are looking at. However my perfect solution would be to be able to attach widths to media queries. I would like to have 60%-70% width on a phone and 20%-30% width on a tablet. That would make the system future-proof.

2. Many people will apply a percentage width to the mainPageSelector in mobile mode. In my case it is 96% on the #page. If #page is used for the selector this results in a gutter between the left drawer and the content. If the javascript applied an inline style of 'width: 100%;' the gutter would not appear. As a front end specialist I can't find a suitable CSS solution to this issue.

Great work - well done.

CommentFileSizeAuthor
#14 mobile.jpg21.43 KBtonytr54
#13 superfish-mobile.png27.82 KBtonytr54

Comments

x7ian’s picture

x7ian commented

Hello Tony,
Thank you for testing the module and for the feedback.

1. So this is an interesting point, very useful and important. Something i haven't thought of.
So i think the best solution here (as you suggested), would be to wait for the multiple menus solution to be implemented. In that case we would be able to create two different settings, as if it where for two different menus, but with the same settings only changing the width. This would also give us the chance to change any other settings like for instance using a mask on mobile version and not using it on tablet, or event using a different effect for different devices.
Great sugestion, im sorry to say this will take some more time, not so very much but a little more, cause i see some issues to solve with the multiple menu solution and with this new ideas i think there will be some more work on it. For this reasons im projecting the multiple menu solution to come with the version 2.x of the plugin. But stay tunned cause its comming soon!

2. In the case of your site www.keerim.co.uk, you are reffering to the gap between the menu and the content, so when the menu is opened, the mask is over the content so if you click on content it closes the menu but if you click on that small gap it wont work.
So i guess the solution would be to make the mask cover everything that is not the menu, covering all content, not only the content container but also other things that would be around it.
Ive been thinking of a way to make the drawer work without having to specify the mainPageSelector field, i guess it would involve sliding all the body, not just the content container, something that ive been trying to do without success. In fact that was the original idea, right from the start but after trying a lot, the only solution that i found was to add the bloody mainPageSelector field. But im not giving up on that one. For now it needs the mainPageSelector but im still trying other things to find a solution and get rid of that field and that would solve the gap problem once and for all. This is more of the way the drawer works, to explain a little more: There are two elements, The menu and the content. How do we create a drawer? We can give 'position:relative' or 'position:absolute' or 'fixed' on both or diferent on each of the elements. And then to make the drawer work use an animation on 'left' or 'margin-left' on both elements or different on each, and so on testing all posibilities to create the perfect drawer.
Any sugestions on this?
As you see there is another issue with the left drawer effect here https://drupal.org/node/2004578, something that i think is related to this issue too.

Thank you for testing,
you're really helping a lot on making this module better.

x7ian’s picture

x7ian commented

http://drupalcode.org/sandbox/x7ian/1996698.git/commit/80203c9

I fixed hte problem with the gap between content and the mobile menu when the menu is open, giving the mask a fixed position. Also the horizontal scroll has been removed. I think it looks great now.
@tonytr54 you can test the last release of the module to verify it works now.

tonytr54’s picture

tonytr54 commented

A couple of quick tests and I have deployed to kmf.keerim.eu. It wouldn't work on this site with a page width set to 96%. The content was fixed to the left and on clicking the mask it went full width. By commenting out lines 386, 485, 498, 631, 729 and 817 the result is that it works in a browser. On an iPad and Nexus 7 the menu works well, but tapping the mask cause the content to animate quicker than the menu. On a Galaxy S111 the menu works properly, but the content either partially or completely disappears. I'll try other configurations.

tonytr54’s picture

tonytr54 commented

The CSS causes XP/IE8 to not show a menu at any width. It has to be cured with, in my case, Modernizer and css3-mediaqueries.js. Plus some adjustment to the media queries - have to use '@media screen and (break point)'. You need 'screen' for IE8, then Firefox fails - so must use 'and'. Is it important - maybe until Microsoft switches off support? I still have corporate clients with legacy builds (XP/IE6) where I must be careful, but hopefully they will change! It's working on www.keerim.co.uk. Still no cure for the Galaxy S3 problem, so still using earlier version with the gap. I'm happy with that.

x7ian’s picture

x7ian commented

#3 so there is a problem when setting a width for the page container since the Javascript at mobile navigation is manipulating its width. hmmm! Leme think a bout this, ill find a solution.

The mobile navigation library has a condition so that if it is in IE8 or IE7 the mobile functionality doesn't show up. IE8 and lower don't support responsive development. Besides none will ever use ie8 on a mobile device.
The current version has a bug, lemme fix that!
:-S

x7ian’s picture

x7ian commented

Tony there is a new release at the sandbox with some enhancements on the way the left drawer works.
Please test it if you can and post here your impressions.
Thank you for all your feedback, is been very helpfull.

tonytr54’s picture

tonytr54 commented

Christian - Out of the country at present. I will download a latest release and test if I can. If not I will come back to you in two weeks with an analysis. I published a five breakpoint, responsive site including 'mobile navigation' today. It's only a simple brochure site - www.phc.ie

tonytr54’s picture

tonytr54 commented

I've had a quick look. The left drawer works perfectly in all systems I tried, except a Galaxy S3. I use 96% width on #page for mobile which gets overwritten in all browsers when the menu slides back. That's no issue, because the javascript is easily changed to allow for the original page width. However, whatever I do on a Galaxy S3 the menu slides in, the page content disappears and when the menu slides back the browser freezes and crashes. It doesn't happen on the earlier version. I wouldn't bother with trying to compensate for people like me who set a different page width.

Latest version - kmf.keerim.eu - fails in Galaxy S3 native browser. Opera & Chrome OK - Dolphin & Firefox not tested.

Earlier version - www.phc.ie - works perfectly

tonytr54’s picture

tonytr54 commented

The Galaxy S3 problem is definitely the native browser. Now tested in Chrome, FireFox and Opera all of which work well. The native browser and Dolphin, which I guess is at the back of the native, both fail identically.

It would be interesting to know whether a Galaxy S4 works.

x7ian’s picture

x7ian commented

@tonytr54 Thank you for the testing and the feedback.
I added the information for the Samsung Galaxy issue on the tested conditions issue #2025011: Tested conditions .

Do you mind if i add www.keerim.co.uk and www.phc.ie sites to the Mobile navigation project page https://drupal.org/sandbox/x7ian/1996698 at the Websites using this module section?

Tanx for all! ;-)

tonytr54’s picture

tonytr54 commented

No problem. I'll let you know when there more sites.

tonytr54’s picture

tonytr54 commented

I think that you need to put up absolute URLs!

tonytr54’s picture

tonytr54 commented
StatusFileSize
new superfish-mobile.png27.82 KB

I have now been asked several times whether it is in your plans to produce a menu that is simply a fully expanded Superfish? See attached image I've mocked up of a draw menu from the right.

The CSS would be easy. How difficult would it be to modify the existing javascript, or produce another case?

I'm not convinced by their arguments, but designers seem to think that it is an important option.

tonytr54’s picture

tonytr54 commented
StatusFileSize
new mobile.jpg21.43 KB

I've answered my own question. I have used the latest code to produce a Basic menu, Drawer Right and styled it. It works very well.

I have retained the active classes and now it looks good and works well. The image shown is before I styled the active links, but I can't change it.

x7ian’s picture

x7ian commented
Issue summary: View changes
Status: Active » Closed (fixed)

Please refer to the official Mobile Navigation Project page.
https://drupal.org/project/mobile_navigation

Checkout the 7.x-2.x Roadmap:
https://drupal.org/node/2204499

drumm’s picture

drumm
he/him
Location NY, US
commented
Project: » Mobile Navigation
Version: » 7.x-1.x-dev