Page 1 of 1

Menus for mobile - iPhone

PostPosted: Sun Feb 24, 2013 5:18 pm
by davidwwatts
I've been using Tigra Menu Gold on my website for years -- since maybe 2006. I'd like to implement a version of our web site that is more mobile friendly. While our current menu bar does indeed work on an iPhone, it is not ideal since it requires the user to zoom in to make proper selections.

Do you have any advice, or better still, good examples of implementing a menu for use on small touch screens such as on the iPhone and Android phones?

Thanks.
David.

Re: Menus for mobile - iPhone

PostPosted: Tue Feb 26, 2013 5:40 pm
by tigra
You are correct: small menu items are difficult to navigate on mobile devices. My suggestion would be to detect the client resolution and render alternative page layout with touch friendly navigation.

Re: Menus for mobile - iPhone

PostPosted: Tue Feb 26, 2013 8:05 pm
by davidwwatts
Thanks Denis. Do you have any examples of using Tigra this way. If not, would you consider making an example design that mimics the standard iPhone UI that we could use? :-)
David.

Re: Menus for mobile - iPhone

PostPosted: Tue Jun 25, 2013 8:08 am
by tigra
Just coded this responsive design yesterday.

For static option (picks CSS at the load time):
Code: Select all
<link rel="stylesheet" type="text/css" media="all" href="/style.gobal.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 710px)" href="/style.mobile.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-device-width: 711px) and (max-device-width: 880px)" href="/style.vtablet.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-device-width: 881px) and (max-device-width: 970px)" href="/style.htablet.css" />


For dynamic option (swaps CSS as page is resized):

In the header of HTML page:
Code: Select all
<link rel="stylesheet" type="text/css" media="all" href="style.global.css" />
<link rel="stylesheet" type="text/css" media="all" href="style.empty.css" id="respcss" />


supporting javascript:
Code: Select all
function f_clientWidth() {
   if (typeof(window.innerWidth) == 'number')
      return window.innerWidth;
   if (document.documentElement && document.documentElement.clientWidth)
      return document.documentElement.clientWidth;
   if (document.body && document.body.clientWidth)
      return document.body.clientWidth;
   return null;
}

function f_onResize () {
   n_width = f_clientWidth();
   
   if (n_width > 970)
      s_file = 'style.desktop.css';
   else if (n_width > 880)
      s_file = 'style.htablet.css';
   else if (n_width > 710)
      s_file = 'style.vtablet.css';
   else
      s_file = 'style.mobile.css';
   
   var o_link = document.getElementById('respcss');
   var s_href = o_link.getAttribute('href');
   
   if (String(s_href).indexOf(s_file) != -1)
      return;

   var s_href = s_href.replace(/^(.*)\/[^\/]+$/, "$1/" + s_file);
   o_link.setAttribute("href", s_href);
}

function f_addOnResize (f_func) {
   if (document.addEventListener) {
      window.addEventListener('resize', f_func, false);
      window.addEventListener('load', f_func, false);
   }
   else if (window.attachEvent) {
      window.attachEvent('onresize', f_func);
      window.attachEvent('onload', f_func);
   }
   else {
      var f_onResize = window.onresize;
      var f_onLoad = window.onload;
      if (typeof window.onresize != 'function') {
         window.onresize = f_func;
      }
      else {
         window.onresize = function() {
            f_onResize();
            f_func();
         }
      }
      if (typeof window.onload != 'function') {
         window.onload = f_func;
      }
      else {
         window.onload = function() {
            f_onLoad();
            f_func();
         }
      }
   }
}

f_addOnResize (f_onResize);