BLOGROLL:


CATEGORIES:

Fix HTML Hover Drop Down Menu Issue for iOS Devices using CSS only and no JavaScript


After I first setup this website and got it up running how I wanted, I decided to navigate thru it on my iPad to see how it looked. Across the top, I have some navigation buttons, which are just simple links that you can click and follow, which all worked as expected on my iPad, except for the one that says More Stuff. On a desktop or laptop, if you hover your mouse over the More Stuff button, an additional list of links will automatically drop down. But the problem with iOS devices, is that they do not use a mouse and therefore have no “hover” event, so this particular button appeared dead on my iPad and did nothing when you tapped it.

I am really not opposed to using JavaScript solutions, but when I came across this solution that used only CSS, it intrigued me enough to try and implement it.

Thanks to Philip Renich at elfboy.com for the post where I got this information from:
Click here to go to original article
The best way I can explain how it works, is that you need to setup the <ul> tag as display:none; and then when it is tapped, it changes to display:block;.

You also need to wrap the button name in an <a> tag so it is clickable, but set the href="#" so it does not actually do anything when you click it.

And lastly, may need to adjust what the <a> tag looks like when you hover over it (for example, I do not want it to be underlined like the rest of the links on my site when you hover over it, so I used text-decoration:none;


Here is the CSS you will need to add to your style sheet:


#nav_ios ul {
display: none;
}
#nav_ios li:hover ul {
display: block;
}
#nav_ios_no_underline {
text-decoration: none;
}


Here is my HTML navigation menu code that is fixed and works correctly with iPhone and iPad:

<div>
 <ul>
  <li>
   <a title="Home" href="http://www.iwebss.com">Home</a>
  </li>
  <li>
   <a title="BLOG" href="http://www.iwebss.com/blog">BLOG</a>
  </li>
  <li>
   <a title="Contact Us" href="http://www.iwebss.com/contact">Contact Us</a>
  </li>
  <li>
   <ul id="nav_ios">
    <li>
     <a href="#" id="nav_ios_no_underline">More Stuff</a>
     <ul>
      <li>
       <a title="Energy+" href="http://www.iwebss.com/energy">Energy+</a>
      </li>
      <li>
       <a title="Super Maze 3D" href="http://www.iwebss.com/supermaze3d">Super Maze 3D</a>
      </li>
     </ul>
    </li>
   </ul>
  </li>
  <div style="clear:both;height:0px;"><!----></div>
 </ul>
</div>

Let me know if you think this was helpful by leaving a comment!

SHARE THIS POST ON YOUR FAVORITE SOCIAL NETWORK:
  • email
  • Print
  • RSS
  • Facebook
  • Twitter
  • Digg
  • del.icio.us
  • LinkedIn
  • Google Buzz
  • Google Bookmarks
  • Yahoo! Buzz
  • MySpace
  • Reddit
  • StumbleUpon
  • Technorati
  • Slashdot
  • Blogosphere
  • MSN Reporter
  • MyShare

10 Comments:

Want to leave a comment? Click HERE to scroll to bottom of page!
  • Wilko says:

    Really happy with this solution :)

  • James says:

    Good blog and very nice information gathering on blog really very nice article and good for learn something new. thanks

  • jessie hold says:

    thanks for your information. Your page was very informative. I’ll check out stackoverflow.com.

  • ADMIN says:

    @jessie – Your code will not show in the comments, as it does not let you post code.
    I took a stab at it myself though, and could not get it to work either. I am not a guru by any means when it comes to this stuff. I am sure it can be done, but I think you might have to go with google on this one to figure it out. Also, stackoverflow.com is a great place to post questions and get answers from people who actually know what they are talking about.

  • jessie hold says:

    Hi, sorry but I tried to get this to work and maybe I am just not comfortable enough with CSS. The first drop down is from scrolling over “More Stuff” and when I try to add another level to the drop-down menu I cannot get it to work properly.
    Below I have copied the code in my attempt to add another level, but I cannot seem to get it to work.

  • ADMIN says:

    @jake @jessie Thanks for the comments! I just fixed the code above so it shows properly, as I just noticed it does not look right. Hopefully this will make is easier for you to see how to implement more sub menus yourself.

  • jessie says:

    ditto, could you possibly tell me how I could use this so I could get one more level of drop-down menus to function properly when using an ipad.

  • jake sorenson says:

    great solution, wondering if you could help if I needed to do another level of drop down menus.

  • Joeri says:

    Best tip ever…

  • MikeHenry says:

    This is my first opportunity to visit this website. I found some interesting things and I will apply to the development of my blog. Thanks for sharing useful information.

  • Please leave a Comment:

    Your email address will NOT be published.

    * Name and Email are required.

    Allowed HTML tags:
    <code> <b> <strong> <i> <em> <u> <p> <q> <blockquote> <strike>


    Click here to return to main BLOG page.
    Propellerads

    Bad Behavior has blocked 281 access attempts in the last 7 days.