Databases
StackOverflow2013
Postsdbo
POHTML menu behavior on smartphones
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML menu behavior on smartphones
    text
    copied!<p>Currently trying to make a website responsive to smartphones and tablets. I'm having a bit of trouble with the menu og the site. The menu is basically an unordered list like this:</p> <pre><code>&lt;ul class="navigation"&gt; &lt;li&gt;&lt;a href="page1.html"&gt;Page1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="page2.html"&gt;Page2&lt;/a&gt;&lt;/li&gt; &lt;li&gt; &lt;a href="page3.html"&gt;Page3&lt;/a&gt; &lt;!-- Dropdown menu --&gt; &lt;ul class="subnav"&gt; &lt;li&gt;&lt;a href="page4.html"&gt;Page4&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>The inner unordered list is a dropdown menu that appears when the user hovers the <code>page3.html</code> link.</p> <p>On mobile and tablet I want the menu to act like an accordion, so when the user touches the <code>page3.html</code> link, the <code>subnav</code> list appears and pushes the other listitems down. I got it to work on desktop by simply setting the dropdown list to a fixed position rather than <code>position:absolute;</code> However, on mobile and tablets, the touch on <code>page3.html</code> will still work as a link, so the user is, of course, redirected to <code>page3.html</code> instead of triggering the <code>subnav</code> list.</p> <p>Is there any way of triggering the subnav list without triggering the link the first time a user touches it? :-) I'm trying to go for a CSS only solution to this, but if there's any need for JS, I'll gladly make use of it.</p> <p>Thanks in advance!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload