DivaVocals:

Boy this whole responsive thing is a LOT of work.. :laugh: Lots of stuff to take into consideration.. I'm having to re-examine ALL the appearance mods I normally use.. Especially all the mods which have actions (like on hover) which are not supported by mobile devices..

I'm still researching and narrowing down the menu I will use.. I will totally share with you when I find something suitable..:smile:

The issue with that Anne is the larger touchscreen devices which may have the SAME screen resolution as a desktop computer (like my Netbook or Surface device, and even my Android tablet).. I don't necessarily want to replace the mega menu with the responsive drop menu for all devices.. I rather like the mega menu.:smile: I think the solution for me will be a mega menu presented on larger mobile/touchscreen devices which supports onClick versus onHover actions.

Basically I'm looking for a responsive mega menu similar to the one you are currently using, but I need one that does more than simply use media queries to detect screen resolution.. I would prefer that the menu also detect whether or not the viewing device is a mobile/touchcreen device and present an alternate version of the mega menu which supports onClick actions. That kind of functionality requires some javascript or jQuery magic to make it work.

Ideally this would mean that if the device detected is a mobile/touchscreen device, and IF this device is one of the larger mobile/touchscreen devices (meaning that it will not hit one of the media queries which presents the responsive drop menu), THEN present a mega menu which the action for the menu will be an onClick action versus onHover.

Yes, but for a free template package, I think that dropping back to a simple drop down menu that works on all touch screen or full screen devices is an acceptable solution ;) For those who want a more custom solution, they can always hire a programmer/designer to provide one.

Let me know if you find a good mega menu sub that can possibly be incorporated into the free template packages ;)

Thanks,

Anne

picaflor-azul:

Yes, but for a free template package, I think that dropping back to a simple drop down menu that works on all touch screen or full screen devices is an acceptable solution ;) For those who want a more custom solution, they can always hire a programmer/designer to provide one.You get no disagreement from me on this point..:smile: and for RixStix, this might be a viable solution for him as well.. I'm not so sure that this is what my client will want which is why I am seeking an alternate..

I am going to put some effort into seeing if I can avoid having to hire someone and see if I can find an existing solution which meets my needs.. (as you know the web is FULL of free solutions if one is willing to do some digging.. :laugh:) BUT if I am unable to find something suitable, I have no issue paying a developer to come up with a solution that matches my spec/needs

picaflor-azul:

Let me know if you find a good mega menu sub that can possibly be incorporated into the free template packages ;)If I do I will for sure let you know!! :smile:

Anyway I don't want to hijack your support thread anymore on this topic.. If I find something that is helpful/on topic, I will share with the class..:smile:

Think of tablets and phones like wendy's and taco bell. Simple, easy and fast.

While the on hover mega menus are a great functions for the desktop. The on click function will be needed for tablets and an even simpler toggle menu for phones.

Here are some pretty to implement responsive navigation examples: http://responsivenavigation.net/

rbarbour:

Think of tablets and phones like wendy's and taco bell. Simple, easy and fast.

While the on hover mega menus are a great functions for the desktop. The on click function will be needed for tablets and an even simpler toggle menu for phones.

Here are some pretty to implement responsive navigation examples: http://responsivenavigation.net/Boom!! that's it.. hence what I am after.. the best of ALL worlds.. :smile:

So I may have stumbled upon a solution accidentally.. (okay okay.. so I needed another set of eyes to help me with this "revelation":laugh:) HA!.. So simple I can’t BELIEVE I MISSED IT!!! On my test site: http://zentestcart.overthehillweb.com/, I replaced the top level link where there were items "under" the top link with a "#", and “Bob’s yer uncle” the daggone mega menu now works on both touchsceen devices and desktop devices WITHOUT javascript.. On touchscreen devices (Android tablet and smartphone), the menu requires an onClick action and there is no weird half hover thing happening.. and on desktop devices onHover still works.. I can’t test this on an iPad or an iPhone (don’t own one).. I assume (hope) it will work the same..

Your mileage may vary, and I'm still trying to figure out if there is a downside to this (not seeing one yet).. Opinions???

