[Pro] CSS Menus on mobile Chrome

Freeway
1

I have made a site that uses CSS Menus for navigation, and it works fine on my laptop using Safari and Chrome, but the menus do not link properly on Chrome for Android (latest version). It is not possible to click on any of the links. They do drop down but submenus are nopt sticky and none of the links work below the top level. There is one top level link (Site Map) which can be used as a workaround but I can;t figure out why this is happening.

http://bgfa.us

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Hi Bert,
I’ve been looking at your site on both my Android mobile and tablet and the menus do work but there are a little fiddly. First of all you have to know that they are drop downs (at the moment there is no visual clue that they are) and click and hold until the menu appears. All of this can be a little difficult as you can end up selecting the menu text or clicking on the menu heading which will simply reload the page.

I would suggest creating separate sub menu pages that contain the submenu items as links on the page. Select each of the main menu items (Exhibitions, Artists, Press, etc) and link these through to the new pages. Now if a visitor clicks on a main menu heading they will see the sub menu items in their own page. Obviously if they have a non-touch based browser (laptop, desktop etc) then they won’t see these intermediary pages and will simply use the drop down menu as normal.
Regards,
Tim.

On 1 Mar 2013, at 18:57, Bert Green wrote:

I have made a site that uses CSS Menus for navigation, and it works fine on my laptop using Safari and Chrome, but the menus do not link properly on Chrome for Android (latest version). It is not possible to click on any of the links. They do drop down but submenus are nopt sticky and none of the links work below the top level. There is one top level link (Site Map) which can be used as a workaround but I can;t figure out why this is happening.

Experienced Freeway designer for hire - http://www.freewayactions.com

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Hi Tim- Thanks for taking a look. I’ll consider making the intermediary pages, good idea.

I wonder though if maybe the problem is with Chrome mobile; it updated recently and I just noticed the links not working, I still cannot click on any submenus at all.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

I use CSS Menus across my site, and I must say they are VERY FIDDLY when I browse the site on my iPad. Give my site a try on your Android device:

As you can see, I have a very complex menu system. The upside is, the complexity yields convenient access to any info the user wants, from almost any page in my site. The other upside is that it works perfectly on a traditional computer with a mouse. But the downside is that it is not touch friendly at all.

Although Tim’s solution would work on my site, it would detract from the aesthetics of it. As such, I can only hope they could be a more touch friendly implementation of CSS Menus down the road.

–James Wages

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

I’m not sure how this could work, or what “more” would mean in this context. Apple cleverly figured out a way to shim the lack of a cursor. By attaching the mouseover event handler to the first touch, and the click handler to the second, they allowed them to coexist in the absence of an actual cursor. Without this hack, there would be no interaction at all. I suppose you could have click-and-hold to show the mouseover, but that’s just substituting one hidden thing for another.

Walter

On Mar 4, 2013, at 2:48 AM, JDW wrote:

I can only hope they could be a more touch friendly implementation of CSS Menus down the road.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Reply to James Wages: I went to your site on my Nexus 4 Android phone using Chrome and I have the same problem there as on my site. I can see all the drop downs and clicking on them gives me no result. Only the top level links work.

On my laptop, also using Chrome, the links work properly.

And I agree that the aesthetics of the site are affected by Tim’s solution. I switched to CSS menus a while back to avoid this very problem, and removed the intermediary pages, thinking that this method would be more useful.

I have to think this over. Not a lot of my traffic is mobile so it’s not critical but I would like mobile browsers to have the same experience.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Bert, this issue is a growing concern for me in light of the fact that Google Analytics shows me that the number of mobile users browsing my site is steadily increasing, and as been for more than a year now. I therefore cannot help but be curious if there isn’t a way for SoftPress to modify or otherwise improve CSS Menus, such that they will play just as well with a finger tap as they do with a mouse click.

