iPad & touchscreen viewing problems

[burlington]

Running CMSMS 1.11.2.1. Horizontal menu. 2 dropdowns.

I have just been told that there is a problem on one of my sites with the drop down menus not showing when using iPad & touchscreen devices.

I have seen previous correspondence on the issue of touchscreens. Are we any further on please and what would you advise?

The site is: http://www.bavaria-bodenmais-apartments.co.uk

Thank you.

Martin

[uniqu3]

Creating a website with mobile compatibility is task of a Developer of that site and not task of CMSMS.
There are many different ways to solve that, you may want to look in Simplex theme for one of examples or try Googling "mobile navigation", superfish JS plugin (http://users.tpg.com.au/j_birch/plugins/superfish/) has mobile support to some level as well.

[applejack]

Or don't use hierarchical menus at all as basically they are pretty crappy for accessibility and SEO or at least if you do then you really should provide an alternative navigational route.

[ethical]

well seeing as the menus work on the blackberry and android devices fine, seems like it is the domain of CMSMS menu system to make it work. Not asking for a mobile version here, just the menu to work on I devices like it does every other device. Honestly if everybody had a developer they can throw money at, they most likely would not be using cmsms. is the superfish thing really as simple as the 1 2 3 it shows on the site?

I will give the superfish thing a try and see how it goes...

[ethical]

ok well the superfish thing was actually that easy. here are more detailed steps to help others

1) goto http://users.tpg.com.au/j_birch/plugins/superfish/
2) download the zip file with all the files
3) upload it to your server using FTP to a folder on your site (i decided to put it in /lib/ and then extract the files (this is easily done if using cpanel just upload the zip file from the file manager then click extract. it will put the files in a folder called /superfish-master/
4) Next in your cmsms admin area open your page template and add these lines (between literal tags) in the Head section:

Code: Select all

<__script__ src="http://yourdomainhere/lib/superfish-master/js/jquery-1.9.0.min.js"></__script>
<__script__ src="http://yourdomainhere/lib/superfish/superfish-master/js/superfish.js"></__script>

5) add this right after the cms_stylesheet flag

Code: Select all

{cms_stylesheet}
<link href="http://yourdomainhere/lib/superfish-master/css/superfish.css" rel="stylesheet" media="screen">

6) now add this just after the div tag for the menu ( to note here i actually got it working without this code, so if someone can comment on what it actually does that would be helpful since you may not need it.

Code: Select all

<__script__>

	jQuery(document).ready(function() {
		jQuery('ul.sf-menu').superfish();
	});

</__script>

7) now go into the menu css and do as step #1 says on that page,
For each li:hover selector, add an equivalent li.sfHover selector.

so i just found any reference that had a li:hover and copied it to add in the sfHover and i put each reference right after its li:hover counterpart just to be safe, now sure I could have probably just added one line into each stylesheet reference instead of copying it but I wanted to have distinct and visible edits of what Ii was doing and changing.

here are the ones i added

Code: Select all

#primary-nav ul li .menuparent.sfHover, 
 {
   /* arrow for menuparents */
   background-image: url(images/cms/arrow-right.gif);
   background-position: 180px center;
   background-repeat: no-repeat;
   }

#primary-nav li.sfHover, 
{
  background-color: #e86d00;
}

#primary-nav li.sfHover ul, 
#primary-nav li.sfHover ul ul
{ 
   display: none;
   background-color: #5B8AB9; 
}

#primary-nav li.sfHover ul, 
#primary-nav ul li.sfHover ul, 
#primary-nav ul ul li.sfHover ul 
 { 
   display: block; 
}

and i almost fell out of chair when it worked!

hope that helps someone.

[elkman]

Have you been able to try this to create a responsive menu?

I like the Bootstrap conversion available for CMSMS but many available responsive templates use Superfish and media queries. Converting one to CMSMS is fairly straight forward until I run into the menu conversion.

I tried your forum example and it worked as you stated. Now I need to learn how to use this so it will be responsive too.

Elkman

[ethical]

sorry but i dont understand your question. what is a responsive menu?

[Dr.CSS]

If you want a drop down menu that works with touch you need to make it so the top menu items are section headers w/o the a link...

Drop down menus are not bad SEO as search bots can read all the links in them and find all the pages from the home page very easily, imho...

I made a jquery test menu for click drop menus here...

http://how-i-did-that.com/cgblog/10/15/ ... -menu.html

I personally would not put any extra scripts etc. in the /lib folder, I use the uploads folder, uploads/js/

Responsive menus change with browser window size...

http://multiintech.com/newest/ (not touch screen enabled)...

[elkman]

Thanks for the information Dr. CSS. I'll give this a try.

[velden]

Have you been able to try this to create a responsive menu?

I like the Bootstrap conversion available for CMSMS but many available responsive templates use Superfish and media queries. Converting one to CMSMS is fairly straight forward until I run into the menu conversion.

I tried your forum example and it worked as you stated. Now I need to learn how to use this so it will be responsive too.

Elkman

I don't understand. CMSMS is 'just' a tool. I believe almost anything that is already 'templated' can be converted to cmsms.

[applejack]

If you want a drop down menu that works with touch you need to make it so the top menu items are section headers w/o the a link...

Not so, have you tried this site on a touchscreen. First touch opens the drop down menu the second goes to the URL.

[Dr.CSS]

On my touch screen the menu drops as it goes to the page, no chance to get to the drop menu items...

[elkman]

Here is an example site I am working on that uses responsive design and superfish menus. I had to convert the orignal template purchased by the nonprofit for use on CMSMS. I was able to get this menu working properly by trial and error of the media queries.

I don't use either a smart phone or iPad and build using Firefox to scale the various screen views. I am assuming this menu is working for a touch screen. Please let me know if it doesn't.

http://www.tellercounty.biz/peakalliance/

Elkman

[applejack]

On my touch screen the menu drops as it goes to the page, no chance to get to the drop menu items...

Which is out of interest?

Mine is iOS 6.

[fearmydesign]

I just wanted to say that Bootstrap works great for me... I just finished designin/creating a site using Bootstrap and then converting to a CMSMS - its really simple... I love CMSMS more now!