Skip navigation
potzki75
Currently Being Moderated

Dropdown menus for Android, Ipad and Iphone

May 21, 2013 10:16 PM

Hello,

 

I have created a CSS navigation menu that has a drop down menu in it. I have made my site responsive to tablets and mobiles. I originally used this HTML for the top level of the menu;

<a><li>Our Services</li></a> (This link was not going to be set up to go to any other webpage, just to act as an anchor for the other items underneith)

This code works fine for all PC browsers (including Safari) and worked fine on Android devices, but when I tested it on an iphone the menu would not work. I found a discussion saying that you need to put in a href for the <a> tag in order for this to work on iphone. So I tried this;

<a href=""><li>Our Services</li></a>

This made it work on iphone but it stopped working on Android.

I have since had to use a # inside the href like this;

<a href="#">

This makes it work on all the mobile browsers, but it comes with the problem that it is refreshing the webpage and becuase the menu is a little way down the page, it takes you back to the top of the screen. I have even tried to <li> and id and used the id after the # in the href like this;

< href="#link1"><li id="link1">Our Services</li></a>

This does work to some degree but it still refeshes the page.

 

Can anyone tell me how to get touch devices to not react badly to make this work?

 

Thanks,

 

Peter

 
Replies
  • Currently Being Moderated
    May 22, 2013 4:34 AM   in reply to potzki75

    If your menu is down a ways on the page have you considered something that triggers onclick, even with javascript, vs. a drop-down?  How far down the page are we talking about?

     
    |
    Mark as:
  • Currently Being Moderated
    May 22, 2013 12:10 PM   in reply to potzki75

    Try Superfish

    http://users.tpg.com.au/j_birch/plugins/superfish/

    Supports touch devices. On Android, iOS, Windows Phone 7 and IE10 (with touchscreen), first touch will open an associated submenu, second will follow the link. Mouse and keyboard accessibility works as normal.

     

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points