Toggle Menu

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

Toggle menu with animated navigation menu icon created by Vladislav Kirbaba

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Toggle Menu </title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>

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

  
</head>

<body>

  <a href="#nowhere" class="navicon"></a>
<div class="toggle">
  <h1>Toggle Menu</h1>
  <h3>Created by Vladislav Kirbaba</h3>
  <ul class="toggle__menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contacts</a></li>
    <li><a href="#"><span>..and more</span></a></li>
  </ul>
  <ul class="social">
    <li><a href="https://github.com/Kirbaba"><i class="fa fa-github"></i></a></li>
    <li><a href="https://twitter.com/VladKirbaba"><i class="fa fa-twitter"></i></a></li>
   <li> <a href="https://www.facebook.com/VladislavKirbaba"><i class="fa fa-facebook"></i></a></li>
    <li><a href="https://vk.com/vladislavkirbaba"> <i class="fa fa-vk"></i></a></li>
  </ul>
  <small>Inspired by Bruno Cartaxeiro's https://codepen.io/BRN/pen/tjwzl</small>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Kirbaba/toggle-menu-YyJJxZ */
@import url(https://fonts.googleapis.com/css?family=Raleway:400,900,700,500,300);
body {
  background-image: url("https://static.pexels.com/photos/7026/fre-sonneveld.jpg");
  background-position: 50%;
  background-repeat: no-repeat;
  font-family: 'Raleway', sans-serif;
}

h1 {
  font-weight: 300;
  text-transform: uppercase;
  font-size: 40px;
  text-align: center;
}

h3 {
  text-align: center;
  font-weight: 900;
  font-size: 15px;
  margin: 15px;
}

small {
  font-size: 12px;
  text-transform: lowercase;
  font-weight: 300;
  text-align: center;
  display: block;
}

.navicon {
  width: 100%;
  background: transparent;
  margin: 80px auto 40px;
  position: relative;
  height: 30px;
  width: 50px;
  display: block;
  z-index: 99;
  transition: linear 0.5s all;
}
.navicon:before, .navicon:after {
  background: #fff;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  content: "";
  height: 3px;
  left: 0;
  transition: 0.8s ease;
  width: 45px;
}
.navicon:before {
  box-shadow: #fff 0 14px 0 0;
  position: absolute;
  top: 0;
}
.navicon:after {
  position: absolute;
  top: 28px;
}
.navicon--active {
  margin-top: 20px;
  transition: linear 0.5s all;
}
.navicon--active:before {
  box-shadow: transparent 0 0 0 0;
  top: 15px;
  -webkit-transform: rotate(225deg);
          transform: rotate(225deg);
}
.navicon--active:after {
  top: 15px;
  -webkit-transform: rotate(315deg);
          transform: rotate(315deg);
}

.toggle {
  display: block;
  margin: 20px auto;
  width: 30%;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 15px;
  display: block;
  opacity: 0;
  transition: ease-in 0.5s all;
  -webkit-transform: translateY(-200%);
          transform: translateY(-200%);
  min-width: 320px;
}
.toggle--active {
  display: block;
  opacity: 1;
  transition: ease-in 0.5s all;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.toggle__menu {
  margin-bottom: 25px;
}
.toggle__menu li {
  width: 25%;
  display: block;
  margin: 10px auto;
}
.toggle__menu li a {
  text-decoration: none;
  color: #000;
  display: block;
  text-align: center;
  font-size: 17px;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: linear 0.5s all;
  font-weight: 500;
  padding: 5px 0;
}
.toggle__menu li a span {
  text-transform: lowercase;
}
.toggle__menu li a:hover {
  color: #db5523;
  border-bottom: 2px solid #db5523;
  transition: linear 0.5s all;
  -webkit-transform: scale(1.15);
          transform: scale(1.15);
  font-weight: 700;
}

.social {
  display: block;
  width: 70%;
  margin: 25px auto;
  text-align: center;
  font-size: 0;
}
.social li {
  display: inline-block;
  width: 25%;
  text-align: center;
}
.social li a {
  text-align: center;
  color: #000;
  font-size: 25px;
  transition: linear 0.5s all;
}
.social li a:hover {
  color: #db5523;
  transition: linear 0.5s all;
}


/*Downloaded from https://www.codeseek.co/Kirbaba/toggle-menu-YyJJxZ */
$('.navicon').on('click', function (e) {
  e.preventDefault();
  $(this).toggleClass('navicon--active');
  $('.toggle').toggleClass('toggle--active');
});

Comments