Superfish dropdown support for iPhone and iPad in portrait mode

Its a feature of the the theme, are you asking for this to be changed?

That depends on how you setup your menu structure, I cannot be aware of that.

How does hover work in iPhone, because surely if you click/tap then that link is going to open, right? Am I wrong here?

Superfish has been experimenting with a long-tap for hover, but afaict its quite buggy.

I think the way this is done in Corolla is crappy anyway, the menu should transform into a select list or something similar, or I was thinking about this idea of hiding the entire menu behind a single "menu" button, when you tap it flys open to reveal the entire menu structure in an overlay type of thing.

What is your Superfish configuration for the horizontal menu block?

I need the whole configuration, not just a part of it, Superfish has many more options and features, what have you set for those if any?

If you just open all the option and snap a screenshot, that would be fine.

The thing with the button probably will never work with Superfish since it injects its own dynamic classes to show and hide the menu depending on user interaction, but it can work with a standard menu - the only real way around this would be to bake Superfish into the theme, which I am considering doing, but then its very hard to match the sorts of features the module has.

He he, I wish, you cant do things like that without access to the OS, aka building an app, or loading a shed load of JS.

Subscribing

Hey Guys,

This is what I do for D6, Hope this helps. Obviously some things may need to be altered slightly for D7.

First I created a new node with the title of No Link, so I point links to this node when I want the link to not be clickable, such as a parent link. This is needed for mobile or else when a user taps the parent link, it will just go to the link instead of allowing the user to see the drop down (sometimes you get lucky and it shows the drop down, but not for all devices)

So create the page, then grab the node ID and link the parent link to that. Now in your template.php, add this:

<?php
function themename_menu_item_link($link) {
  if (empty($link['localized_options'])) {
    $link['localized_options'] = array();
  }
  if ($link['type'] && $link['href'] == 'node/id') {
    return '<a href="javascript:void(0)" class="nolink">'. $link['title'] .'</a>';
  }
  else {
    return l($link['title'], $link['href'], $link['localized_options']);
  }
}
?>

this will place the standard javascript:void(0) into the string so it won't try to load anything. Hope this helps someone. I should note that you only need to replace the 'themename' and the 'id' in this script so they match your setup.

The only issue I am having is how to close the menu if you decide you don't want to see it anymore. Can't get it to close on another tap or tapping outside of it.

TravisJohnston - cant be done afaikt in Drupal 7 due to URL validation, which is a huge PITA, there are other snippets and examples how to do this sort of thing in the handbooks, however, I have no idea what your post has to do with this issue.

Jeff - My post was related to the original issue:

I am unable to view menu items below the top level when I am viewing my site in either:
1. iPhone
2. iPad in portrait mode

CSS/JS dropdown menus on mobile can be difficult, and its what I had to deal with recently with Drupal. So I offered my solution that I used, which isn't project specific. My solution is being used to eliminate the parent link but keep the ability to click on it and view the menu items below it, thus the original issue. Sorry if it seemed like spam or something.

I'm going back to what I mentioned in #3, I think this is the real way forward, to fix this properly and get some really decent solid styles in there for mobile devices.

I think the way this is done in Corolla is crappy anyway, the menu should transform into a select list or something similar, or I was thinking about this idea of hiding the entire menu behind a single "menu" button, when you tap it flys open to reveal the entire menu structure in an overlay type of thing.

Bumping to 3x, do it there first as part of the upgrade and backport if it makes sense to.

bjlewis2,

This can be done with JavaScript and setting to open li.expanded OnClick, and then it will close it when the user clicks it again.

I am currently using that in addition to the script I included above and it works great. Again... D6

Yup, in D6 you could do stuff like that really easily, I actually have a "click menu" JavaScript (jquery, works perfectly) but its this infernal issue of how to create top level menu items in D7 that just have # as the anchor target, something I need to solve or find someone who has worked on this more than me and has solved it.

Hmmm seems theres http://drupal.org/project/special_menu_items

IMO what needs to happen is that when the menu shows in smartphone view, when drop-down stops working, the 'show as expanded' (when enabled) works - which it does not at present - so that child items are listed, indented, beneath the parent.

You can see what I implemented on this site, when viewed in mobile its a single menu item, but, heres the catch - this is really hard to automate and will not work with Superfish. I implemented a custom "click menu", which I think is a better interaction. Note that you need to refresh the page if you just scale down your browser.

That is great, and it would be great to see it in Adaptive Themes. TBH I got the idea from Pagelines / iBlogPro5 WP framework/theme which I had to use for a couple of clients e.g. http://macmousetamer.com (currently there are no child items, but they would appear intended in same colour). They do something similar which appears without refresh.

Yeah you can do without refresh, but it takes more JS and an event listener which we didn't want to use due to performance issues - we want things as fast as possible, and here's the reality, the only people who re-size browsers when looking at responsive designs are developers.

I would appreciate guidance about how to disable the menu from being responsive for now.

I insatalled Adaptivetheme 7.x-3.0-rc6. Hugely impressed. However, using the option to disable responsive stylesheets does not stop superfish from changing when screen is resized. Site: http://skateinstructor.com

bjlewis2 - let me think about it for a while, I will look at some other ways of doing this, quite possible by not using Superfish at all and doing it more like Fusion does it - keeping it all in the theme and maintain complete control over markup and JS, most likely use the click menu interaction (many popular sites now use click interaction, such as Twitter).

John_B - I'll need to look at that, what version of Corolla are you using, when Corolla 3.x ships it will be switched off automatically because none of the responsive stylesheets will load (I need to check the status of that port).

Thanks. In the dev version of Corlolla 3 this does not seem to be working differently. In any event it does not seem to be a solution because when I manually disable the responsive stylesheets, then resize the browser below a certain size, my menu list items instead of switching to vertical, simply disappear. I guess there is something I am missing here.

What are you missing, simple: dev version..., also: when Corolla 3.x ships....

One other point, really a separate issue, when I disable generated responsive files in Corolla using the Adaptive themes 3 rc6 it also disabled my genreated colour settings file.

I can't deal with many different questions and reports in one issue, so I am closing this, taking the suggestions and ideas and will work on this at some stage. I may open a new issue but for now this is closed as it has moved too far away from the original focus to be useful and easy to manage (and I need easy to manage).

Thanks bjlewis2 for your excellent feedback, John_B please open your own issues - you are hijacking this thread in more ways than one.