TNX for all the comments from everyone. Spending money is always a reasonable option when a person comes to the end of their technical abilities. To me, it seems to be a problem if a responsive template only has full functionality when viewed on a desktop monitor. I've been (and will be) tied up with production work for a few days to come, so working through options are a week or so away for me.

DivaVocals:

Your mileage may vary, and I'm still trying to figure out if there is a downside to this (not seeing one yet).. Opinions???

Not that it would be much of an issue, the mouse scroll button seems to be disabled on your test site.... but then, touch devices don't have a mouse, do they? I'm curious to see the effect tomorrow when I get back to the Windows tablets, both Pro and RT

RixStix:

TNX for all the comments from everyone. Spending money is always a reasonable option when a person comes to the end of their technical abilities. To me, it seems to be a problem if a responsive template only has full functionality when viewed on a desktop monitor. I've been (and will be) tied up with production work for a few days to come, so working through options are a week or so away for me.nods in agreement:yes:

RixStix:

Not that it would be much of an issue, the mouse scroll button seems to be disabled on your test site.

Well the disabled scroll seems to be a function of the template I'm using on the test site.. (same behavior is evident on the demo site for that template) The disabled scroll aside, I was only testing the mega menu.. I've NEVER tried to sort out the scroll button issue since it's a TEST site.. So I didn't much care why this particular issue was happening:laugh:, and besides tomorrow I could blow away the whole thing and start over.. shrug

RixStix:

TNX for all the comments from everyone. Spending money is always a reasonable option when a person comes to the end of their technical abilities. ** To me, it seems to be a problem if a responsive template only has full functionality when viewed on a desktop monitor.** I've been (and will be) tied up with production work for a few days to come, so working through options are a week or so away for me.

Not that it would be much of an issue, the mouse scroll button seems to be disabled on your test site.... but then, touch devices don't have a mouse, do they? I'm curious to see the effect tomorrow when I get back to the Windows tablets, both Pro and RT

Well found the chink in the armour.. Had to change all the <a href="#" class="drop"> to <span class="drop"> otherwise you are redirected back to the home page every time you click the menu.. But even with this change, this is not the fully the right solution.. If you click on a product category with sub categories, you will be directed to the parent category before you can click on any of the subcategories..

The right solution is going to need javascript or jQuery to detect mobile/touchscreen devices and apply the correct behavior to the mega menu based on device.. It's clear to me that CSS only solutions are not going to provide this kind of functionality..

Creating different menus for different devices is very easy.

Anne, I apologize for the hijack of your support thread. Last post regarding this.

Take a look at the responsive classic to see how swapping the category tabs for a select is done.

Take a look at the responsive cold steel to see how the product listing header is swapped for the SNAF filter.

Simply using the minWidthHide and minWidthShow CSS classes at the appropriate CSS media query handles swapping with ease.

Keep the current mega menu for desktop.

Using minWidthHide and minWidthShow CSS classes to hide (ids and classes for the on hover CSS) and adding new (ids and classes for the on click CSS)

Example of new on click link

Then using minWidthHide to hide both above and minWidthShow for the toggle menu on phones.

I have several new responsive plugins, just trying to find the time to get them packaged up.

RixStix:

To me, it seems to be a problem if a responsive template only has full functionality when viewed on a desktop monitor.

I just wanted to note that I can not test all touch screen devices in existence. On the list of handheld devices I have tested my responsive free template packages on, the only place where the mega menu is shown in on the full screen resolution of a desktop. On the tablets, ipads, and smaller the menu always switches to the touch friendly menu. Your's was the first time I saw the full resolution with the mega menu showing on a hand held device. Since this has been brought to my attention, I have been working on a solution.

Thanks,

Anne

rbarbour:

Example of new on click link

<a id="WHATEVER" href="<?php echo zen_href_link(FILENAME_DEFAULT, zen_get_all_get_params()); ?># " onclick="('');return false;">

Then using minWidthHide to hide both above and minWidthShow for the toggle menu on phones.
.

Does this mean that I just need to make this change to the mega menu links to make them touch friendly? If so, that would be really great!

Thanks,

Anne

rbarbour:

Creating different menus for different devices is very easy.

Anne, I apologize for the hijack of your support thread. Last post regarding this.

