diff options
Diffstat (limited to 'build/tabbed-content/index.html')
| -rw-r--r-- | build/tabbed-content/index.html | 31 |
1 files changed, 2 insertions, 29 deletions
diff --git a/build/tabbed-content/index.html b/build/tabbed-content/index.html index cfabe83..d519fe8 100644 --- a/build/tabbed-content/index.html +++ b/build/tabbed-content/index.html @@ -3,11 +3,12 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="color-scheme" content="dark light"> <link rel="icon" href="data:,"> <title>Tabbed Content Without JavaScript</title> <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> +<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}blockquote{background:rgba(0,0,0,0.1);border-left:4px solid;padding-left:5px;}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> @@ -16,30 +17,20 @@ <main> <h1 id="tabbed-content-without-javascript">Tabbed Content Without JavaScript</h1> - <p>2019-01-28</p> - <p>Creating tabs is a fairly trivial and common practice in web design, but many times it requires JavaScript to properly implement. Fortunately it <em>is</em> possible to create tabbed content with only using CSS.</p> - <p><img src="/public/images/tabbed-content.png" alt="Tabbed elements with only CSS" /></p> - <p><a href="https://codepen.io/bradleytaunt/pen/abjmayw">Live CodePen Example</a></p> - <hr/> - <h2 id="the-html">The HTML</h2> - <p>The skeleton for this component is fairly basic - we just need the following structure:</p> - <ol> <li><p>Parent element for each tab item</p></li> <li><p>Default radio input</p></li> <li><p>Label linked to corresponding input</p></li> <li><p>Inner content associated with each tab item</p></li> </ol> - <p>Full HTML for reference:</p> - <pre><code><div class="tabs"> <div class="tab-item"> @@ -62,11 +53,8 @@ </div> </code></pre> - <h2 id="the-css">The CSS</h2> - <p>First, we need to set each <code>input</code>, <code>label</code> and inner content into their own parent containers:</p> - <pre><code>/* Main parent that holds all contents */ .tabs { height: 100%; @@ -79,9 +67,7 @@ display: inline; } </code></pre> - <p>Next, we will hide the default <code>radio</code> input and design our labels to resemble a basic web tab element. The <code>z-index</code> property on the label is important for how we will be stacking our content on the z-axis (labels above inner content for example).</p> - <pre><code>/* Hide the default radio inputs */ .tab-input { position: absolute; @@ -103,9 +89,7 @@ z-index: 0; } </code></pre> - <p>The main inner content of each tab needs to have an <code>absolute</code> position set as it’s default, since the one currently selected will switch to <code>relative</code> on mobile (more on that in a moment):</p> - <pre><code>/* The inner tab content */ .tab-content { background: white; @@ -120,9 +104,7 @@ z-index: 0; } </code></pre> - <p>The final step is just telling the browser to style both the <code>label</code> and inner content of the currently selected radio <code>input</code>:</p> - <pre><code>/* Style the currently selected tab label */ .tab-input:checked + .tab-label { border: 1px solid #eee; @@ -138,9 +120,7 @@ z-index: 1; } </code></pre> - <p>It’s as simple as that! For reference, here is the entire CSS file for easier access:</p> - <pre><code>/* Main parent that holds all contents */ .tabs { height: 100%; @@ -203,11 +183,8 @@ z-index: 1; } </code></pre> - <h2 id="dont-forget-about-mobile">Don’t forget about mobile</h2> - <p>With only a few extra lines of CSS we can ensure that our custom tabs will stack on top of each other and look solid on mobile devices:</p> - <pre><code>@media(max-width:38em) { .tab-label { display: block; @@ -224,13 +201,9 @@ } } </code></pre> - <h2 id="one-minor-caveat">One minor caveat</h2> - <p>Even though I’m a pretty big fan of implementing tabs this way, there is a small drawback:</p> - <p>The <code>height</code> of the inner content doesn’t grow dynamically since it defaults as <code>absolute</code>, so a <code>min-height</code> or <code>height</code> value is required on the parent element. This could become a problem in certain situations where you don’t have the luxury of setting a static height.</p> - <p>Other than that, enjoy building some JavaScript-free tabs!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> |