Pure CSS Responsive Menu

In this example below you will see how to do a Pure CSS Responsive Menu with some HTML / CSS and Javascript

A pure CSS responsive menu that uses checkbox input. Includes media queries, which are best viewed in Debug Mode.

Thumbnail
This awesome code was written by JurianAP, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright JurianAP ©
  • HTML
  • CSS
  • JavaScript
    <nav class="navBar">
  <nav class="wrapper">
    <div class="logo"></div><!-- Logo -->
    <input type="checkbox" id="menu-toggle" />
      <label for="menu-toggle" class="label-toggle"></label>
    <ul>
      <li><a href="#">Lorem</a></li>
      <li><a href="#">Ipsum</a></li>
      <li><a href="#">Serum</a></li>
    </ul>
  </nav>
</nav>
<header class="wrapper">
  <h1>TOP 10 OVERWINNINGEN VOOR DE NATUUR IN 2017</h1>
</header>

<main>
  <h1>swag</h1>
</main>
<p>yolo ma niggah</p>

/*Downloaded from https://www.codeseek.co/JurianAP/pure-css-responsive-menu-YYEdJd */
    @import url(https://fonts.googleapis.com/css?family=Oswald:400,700);

//Color Variables
$color1: #E84545; //Red
$color2: #53354A; //Plum
$color3: #903749; //Maroon

// Base Styles
body {
  background-color: $color1;
  color: $color2;
  font-family: 'Oswald', sans-serif;
  line-height: 2em;
  text-transform: uppercase;
}

h1 {
  font-size: 3em;
  padding: 3em 0 1em 0;
}

.navBar {
  background-color: $color2;
  position: fixed;
  min-width: 100%;
}

.logo {
  background-color: $color1;
  display: inline-block;
  height: 45px;
  margin: 1em 0;
  width: 45px;
}

// Content Wrapper
.wrapper {
  margin: 0 auto;
  max-width: 960px;
  padding: 0 2%;
}

// Full Navigation, including mobile menu
nav {
  ul {
    display: flex;
    justify-content: space-between;
    list-style-type: none;
    width: 50%;
    
    a {
      color: $color1;
      text-decoration: none;
      transition: all .5s ease;

      &:hover {color: $color3;}
    }
  }
  
  li  {
    display: inline-block;
  }
  
  #menu-toggle {display: none;}
  
  .label-toggle {display: none;}
  
  .wrapper {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }
  
  @media screen and (max-width: 768px) {
    nav {
      ul {
        a {
          color: $color2;
        }
      }
    }
    ul {
      background-color: $color1;
      display: block;
      height: 0;
      list-style-type: none;
      opacity: 0;
      text-align: center;
      transition: all 1s ease;
      width: 100%;
      visibility: hidden;
    }
    
    li {
      border-bottom: 2px solid $color2;
      color: $color2;
      display: block;
      font-size: 1.5em;
      padding: 2em 0;
    }
  
    #menu-toggle:checked ~ ul {
      opacity: 1;
      height: 100vh;
      visibility: visible;
    }
    
    .label-toggle {
      background: linear-gradient(to bottom, $color1 0%, $color1 20%, transparent 20%, transparent 40%, $color1 40%, $color1 60%, transparent 60%, transparent 80%, $color1 80%, $color1 100%); //Gradient Hamburger
      cursor: pointer;
      display: block;
      float: right;
      height: 35px;
      margin-top: 1em;
      width: 35px;
    }
    
    .wrapper {display: block;}
  }
}
main{
  background-color: yellow;
}


/*Downloaded from https://www.codeseek.co/JurianAP/pure-css-responsive-menu-YYEdJd */
    

Comments