Take a look at the responsive classic to see how swapping the category tabs for a select is done.

Take a look at the responsive cold steel to see how the product listing header is swapped for the SNAF filter.

Simply using the minWidthHide and minWidthShow CSS classes at the appropriate CSS media query handles swapping with ease.

Keep the current mega menu for desktop.

Using minWidthHide and minWidthShow CSS classes to hide (ids and classes for the on hover CSS) and adding new (ids and classes for the on click CSS)

Example of new on click link

<a id="WHATEVER" href="<?php echo zen_href_link(FILENAME_DEFAULT, zen_get_all_get_params()); ?># " onclick="('');return false;">

Then using minWidthHide to hide both above and minWidthShow for the toggle menu on phones.

I have several new responsive plugins, just trying to find the time to get them packaged up.

Okay.. playing the devil's advocate here, I have some questions.. Are media queries going to REALLY be enough??? Why not include javascript to detect when the device is a touch screen device versus a desktop device?? How does this code distinguish between my 10" tablet and my 10" netbook?? Which device will use an onClick action and which one will use an onHover action?? How does this code know when I am viewing from my HP - ENVY TouchSmart 23" Touch-Screen All-In-One computer versus my HP desktop computer with a 23" monitor??

picaflor-azul:

I just wanted to note that I can not test all touch screen devices in existence. On the list of handheld devices I have tested my responsive free template packages on, the only place where the mega menu is shown in on the full screen resolution of a desktop. On the tablets, ipads, and smaller the menu always switches to the touch friendly menu. Your's was the first time I saw the full resolution with the mega menu showing on a hand held device. Since this has been brought to my attention, I have been working on a solution.

Thanks,

Anne
I agree.. There's no way to test for ALL devices.. I personally don't own a iPhone or a iPad.. So while I could have my client's who own these devices test things for me, or I could enlist friends and family who own these devices to help me test, this isn't really a realistic or reliable means to test..

What about a device independent testing tool like the Responsive Design Mode tool that comes as a part of the Web Development tools built in to the latest versions of Firefox. The Responsive Design Mode tool will allow you to test what your site looks like a certain resolutions.. Couple that with the Web Developer tools other features which will allow you to tweak your stylesheet live and see what those changes yield before you add them to your stylesheet. The tool covers the most common device resolutions, and allows you to enter in custom resolutions if the resolution of the device you are testing isn't included.

Then there's a whole slew of site's with webbased responsive testing tools popping up:
http://beta.screenqueri.es/
**Brief Description: *Pixel Perfect Media Query Debugging Tool Test Responsive Designs Across 60+ Device Viewports. Also allows you to enter custom resolutions
if the resolution of the device you are testing isn't included.
This one rivals the functionality of the FireFox Responsive Design Mode tool.

http://mattkersley.com/responsive/
**Brief Description: **This tool has been built to help with testing your responsive websites while you design and build them. You can enter your website's URL into the address bar at the top of this page (not your browser's address bar) to test a specific page.

http://www.studiopress.com/responsive/
**Brief Description: **This tool has been built to help with testing your responsive websites while you design and build them. You can enter your website's URL into the address bar at the top of this page (not your browser's address bar) to test a specific page.

picaflor-azul:

On the list of handheld devices I have tested my responsive free template packages on, the only place where the mega menu is shown in on the full screen resolution of a desktop. On the tablets, ipads, and smaller the menu always switches to the touch friendly menu. Your's was the first time I saw the full resolution with the mega menu showing on a hand held device. Since this has been brought to my attention, I have been working on a solution.
I wanted to add to this that on my tablet (Samsung Galaxy Tab 2), the mega menu displays the full menu in landscape, and a "partial" mega menu in portrait. This is just fine except for the onHover vs onClick "issue".. On my LG Optimus Pro smartphone, the mobile menu displays in both portrait and landscape.. The Samsung Galaxy Tab 2 tablet isn't what I'd consider a terribly LARGE tablet at all.. In fact it's the size of my 10" netbook. (which also displays the mega menu at full size)

DivaVocals:

Okay.. playing the devil's advocate here, I have some questions.. Are media queries going to REALLY be enough??? Why not include javascript to detect when the device is a touch screen device versus a desktop device?? How does this code distinguish between my 10" tablet and my 10" netbook?? Which device will use an onClick action and which one will use an onHover action?? How does this code know when I am viewing from my HP - ENVY TouchSmart 23" Touch-Screen All-In-One computer versus my HP desktop computer with a 23" monitor??

I agree.. There's no way to test for ALL devices.. I personally don't own a iPhone or a iPad.. So while I could have my client's who own these devices test things for me, or I could enlist friends and family who own these devices to help me test, this isn't really a realistic or reliable means to test..

What about a device independent testing tool like the Responsive Design Mode tool that comes as a part of the Web Development tools built in to the latest versions of Firefox. The Responsive Design Mode tool will allow you to test what your site looks like a certain resolutions.. Couple that with the Web Developer tools other features which will allow you to tweak your stylesheet live and see what those changes yield before you add them to your stylesheet. The tool covers the most common device resolutions, and allows you to enter in custom resolutions if the resolution of the device you are testing isn't included.

Then there's a whole slew of site's with webbased responsive testing tools popping up:
http://beta.screenqueri.es/
**Brief Description: *Pixel Perfect Media Query Debugging Tool Test Responsive Designs Across 60+ Device Viewports. Also allows you to enter custom resolutions
if the resolution of the device you are testing isn't included.
This one rivals the functionality of the FireFox Responsive Design Mode tool.

http://mattkersley.com/responsive/
**Brief Description: **This tool has been built to help with testing your responsive websites while you design and build them. You can enter your website's URL into the address bar at the top of this page (not your browser's address bar) to test a specific page.

http://www.studiopress.com/responsive/
**Brief Description: **This tool has been built to help with testing your responsive websites while you design and build them. You can enter your website's URL into the address bar at the top of this page (not your browser's address bar) to test a specific page.

I wanted to add to this that on my tablet (Samsung Galaxy Tab 2), the mega menu displays the full menu in landscape, and a "partial" mega menu in portrait. This is just fine except for the onHover vs onClick "issue".. On my LG Optimus Pro smartphone, the mobile menu displays in both portrait and landscape.. The Samsung Galaxy Tab 2 tablet isn't what I'd consider a terribly LARGE tablet at all.. In fact it's the size of my 10" netbook. (which also displays the mega menu at full size)

Since I too do not own many of these devices, I am left to rely on testing on various development sites, some of which you have mentioned above.

Thanks,

Anne

picaflor-azul:

Since I too do not own many of these devices, I am left to rely on testing on various development sites, some of which you have mentioned above.

Thanks,

Anne

Do you have others you could share????:cool:

At this point may I suggest we move this discussion to a new thread.. I think it's an interesting enough discussion to open up to the community, and we are CLEARLY (yes myself included) hijacking this support thread..

I will start it off and post the link..

New thread to continue the discussion:

Responsive Design: How to address differences between touchscreen and desktop devices

DivaVocals:

New thread to continue the discussion:

Responsive Design: How to address differences between touchscreen and desktop devices

Thanks for posting the new thread. I'll see you there ;)

Thanks,

Anne

picaflor-azul:

Thanks for posting the new thread. I'll see you there ;)

Thanks,

Anne
You're welcome.. Apologies for the temporary hijack..:smile:

picaflor-azul:

Does this mean that I just need to make this change to the mega menu links to make them touch friendly? If so, that would be really great!

Thanks,

Anne

It will not make them touch friendly but will include a onClick event handler so if one is using a touch screen the mega menu can be clicked.

Here is an Example using this template:

Notice, your mega menu CSS file goes untouched, the onHover CSS still applies only after the onClick event and continues to use the onClick event handlers as fall back on any device.

rbarbour:

It will not make them touch friendly but will include a onClick event handler so if one is using a touch screen the mega menu can be clicked.

Here is an Example using this template:

Notice, your mega menu CSS file goes untouched, the onHover CSS still applies only after the onClick event and continues to use the onClick event handlers as fall back on any device.

After further playing with:

I was able to keep the current onHover intact without the use of first using onClick. Therefore onHover will be default and if one is using a touch device the onClick will be the fall back.