/ Menu

A Simple Menu with JS+CSS3

A Simple Menu with JS+CSS3

A Simple Menu with JS+CSS3.

Made with

Html
Css/SCSS
Javascript

Html

<div class="container">
  <ul class="menu">
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <ul class="links">
    <li><a href="#">Home</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contacts</a></li>
  </ul>
</div>

Css

$main_color : blue;
$primary_color: black;

@import url('https://fonts.googleapis.com/css?family=Montserrat:900');
html,body{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items:center;
}
ul{
  list-style-type:none;
  padding: 0;
  // margin: 25px;
}
.container {
  display: flex;
  align-items: center;
  justify-content:center;
  ul.menu {
    height: 50px;
    width: 50px;
    li {
      position: relative;
      background: $main_color;
      margin: 10px;
      height: 8px;
      width: 50px;
      // border-radius:20px;
      transition: transform .3s, width .3s;
    }
  }
  .active_menu {
    li{
      &:nth-child(1){
        top: 18px;
        transform: rotate(135deg);
        transition: transform .3s;
      }
      &:nth-child(2){
        width: 0;
        // transform: rotate(180deg);
        transition: width .3s;
      }
      &:nth-child(3){
        bottom: 18px;
        transform: rotate(-135deg);
        transition: transform .3s;
      }
    }
  }
  
  ul.links {
    overflow:hidden;
    width: 0;
    margin-left: 0px;
    transition: width .4s, margin-left .4s;
    li{
      margin: 5px;
      a{
        color:$main_color;
        text-decoration:none;
        transition: color .5s;
        text-transform:uppercase;
        font-size:54px;
        font-family: 'Montserrat', sans-serif;
        transition: color .5s, margin-left .5s;
        &:hover {
          color: $primary_color;
          margin-left: 20px;
          transition: color .5s, margin-left .5s;
        }
      }
    }
  }
  .active_links{
    width: 370px !important;
    margin-left: 35px !important;
    transition: width .4s, margin-left .4s;
  }
}

Javascript

function menu(){
  var menu = document.querySelector(".menu");
  var links = document.querySelector(".links");


  menu.addEventListener("click",function(e){
    e.preventDefault();
    if(!(this.classList.contains('active_menu'))){
      this.classList.toggle("active_menu");
      links.classList.add("active_links");
    } else {
      this.classList.remove("active_menu");
      links.classList.remove("active_links");
    }
  });
}
menu();

Author

Speresunko

Demo

See the Pen Menu(JS+CSS3) by Speresunko (@speresunko) on CodePen.

CodeTea

A Nice collection of often useful examples done in HTML JavaScript CSS.

Read More