Awesome Toggle Menu Design Javascript CSS

by Posted on

The toggle menu we see here is a combined result of HTML, CSS, and JavaScript. Its a unique but a good way to present all the menu components along with additional information without effecting the present content. As with the previous example initially, there’s a toggle hamburger menu icon.The first thing you’ll notice after clicking it is its animation effect. The icon rotates in a wheel-like fashion bringing down the navigation menu as a pop up from the top. The navigation menu consists of animation of its own with CSS. The hovering effect on the menu component is the change in font color and slow zooming with an underline appearing at the bottom for the most. While social media share and contact icons just change the theme color. The toggle menu also causes the content to slightly shift a bottom matching the synchronization between menu and content movement.

Awesome Toggle Menu Design Javascript CSS

HTML

<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>
</div>


CSS

@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;
  -webkit-transition: linear 0.5s all;
  transition: linear 0.5s all;
}
.navicon:before, .navicon:after {
  background: #fff;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  content: "";
  height: 3px;
  left: 0;
  -webkit-transition: 0.8s ease;
  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;
  -webkit-transition: linear 0.5s all;
  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;
  -webkit-transition: ease-in 0.5s all;
  transition: ease-in 0.5s all;
  -webkit-transform: translateY(-200%);
          transform: translateY(-200%);
  min-width: 320px;
}
.toggle--active {
  display: block;
  opacity: 1;
  -webkit-transition: ease-in 0.5s all;
  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;
  -webkit-transition: linear 0.5s all;
  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;
  -webkit-transition: linear 0.5s all;
  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;
  -webkit-transition: linear 0.5s all;
  transition: linear 0.5s all;
}
.social li a:hover {
  color: #db5523;
  -webkit-transition: linear 0.5s all;
  transition: linear 0.5s all;
}


JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
$(function() {  
$('.navicon').on('click', function (e) {
  e.preventDefault();
  $(this).toggleClass('navicon--active');
  $('.toggle').toggleClass('toggle--active');
});
});

See live demo and download source code.
|

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

This awesome script developed by Kirbaba. Visit their official repository for more information and follow for future updates.

Published by admin