iOS Friendly Dropdown

[jtcreate]

Hi,

I'm using v1.9.2 with the standard horizontal CSS menu setup that come with the install. Is there a way to mod those so they work properly on an iOS device? VS only allowing the parent to be clickable?

Thank you in advance for your assistance.

Jeff T.

[jtcreate]

Still struggling with this. Found this link that looked really promising as an easy way to mod the CSS, but couldn't get it working:
http://www.elfboy.com/blog/making_css_d ... he_iphone/

My current css:

Code: Select all

/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */

#menu_vert {
margin-left: 135px;
/*   margin-right: 135px; */
background-image: url(images/navbar_inverse.jpg);
background-repeat: repeat-x;
}

/* The wrapper clears the floating elements of the menu */

/* Fix for Opera 8 */
.clearb { clear: both; }
#menuwrapper { 
   /* Fix for Opera 8 */ 
   /*   overflow: hidden;  */ 
   width: 100%;
}

/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav li li { 
   width: 200px; 
}


/* Unless you know what you do, do not touch this */ 
#primary-nav, #primary-nav ul { 
   list-style: none; 
   margin: 0px; 
   padding: 0px;
}
#primary-nav ul { 
   position: absolute; 
   top: auto; 
   display: none;
}
#primary-nav ul ul { 
   margin-top: 1px;
   margin-left: -1px;
   left: 100%; 
   top: 0px; 
display: none;
}
	
#primary-nav li { 
   margin-left: -1px;
   float: left;
}
#primary-nav li li { 
   margin-left: 0px;
   margin-top: -1px;
   float: none; 
   position: relative; 
}

/* Styling the basic apperance of the menu elements */
#primary-nav a { 
   display: block; 
   margin: 0px; 
   padding: 7px 13px 8px 13px; 
   text-decoration: none; 
   color: #fff;

}
#primary-nav li a { 
/*   border-right: 1px solid #fff; 
   border-left: 1px solid #fff;*/
}
#primary-nav li li a { 
/*   border: 1px solid #fff; */
}	
#primary-nav li, #primary-nav li.menuparent { 

background-image: url(images/navbar_inverse.jpg);
background-repeat: repeat-x;
}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive { 
   background-color: #747474; 
}


/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent, 
#primary-nav ul li.menuparent:hover, 
#primary-nav ul li.menuparenth { 
/* arrow for menuparents */
   background-image: url(images/cms/arrow.gif); 
   background-position: center right; 
   background-repeat: no-repeat;
}


/* Styling the apperance of menu items on hover */

#primary-nav li:hover, 
#primary-nav li.menuh, 
#primary-nav li.menuparenth, 
#primary-nav li.menuactiveh { 
   background-color: #747474;
}

/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

/* 
just add 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul ul ul,
for fourth level 
*/
#primary-nav ul, 
#primary-nav li:hover ul, 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul, 
#primary-nav li.menuparenth ul ul { 
   display: none; 
}

/* add 
#primary-nav ul ul ul li:hover ul, 
#primary-nav ul ul ul li.menuparenth ul,
for fourth level
*/
#primary-nav li:hover ul, 
#primary-nav ul li:hover ul, 
#primary-nav ul ul li:hover ul, 
#primary-nav li.menuparenth ul, 
#primary-nav ul li.menuparenth ul, 
#primary-nav ul ul li.menuparenth ul { 
   display: block; 
}


/* IE Hacks */
#primary-nav li li { 
   float: left; 
   clear: both; 
}
#primary-nav li li a { 
   height: 1%; 
}

Menu manager code:

Code: Select all