A lot of us here work as a one-man team, using Freeway to build and maintain expansive sites, and it’s just too much extra work to build a separate site dedicated for mobile only. And as we’ve been discussing, adding redundant links to an existing page that are basically only for mobile users tends to look tacky.

Surely there must be something that can be done to improve CSS Menus!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

JDW, I agree. I am a one-person operation and have built my own websites since 1996 but I am starting to feel that the technology is getting much harder to manage. Freeway has been great, and it would really be ideal to have my sites work as well on any platform, even if they are not fully optimized for each.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

I did an experiment and uninstalled the updates to Chrome on my Nexus 4 (Android 4.2.2), downgrading from version 25 to version 18 (the stock version). Guess what? The CSS menus work perfectly on the earlier version.

So it looks like this is a Chrome problem, they broke the functionality with the most recent upgrade. I’ll report it ot Google and see if they fix it in a future upgrade.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

Yeah, my accordion action works fine in Firefox and Safari, yet Android and Chrome is dead. Same with the above writers, my CSS work only on the main header… any tips or future work arounds?

Many thanks in advance.

wwww.neiltanner.com

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

11

I should give the specific pages, my FAQ accordion does not expand, and Services pages (and any on that CSS menu to the right) do not work on Chrome or Android.

http://www.neiltanner.com/faq.html

http://www.neiltanner.com/services.html

Again, any tips or redesigns are welcome. And will there be an update to Freeway itself?

Many thanks!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

12

The headline on this page is an H2, and you’re also using an H2 as the header tag for your effect. That’s suspicious to me. Generally speaking, you should choose a unique-to-the-container-element tag as the header, and another for the disclosable content tag. These should be the only uses that you put those two tags to within that HTML box. If you want other content on the same page to use those tags, simply put that other content in a different parent HTML box.

You also have a lot of span tags and other inline bits in your accordion, owing to the way you’ve styled the content. That’s probably another part of the problem. Try making your accordion again, but stick to completely unstyled text. Don’t try to adjust color or spacing or size at all. Just make sure that it works, not that it’s pretty. It will work.

Next, to add the style you need, create your styles from the outside in. Rather than creating an inline style, by selecting the text and styling it in the Inspector, click once on the HTML box that contains the accordion effect and note the ID of that box. (This will be called Name/ID in Freeway 6, and Title in all other versions, and it’s found on the Inspector in the left-most tab.) Let’s say it’s called myAccordionBox.

Now if you are using the h2 as your header, make a new style in the Styles palette with the Tag attribute set to #myAccordionBox h2. Tab into the Name field and make sure to remove anything Freeway has helpfully entered there for you, and finally, tab out of that field so the lack of name “sticks”. After you’ve done this, use the rest of the styling tools in the New Style dialog to create the look you want for the headers. Bold, orange, a custom font – whatever else you like. Okay the changes and then preview in your browser (you won’t see anything different in the Freeway design view). Do the same for #myAccordionBox p if you are using the P tag as your disclosable content tag.

Once you have made these changes, you will find that your accordion still works, and now looks the way you want it to as well.

Walter

On May 24, 2013, at 12:12 PM, Neilster wrote:

I should give the specific pages, my FAQ accordion does not expand, and Services pages (and any on that CSS menu to the right) do not work on Chrome or Android.

http://www.neiltanner.com/faq.html

http://www.neiltanner.com/services.html

Again, any tips or redesigns are welcome. And will there be an update to Freeway itself?

Many thanks!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

13

Yippeee! The accordion works now in Chrome and Android! I ripped the old header out just in case, and made its own html box, plus did the creation of the new styles and then applied them to the respective sentences. I didn’t understand the # and left it off, was that just to make it appear first in the styles list?

Thanks again Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

14

I didn’t understand the # and left it off, was that just to make it appear first in the styles list?

Absolutely not!

The hashtag # is there so that the CSS rule targets an item with the ID of whatever follows - in Walter’s example it is ‘myAccordionBox’ in yours it may be Item1, Item2 etc. etc.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options