diff options
Diffstat (limited to 'build/hamburger-menu-alternative')
| -rw-r--r-- | build/hamburger-menu-alternative/index.html | 112 |
1 files changed, 71 insertions, 41 deletions
diff --git a/build/hamburger-menu-alternative/index.html b/build/hamburger-menu-alternative/index.html index 1643de1..87f3414 100644 --- a/build/hamburger-menu-alternative/index.html +++ b/build/hamburger-menu-alternative/index.html @@ -1,64 +1,84 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Using Hamburger Menus? Try Sausage Links</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> + <link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" /> +<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style> </head> <nav> - <a href="#menu">Menu ↓</a> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Using Hamburger Menus? Try Sausage Links</h1> +<h1 id="using-hamburger-menus-try-sausage-links">Using Hamburger Menus? Try Sausage Links</h1> + <p>2019-06-14</p> -<p>When designing medium to large sized menu navigations on the mobile web the default go-to, for some time now, has been hamburger menus. This isn't necessarily a <i>bad</i> thing, but there is a simpler alternative for certain use cases.</p> -<p>Before we get into the nitty-gritty details (and a simple demo) of the <em>sausage link</em> concept, let's take a quick look at the pros and cons of hamburger menus.</p> -<h2>Hamburger Menus</h2> -<p>The concept of the <a href="https://codepen.io/search/pens?q=hamburger%20menu&page=1&order=popularity&depth=everything">hamburger menu</a> isn't <em>horrible</em> by any means, in fact it does solve a lot of problems from a visual perspective. Unfortunately, that doesn't mean it exists without some annoying flaws.</p> -<h3>The Good</h3> + +<p>When designing medium to large sized menu navigations on the mobile web the default go-to, for some time now, has been hamburger menus. This isn’t necessarily a bad thing, but there is a simpler alternative for certain use cases.</p> + +<p>Before we get into the nitty-gritty details (and a simple demo) of the <em>sausage link</em> concept, let’s take a quick look at the pros and cons of hamburger menus.</p> + +<h2 id="hamburger-menus">Hamburger Menus</h2> + +<p>The concept of the <a href="https://codepen.io/search/pens?q=hamburger%20menu&page=1&order=popularity&depth=everything">hamburger menu</a> isn’t <em>horrible</em> by any means, in fact it does solve a lot of problems from a visual perspective. Unfortunately, that doesn’t mean it exists without some annoying flaws.</p> + +<h3 id="the-good">The Good</h3> + <ul> <li>Minimizes the amount visual space the menu requires</li> -<li>Fairly commonplace now that a good portion of users understand it's functionality</li> +<li>Fairly commonplace now that a good portion of users understand it’s functionality</li> <li>Makes the lives of designers easier by tucking all items away on mobile 😛</li> </ul> -<h3>The Bad</h3> + +<h3 id="the-bad">The Bad</h3> + <ul> -<li>Requires extra testing/work to ensure the menu will play nice with screen readers and keyboard-only users</li> +<li>Requires extra testing/work to ensure the menu will play nice with screen readers and keyboard-only users</li> <li>Can get overly complex with the presence of children dropdown elements, help text etc.</li> <li>Adds bloat to projects that might require additional JavaScript to render these menus (CSS only hamburger menus avoid this issue)</li> <li>Adds an additional point of interaction from the user (click to open, then proceed to read through available options)</li> </ul> -<p>As you can see, the bad points listed above aren't <em>that</em> bad. I see them more as minor potholes along the UX journey for your end-users. A good portion of hamburger menu examples in the wild work perfectly fine and should remain as they are. However, those outliers who abuse or misuse the hamburger concept should be introduced to <strong>sausage links</strong>.</p> -<h2>Sausage Links</h2> -<p>I should start by mentioning that this concept is far from <strong>new</strong>. There are a good number of websites that already implement this menu type in some form or another. The point of this post isn't to blow your mind with some new-never-thought-of navigation design. I'm just trying to bring awareness to another available menu concept.</p> -<p>Enough chit-chat, let's take a look at sausage links in action:</p> + +<p>As you can see, the bad points listed above aren’t <em>that</em> bad. I see them more as minor potholes along the UX journey for your end-users. A good portion of hamburger menu examples in the wild work perfectly fine and should remain as they are. However, those outliers who abuse or misuse the hamburger concept should be introduced to <strong>sausage links</strong>.</p> + +<h2 id="sausage-links">Sausage Links</h2> + +<p>I should start by mentioning that this concept is far from <strong>new</strong>. There are a good number of websites that already implement this menu type in some form or another. The point of this post isn’t to blow your mind with some new-never-thought-of navigation design. I’m just trying to bring awareness to another available menu concept.</p> + +<p>Enough chit-chat, let’s take a look at sausage links in action:</p> + <p><img src="/public/images/scrolling-navigation.png" alt="Scrolling menu with sausage links" /></p> + <p><a href="https://codepen.io/bradleytaunt/pen/QXjjbE/">Live CodePen Example</a></p> -<p>The above CodePen adds a good amount of visual design fluff, so let's take a look at the bare minimum HTML & CSS needed to accomplish this menu:</p> -<pre><code><nav class="sausage-links"> - <ul> - <li><a href="">Homepage</a></li> - <li><a href="">Categories</a></li> - <li><a href="">Filter Properties</a></li> - <li><a href="">Edit Optional Tags</a></li> - <li><a href="">Research Papers</a></li> - <li><a href="">Contact Our Team</a></li> - </ul> -</nav> -</code></pre> -<pre><code>/* Sausage Links Nav Container */ + +<p>The above CodePen adds a good amount of visual design fluff, so let’s take a look at the bare minimum HTML & CSS needed to accomplish this menu:</p> + +<pre><code><nav class="sausage-links"> + <ul> + <li><a href="">Homepage</a></li> + <li><a href="">Categories</a></li> + <li><a href="">Filter Properties</a></li> + <li><a href="">Edit Optional Tags</a></li> + <li><a href="">Research Papers</a></li> + <li><a href="">Contact Our Team</a></li> + </ul> +</nav> + + + +/* Sausage Links Nav Container */ .sausage-links { position: relative; } -/* The left and right "faded" pseudo elements */ +/* The left and right "faded" pseudo elements */ .sausage-links:before, .sausage-links:after { - content: ''; + content: ''; height: calc(100% - 2em); pointer-events: none; position: absolute; @@ -75,7 +95,7 @@ left: 0; } -/* Basic flexbox to prevent items from breaking lines */ +/* Basic flexbox to prevent items from breaking lines */ .sausage-links ul { display: flex; flex-wrap: nowrap; @@ -91,26 +111,36 @@ display: inline-block; } </code></pre> + <p>Pretty simple, eh?</p> + <p><strong>Update</strong>: Thanks to <a href="https://twitter.com/dany0w">@dany0w</a> for pointing out that I forgot to include <code>-webkit-overflow-scrolling: touch</code> for momentum scrolling on iOS.</p> -<h3>The Good</h3> + +<h3 id="the-good-1">The Good</h3> + <ul> <li>Extremely minimal amount of CSS required</li> -<li>Screen reader / keyboard-only safe</li> +<li>Screen reader / keyboard-only safe</li> <li>Zero JavaScript needed</li> <li>No need for hacky hidden <code>radio</code> inputs for toggling parent containers etc.</li> <li>Users can see first few available options without any interaction</li> </ul> -<h3>The Bad</h3> + +<h3 id="the-bad-1">The Bad</h3> + <ul> <li>May not look the most visually appealing for certain project designs (ugly scrollbar in some instances)</li> <li>Better suited for small to medium menu lists compared to massive sitemaps</li> -<li>Without proper fade / cut off visual cues, users may not understand they can scroll</li> +<li>Without proper fade / cut off visual cues, users may not understand they can scroll</li> </ul> -<h2>So, should I use hamburger menus or sausage links?</h2> -<p>That really depends on your project or overall mobile design (I know, such a helpful answer). I'm sure there are even a few use cases where it would make sense to have sausage links within a toggle-based hamburger menu. The menu possibilities could be endless!</p> -<p>That's it. I hope I've inspired you to try out sausage links in the near future or at least made you think more deeply about mobile navigation design!</p> -<p><small>...is anyone else really hungry now?</small></p> + +<h2 id="so-should-i-use-hamburger-menus-or-sausage-links">So, should I use hamburger menus or sausage links?</h2> + +<p>That really depends on your project or overall mobile design (I know, such a helpful answer). I’m sure there are even a few use cases where it would make sense to have sausage links within a toggle-based hamburger menu. The menu possibilities could be endless!</p> + +<p>That’s it. I hope I’ve inspired you to try out sausage links in the near future or at least made you think more deeply about mobile navigation design!</p> + +<p>…is anyone else really hungry now?</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> |