{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
  {assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}

{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string='<ul>' times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string='</li></ul>' times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

{if $node->parent == true or $node->current == true}
  {assign var='classes' value='menuactive'}
  {if $node->parent == true}
    {assign var='classes' value='menuactive menuparent'}
  {/if}
  {if $node->children_exist == true and $node->depth < $number_of_levels}
    {assign var='classes' value=$classes|cat:' parent'}
  {/if}
  <li class="{$classes}"><a class="{$classes}" 
{elseif $node->type == 'sectionheader' and $node->haschildren == true}
  <li class="menuparent"><a class="menuparent"><span class="sectionheader">{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
  <li><a ><span class="sectionheader">{$node->menutext}</span></a>
{elseif $node->type == 'separator'}
  <li style="list-style-type: none;"> <hr class="menu_separator" />
{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
  <li class="menuparent"><a class="menuparent" 
{else}
  <li>
  <a 
{/if}

{if ($node->type != 'sectionheader' and $node->type != 'separator') or $node->parent == true or $node->current == true }
 {if $node->target}target="{$node->target}" {/if}
href="{$node->url}"><span>{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string='</li></ul>' times=$node->depth-1}
</li>
</ul>
<div class="clearb"></div>
</div>
{/if}

Any help is appreciated! Thanks!

[philiprenich]

Jeff,
Are you still having a problem with the dropdown nav in iOS? Post a link and I can take a look at it to see if I can help. I glanced briefly at the code you posted a couple days ago and it looked like it should be working - at least according to what I wrote in that article. I may have missed some edge case though.

Philip

[jtcreate]

Philip,

Thanks for your response. It appears the issue has something to do with integrating into the CMS. Right now, all the code you wrote has been pulled out, but I do need to get this working and I think it will help a lot of people in this forum if we can make it work.

SO... as you can see from above, the CMS has a style sheet for the menu, a menu manager to deal with the HTML of it all, plus a template file (which is not shown).

We'd need to get it all wedged in and working with all these parts. I can PM you some access info to the CMS, if you're willing to jump in and take a look. Or... I can go in, get everything back to the way I think it should be working with your code, and then have you look at the actual site to see if you can locate the problem?

Thoughts? And, thanks for finding this thread and commenting on it. I really appreciate it and any help you can offer.

Jeff T.

[philiprenich]

Jeff,

My guess is that the CMS styles or menu manager are introducing some code that is messing with how iOS does those menus. It would be easiest if I could see a live example.

As for "my code" it's primarily just how you set display properties. So hopefully it's not too complicated to sort out!

Philip

[jtcreate]

Philip,

You can see it here: http://www.soundpostusa.com. The CSS is in the stylesheet. The issue is where to put the id="ios" in the menu manager file. I've put it in a few different places, but all wreck the menu.

So, the ul id="ios" and resulting /ul are not in the menu manager as it kills the menu. The trick is, where to put them so the dynamically generated menu works. OR... maybe there's a way to put your display properties into the current nav stylesheet to integrate?

My goal is to have it work within the system. If not, we can move to static menus, but I'd like to avoid that if possible.

Thanks in advance for your help.

Jeff

[Dr.CSS]

If you look close you will see that your menu and theirs both use UL UL display:none and hover display:block, they use #ios and we use #primary-nav for the first UL ID...

One thing that differentiates the 2 of them is that all of your parent pages are section headers which don't have a true <a href= in the link, I've heard this can have a problem in iPhones...

1) Add an href='#' to the sectionheader part of the menu template...

2) Make your sectionheaders internal page links to the first child page under it...

[jtcreate]

Dr. CSS... Thanks! Adding the href="#" worked perfectly.

It works great on iOS devices, except now, an html5 component (slide show pro) is covering the drop down menu. Checking with the makers of that to see if there's an easy fix...

Unless anyone here knows of a way to force the CMSMS drop down to go above this type of component? wmode is set for swfs, but that doesn't affect the mobile setup.

Thanks again. You're a lifesaver!

[carasmo]

Did you find a solution to this last question regarding the slideshow covering up the menu? It's either a z-index or a source order combo or both, or not clearing (clearfix after the menu)

[jtcreate]

No, I hadn't... but, thanks for the tip(s).