Tags

Related Posts

Share This

Advertisement

Keeping a drop down open

I’ve been working on creating some CSS/HTML based drop-down menus recently. I’ve typically used Javascript for similar elements but because of some platform restrictions, JS isn’t a good option.

I came across a quirk with my code that had a pretty simple solution.

Everything with the menu worked perfectly across a number of browsers and on my iPhone.

However when I went to test the menu on my iPad, I ran into a problem.

I couldn’t keep the menu open. I could tap to open the menu but the second I lifted my finger off of the menu, the menu would close. An example and the code is below.

<div id="scottdropdownmenu">

<ul>

<li><a>Drop Down Menu ▼</a>

<ul>

<li><a href="/about-scotthums-com/">About</a></li>

<li><a href="/about-scott-hums/">Bio</a></li>

<li><a href="/scott-hums-resume/">Resume</a></li>

<li><a href="/blog/">Blog</a></li>

</ul>

</li>

</ul></div>

So how did I get the menu to stay open?

The problem was with my anchor tag. simply adding a href="#" to the anchor tag in the menu fixed the problem. Giving the anchor tag the “#” placeholder gives an iPad tap something to hold onto, therefore keeping the menu open.

<div id="scottdropdownmenu">

<ul>

<li><a href="#">Drop Down Menu ▼</a>

<ul>

<li><a href="/about-scotthums-com/">About</a></li>

<li><a href="/about-scott-hums/">Bio</a></li>

<li><a href="/scott-hums-resume/">Resume</a></li>

<li><a href="/blog/">Blog</a></li>

</ul>

</li>

</ul></div>