<div class="container">
  <div class="lines-container">
    <div class="line line-1"></div>
    <div class="line line-2"></div>
    <div class="line line-3"></div>
  </div>
  <ul class="menu">
    <li><a href="#" class="outer">About</a></li>
    <li><a href="#" class="outer blog">Blog</a>
      <ul class="blog-child">
        <li><a href="#" class="inner">Tech</a></li>
        <li><a href="#" class="inner">Travels</a></li>
        <li><a href="#" class="inner">Gaming</a></li>
      </ul>
    </li>
    <li><a href="#" class="outer contact">Contacts</a>
      <ul class="contact-child">
        <li><a href="#" class="inner">Email</a></li>
        <li><a href="#" class="inner">Social Media</a></li>
        <li><a href="#" class="inner">Address</a></li>
      </ul>
    </li>
    <li><a href="#" class="outer">CV</a></li>
  </ul>
  <div class="pointer"></div>
</div>

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

*, *::before, *::after{
    padding: 0;
    margin-bottom: 0;
    box-sizing: border-box;
}

body{
   background-color: #171618; 
   width: 80vw;
   margin:3vh auto;
   font-family: 'Montserrat', sans-serif;
   max-width: 750px;
   overflow: hidden;
}

.lines-container{
    width: 60px;
    margin-left: auto;
    cursor: pointer;
    border: 1px solid #826e53;
    border-radius: 1px;
}
.lines-container:hover{
    background-color:  #826e53;
    border:1px solid palevioletred;
}
.line{
    height: 3px;
    margin: 5px;
    border-radius: 50px;
    background-color: #ffffff;
    margin-right: auto;
    transition: width 0.5s ease-out;
}

.line-1{
    width: 50px;
}
.line-2{
    width: 40px;
}
.line-3{
    width: 30px;
}
.lines-container:hover .line-1{
    width: 30px;
    background-color: palevioletred;
}
.lines-container:hover .line-2{
    width: 40px;
    background-color: palevioletred;
} 
.lines-container:hover .line-3 {
    width: 50px;
    background-color: palevioletred;
}

.menu{
    list-style-type: none;
    border-bottom: 1px solid  #826e53;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s linear;
    position: relative;

}
.pointer{
    width: 0;
    border-width: 10px ;
    border-style: solid;
    border-color:  white #171618  #171618  #171618 ;
    margin-left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
}
.pointer:hover{
    border-color:  palevioletred #171618  #171618  #171618 ;

}
.pointer-up{
    border-color:    #826e53   #826e53 white  #826e53;
    transform: translateY(-21px);
}
.pointer-up:hover{
    border-color:    #826e53   #826e53 palevioletred  #826e53 ;  
}
.blog-child, .contact-child{
    max-height: 0px;
    overflow: hidden;
    transition: all 0.5s linear;
}
a.outer{
    display: block;
    color: whitesmoke;
    text-decoration: none;
    margin-top: 2px;
    background-color:  #826e53;
    padding: 1em;
    transition: all 0.5s linear;
}

a.inner{
    text-decoration: none;
    color: whitesmoke;
    display: block;
    padding: 0.5em 3em;
    border: 1px solid #171618;
    opacity: 0.8;
    transition: all 0.5s linear;    
}
a.inner:hover{
    border:1px solid wheat;
    opacity: 1;
}
.blog, .contact{
    position: relative;
    cursor: inherit;
    pointer-events: none;
}
.blog::after, .contact::after{
   content: "+";
   cursor: pointer;
   pointer-events: all;
   width: 20px;
   height: 20px;
   color: black;
   background-color: white;
   border-radius: 50%;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   right: 5%;
   box-shadow: 1px 3px 1px 1px  #171618 ;
   transition: background-color 0.5s linear;
   
}
.blog:hover::after, .contact:hover::after{
    background-color: palevioletred;
}
.btn-anime::after{
    right: 4.8%;
    bottom: 20%;
    box-shadow: 0px 0px 0px 0px  #171618 ;   
}
.content::after{
    content: "\2212";
}

let cont = document.querySelector(".lines-container");
let menu = document.querySelector(".menu");
let pointer = document.querySelector(".pointer");
let blog = document.querySelector(".blog");
let contact = document.querySelector(".contact");
let blogChild = document.querySelector(".blog-child");
let contactChild = document.querySelector(".contact-child");

cont.addEventListener("click", () => {
  blog.classList.remove("content");
  contact.classList.remove("content");

  if (menu.style.maxHeight) {
    menu.style.maxHeight = null;
    blogChild.style.maxHeight = null;
    contactChild.style.maxHeight = null;
    pointer.style.display = "none";

    setTimeout(() => {
      pointer.classList.remove("pointer-up");
      pointer.style.display = "block";
    }, 500);
  } else {
    menu.style.maxHeight = menu.scrollHeight + "px";
    pointer.style.display = "none";
    setTimeout(() => {
      pointer.classList.toggle("pointer-up");
      pointer.style.display = "block";
    }, 500);
  }
});
pointer.addEventListener("click", () => {
  blog.classList.remove("content");
  contact.classList.remove("content");
  if (menu.style.maxHeight) {
    menu.style.maxHeight = null;
    blogChild.style.maxHeight = null;
    contactChild.style.maxHeight = null;
    pointer.style.display = "none";
    setTimeout(() => {
      pointer.classList.remove("pointer-up");
      pointer.style.display = "block";
    }, 500);
  } else {
    menu.style.maxHeight = menu.scrollHeight + "px";
    pointer.style.display = "none";
    setTimeout(() => {
      pointer.classList.toggle("pointer-up");
      pointer.style.display = "block";
    }, 500);
  }
});
blog.addEventListener("click", () => {
  if (blogChild.style.maxHeight) {
    blogChild.style.maxHeight = null;
    blog.classList.add("btn-anime");
    blog.classList.remove("content");
    setTimeout(() => {
      blog.classList.remove("btn-anime");
    }, 100);
  } else {
    blogChild.style.maxHeight = blogChild.scrollHeight + "px";
    menu.style.maxHeight = menu.scrollHeight + blogChild.scrollHeight + "px";
    blog.classList.add("btn-anime");
    blog.classList.add("content");
    setTimeout(() => {
      blog.classList.remove("btn-anime");
    }, 100);
  }
});
contact.addEventListener("click", () => {
  if (contactChild.style.maxHeight) {
    contactChild.style.maxHeight = null;
    contact.classList.add("btn-anime");
    contact.classList.remove("content");
    setTimeout(() => {
      contact.classList.remove("btn-anime");
    }, 100);
  } else {
    contactChild.style.maxHeight = contactChild.scrollHeight + "px";
    menu.style.maxHeight = menu.scrollHeight + contactChild.scrollHeight + "px";
    contact.classList.add("btn-anime");
    contact.classList.add("content");
    setTimeout(() => {
      contact.classList.remove("btn-anime");
    }, 100);
  }
});