Toggle navigation CSS only

In this example below you will see how to do a Toggle navigation CSS only with some HTML / CSS and Javascript

The 2 main solutions to create a toggle navigation without javascript. The solutions use the :target and :checked pseudo-elements.

Thumbnail
This awesome code was written by tibomahe, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tibomahe ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Toggle navigation CSS only</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <header id="header-first-demo" class="header-first-demo">
  <a id="jump-top" href="#menu-first-demo" class="menu-link "><span class="fa fa-bars"></span></a>
  <nav id="main-nav" roll="navigation" class="main-nav">

    <ul id="menu-first-demo" class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact</a></li>
      <li class="back"><a href="#header">back</a>
      </li>
    </ul>
  </nav>
</header>

<section>
  <p>The first method to create a CSS-only toggle navigation is presented by <a href="http://bradfrostweb.com/blog/post/this-is-an-updated-website/">Brad Frost</a>, using a no JS navigation pattern found by <a href="http://www.netmagazine.com/tutorials/build-smart-mobile-navigation-without-hacks">Aaron Gustafson</a>. It uses the :target pseudo-element to open the toggle menu when its toggler is targeted.
</section>

<header id="header-second-demo" class="header-second-demo">
  <nav>
    <input type="checkbox" id="nav"><label for="nav"><span class="fa fa-bars"></span></label>
    <ul>
      <li><a href="#">Home</a></li>       
      <li>
        <a href="#">Blog</a>
        <ul>
          <li><a href="#">Web</a></li>
          <li><a href="#">Print</a></li>      
        </ul>
      </li>
      <li><a href="#">Products</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<section>
  <p>The second method to create a CSS-only toggle navigation is based on the state of a checkbox. On mobile view, the hamburger button is shown and once clicked activates the checkbox. We then use the :checked pseudo-element to show the toggle menu. The example here is adapted from <a href="https://codepen.io/andreasstorm/pen/lriga" target="_blank">https://codepen.io/andreasstorm/pen/lriga</a>
</section>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/tibomahe/toggle-navigation-css-only-BjoJdb */
.header-first-demo {
  height: 50px;
  background-color: #333;
  position: relative;
}
.header-first-demo .menu-link {
  color: white;
  background-color: transparent;
  line-height: 50px;
  width: 50px;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1001;
}
.header-first-demo .menu-link:hover {
  color: #222;
}
.header-first-demo .menu li a {
  color: white;
  text-decoration: none;
  background-color: #333;
  display: inline-block;
  line-height: 40px;
  border-bottom: 1px solid #333333;
  width: 100%;
}
.header-first-demo .menu li a:hover {
  color: #222;
}

body:not(:target) #menu-first-demo {
  margin: 0;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  padding: 50px 0;
}
body:not(:target) #menu-first-demo li {
  width: 100%;
  height: 0;
  line-height: 0;
  overflow: hidden;
}
body:not(:target) #menu-first-demo li a {
  padding-left: 40px;
}
body:not(:target) #menu-first-demo:target {
  z-index: 1001;
}
body:not(:target) #menu-first-demo:target li {
  height: 2em;
  line-height: auto;
  overflow: visible;
  -webkit-transition: height 0.25s;
  -moz-transition: height 0.25s;
  -o-transition: height 0.25s;
  transition: height 0.25s;
}
body:not(:target) #menu-first-demo:target li.back {
  height: 0;
  line-height: 0;
}
body:not(:target) #menu-first-demo:target li.back a {
  width: 100%;
  background-color: transparent;
  border: none;
  height: auto;
  position: absolute;
  top: -101em;
  bottom: -101em;
  left: 0;
  right: 0;
  text-indent: -999em;
  z-index: -1;
}

@media (min-width: 768px) {
  .menu-link {
    display: none;
  }

  body:not(:target) #menu-first-demo {
    padding-top: 0;
  }
  body:not(:target) #menu-first-demo li {
    display: inline;
    border: none;
  }
  body:not(:target) #menu-first-demo li a {
    color: white;
    line-height: 50px;
    padding: 0;
    width: auto;
    min-width: 100px;
    border: none;
    background-color: transparent;
    text-align: center;
  }
  body:not(:target) #menu-first-demo li a:hover {
    color: black;
  }
  body:not(:target) #menu-first-demo li.back {
    display: none;
  }
}
.header-second-demo {
  background: #333;
  height: 50px;
  position: relative;
}
.header-second-demo nav > ul {
  padding: 0;
}
.header-second-demo nav > ul > li {
  text-align: center;
  line-height: 50px;
  width: auto;
  min-width: 100px;
  list-style: none;
  float: left;
}
.header-second-demo nav > ul > li > a {
  cursor: pointer;
  display: block;
  outline: none;
  width: 100%;
  text-decoration: none;
}
.header-second-demo nav > ul > li li ul li {
  width: 100%;
  text-align: left;
}
.header-second-demo nav > ul li ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  z-index: 2000;
  background: #333;
  padding: 0;
  list-style: none;
}
.header-second-demo nav > ul li ul li > a {
  text-decoration: none;
}
.header-second-demo nav ul li:hover {
  cursor: pointer;
  position: relative;
}
.header-second-demo nav ul li:hover ul {
  display: block;
}
.header-second-demo nav ul li:hover > a {
  color: #777;
}
.header-second-demo nav a {
  color: white;
}
.header-second-demo [type="checkbox"], .header-second-demo label {
  display: none;
}
@media screen and (max-width: 768px) {
  .header-second-demo nav ul {
    display: none;
  }
  .header-second-demo nav ul li {
    display: block;
    float: none;
    width: 100%;
    text-align: left;
    background: #333;
    text-indent: 20px;
  }
  .header-second-demo nav > ul > li {
    margin-left: 0;
  }
  .header-second-demo nav > ul li ul {
    display: block;
    position: relative;
    width: 100%;
    z-index: 9999;
    float: none;
  }
  .header-second-demo nav > ul li ul li {
    display: block;
    float: none;
    text-indent: 40px;
  }
  .header-second-demo label {
    display: block;
    background: transparent;
    width: 50px;
    line-height: 50px;
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
    color: white;
  }
  .header-second-demo [type="checkbox"]:checked ~ ul {
    display: block;
    z-index: 9999;
    position: absolute;
    right: 0;
    left: 0;
    top: 50px;
    margin: 0;
  }
}

Comments