CSS Tab-Nav

What is a css tab-nav How do you make a css tab-nav? This script and codes were developed by Daniel Gooß on 14 January 2022, Friday.

How do I make an css tab-nav?
  1. CSS Tab-Nav Previews
  2. CSS Tab-Nav HTML Codes
  3. CSS Tab-Nav CSS Codes
CSS Tab-Nav Previews

CSS Tab-Nav HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>CSS Tab-Nav</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      #toggle:checked ~ .tabnav dl {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#toggle:checked ~ .tabnav dl dt {
  order: -1;
  display: block;
  flex: 0 0 auto;
  outline: 0;
}
#toggle:checked ~ .tabnav dl dd {
  display: none;
  margin: 0;
}
#toggle:checked ~ .tabnav dl dd:target {
  display: block;
}
#toggle:checked ~ .tabnav dl dt {
  position: relative;
  box-sizing: border-box;
  background-color: #f5f5f5;
  border-right: 1px solid #ccc;
}
#toggle:checked ~ .tabnav dl dt:last-of-type {
  border-right: 0;
}
#toggle:checked ~ .tabnav dl dt:focus {
  z-index: 1;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  background: linear-gradient(0deg, #eee 0%, #f3f3f3 100%);
}
#toggle:checked ~ .tabnav dl dt:focus a {
  padding-top: 15px;
  border-top: 5px solid #ffa200;
  color: #000;
}
#toggle:checked ~ .tabnav dl dt a {
  display: block;
  padding: 20px 20px;
  text-decoration: none;
  color: #999;
}
#toggle:checked ~ .tabnav dl dd {
  z-index: 2;
  padding: 10px 20px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
  background-color: #eee;
}
body {
  padding: 20px;
}
.button {
  display: inline-block;
  padding: 10px 20px;
  margin-bottom: 20px;
  background-color: #ffa200;
  color: #fff;
  cursor: pointer;
}
.button:before {
  content: 'Enable ';
}
#toggle:checked ~ .button:before {
  content: 'Disable ';
}

    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <input type="checkbox" id="toggle" hidden="hidden" checked="checked"/><label class="button" for="toggle">CSS</label>
<hr />

<section class="tabnav">
  <h1>Vanilla Web Tab Navigation</h1>
  <dl>
    <dt tabindex="1"><a href="#tab1">Tab1</a></dt>
    <dd id="tab1">
      <h2>Tab 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, dolores, eveniet, molestiae itaque consequuntur repellendus minus quidem earum officiis vel doloribus ratione iure et ullam velit assumenda at ducimus ad!</p>
    </dd>
    <dt tabindex="2"><a href="#tab2">Tab2</a></dt>
    <dd id="tab2">
      <h2>Tab 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, dolores, eveniet, molestiae itaque consequuntur repellendus minus quidem earum officiis vel doloribus ratione iure et ullam velit assumenda at ducimus ad! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit modi optio enim ratione ab perferendis neque porro mollitia maxime quae non earum beatae explicabo eligendi amet ipsam nostrum dolorem odit?</p>
    </dd>
    <dt tabindex="3"><a href="#tab3">Tab3</a></dt>
    <dd id="tab3">
      <h2>Tab 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, dolores, eveniet, molestiae itaque consequuntur repellendus minus quidem earum officiis vel doloribus ratione iure et ullam velit assumenda at ducimus ad! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores distinctio fugiat nisi dolorum necessitatibus consequuntur atque fugit voluptatem magnam excepturi veritatis reprehenderit quibusdam aliquam possimus obcaecati tempore reiciendis et accusantium? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ex quas deserunt nihil culpa tempore soluta ab numquam quod dolorem itaque nostrum quidem esse cumque facilis amet adipisci iste facere.</p>
    </dd>
  </dl>
</section>
  
  
</body>
</html>

CSS Tab-Nav CSS Codes

#toggle:checked ~ .tabnav dl {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#toggle:checked ~ .tabnav dl dt {
  order: -1;
  display: block;
  flex: 0 0 auto;
  outline: 0;
}
#toggle:checked ~ .tabnav dl dd {
  display: none;
  margin: 0;
}
#toggle:checked ~ .tabnav dl dd:target {
  display: block;
}
#toggle:checked ~ .tabnav dl dt {
  position: relative;
  box-sizing: border-box;
  background-color: #f5f5f5;
  border-right: 1px solid #ccc;
}
#toggle:checked ~ .tabnav dl dt:last-of-type {
  border-right: 0;
}
#toggle:checked ~ .tabnav dl dt:focus {
  z-index: 1;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  background: linear-gradient(0deg, #eee 0%, #f3f3f3 100%);
}
#toggle:checked ~ .tabnav dl dt:focus a {
  padding-top: 15px;
  border-top: 5px solid #ffa200;
  color: #000;
}
#toggle:checked ~ .tabnav dl dt a {
  display: block;
  padding: 20px 20px;
  text-decoration: none;
  color: #999;
}
#toggle:checked ~ .tabnav dl dd {
  z-index: 2;
  padding: 10px 20px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
  background-color: #eee;
}
body {
  padding: 20px;
}
.button {
  display: inline-block;
  padding: 10px 20px;
  margin-bottom: 20px;
  background-color: #ffa200;
  color: #fff;
  cursor: pointer;
}
.button:before {
  content: 'Enable ';
}
#toggle:checked ~ .button:before {
  content: 'Disable ';
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.