StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I'm going to say right up front that this solution/pattern is not a <em>drop down</em> solution. But, it is a very cool way to rethink navigation for responsive designs. I don't know the full extent of your navigation needs, either, so this might not be complex enough for you.</p> <p>Take a look at the Contents Magazine site: <a href="http://contentsmagazine.com/" rel="nofollow">http://contentsmagazine.com/</a></p> <p>Note the main navigation under the logo. When viewed in a smaller viewport (resize your browser), you will see the 'explore' link. That link, when tapped, gets you to the navigation. </p> <p>Here's the thing: <strong>It's just a simple anchor link</strong>.</p> <p>The pattern is this: In terms of page source order, your navigation is actually towards the <em>bottom</em> of the page. (And, in terms of semantics, this makes a lot of sense to boot.) There is a simple anchor link at the top of the page that jumps to the navigation (which is also an accessibility best practice). </p> <p>So, thinking mobile-first, the page loads with the navigation at the bottom of the page, but the user can click the anchor link to get to it. As it's an anchor link, the jump is instantaneous, and it actually almost <em>feels like a drop down</em>.</p> <p>Then, as the viewport gets larger, using <em>just CSS</em>, the navigation is moved (presentationally, anyway) to the top of the page, and positioned under the logo. That is achieved with simple absolute positioning. </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