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="https://www.iwebss.com">Home</a> </li> <li> <a title="BLOG" href="https://www.iwebss.com/blog">BLOG</a> </li> <li> <a title="Contact Us" href="https://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="https://www.iwebss.com/energy">Energy+</a> </li> <li> <a title="Super Maze 3D" href="https://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!
Really happy with this solution 🙂
Good blog and very nice information gathering on blog really very nice article and good for learn something new. thanks
thanks for your information. Your page was very informative. I’ll check out stackoverflow.com.
@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.
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.
@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.
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.
great solution, wondering if you could help if I needed to do another level of drop down menus.
Best tip ever…
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.