kpitsimpl: Animated X-to-Horizontal Lines (Hamburger) Toggle for UI Menu

Here is what you are looking for: https://codepen.io/radagast27/pen/OYmvmd

Implementing this UI feature is just a matter of wiring up some icon animation and fadeIn()/fadeOut() to the menu items.

 <html>  
 <head>  
 <script  
  src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>  
 <script>  
 $(document).ready(function(){  
      $('#nav-icon').click(function(){  
           $(this).toggleClass('open');  
       if($('#menu').css('opacity') == '0'){  
        $('#menu').css('opacity','1');  
        $('#menu').fadeIn(300).css('display','table');  
       }else{  
        $('#menu').css('opacity','0');  
        $('#menu').fadeOut(300).css('display','none');  
       }  
      });  
 });  
 </script>  
 </head>  
 <style>  
 body{  
  background-color: #000000;  
 }  
 #menu{  
   z-index: 5;  
   width: 40%;  
   height: 40%;  
   background-color: rgba(0,0,0, 0.95);  
   position: fixed;  
   font-family: Arial;  
   font-size: 1.5em;  
   text-align: left;  
   left: 100px;  
   top: 0px;  
   opacity: 0;  
   display: table;  
 }  
 .hidden{  
   display: none;  
   visibility: none;  
 }  
 #menu ul{  
   margin: 0;  
   padding: 0;  
   z-index: 10;  
   width: 40%;  
   height: 40%;  
   display: table-cell;  
   vertical-align: left;  
 }  
 #menu ul li{  
   cursor: pointer;  
   text-decoration: none;  
 }  
 #menu ul li:hover{  
   background-color: cyan;  
   -webkit-transition: .15s ease-in-out;  
   -moz-transition: .15s ease-in-out;  
   -o-transition: .15s ease-in-out;  
   transition: .15s ease-in-out;  
 }  
 #menu ul a{  
   letter-spacing: 5px;  
   text-align: left;  
   margin-left: 0px;  
   color: #fff;  
   list-style: none;  
   padding: 0px;  
   line-height: 75px;  
   padding: 10px 70px;  
   text-decoration: none;  
 }  
 #menu ul a:hover{  
   text-decoration: none;  
   color: #fff ;  
 }  
 #nav-icon {  
   z-index: 20;  
  width: 50px;  
  height: 35px;  
  position: relative;  
  margin: 25px;  
  -webkit-transform: rotate(0deg);  
  -moz-transform: rotate(0deg);  
  -o-transform: rotate(0deg);  
  transform: rotate(0deg);  
  -webkit-transition: .5s ease-in-out;  
  -moz-transition: .5s ease-in-out;  
  -o-transition: .5s ease-in-out;  
  transition: .5s ease-in-out;  
  cursor: pointer;  
 }  
 #nav-icon span {  
  display: block;  
  position: absolute;  
  height: 5px;  
  width: 40px;  
  background: #bada33;  
  opacity: 1;  
  -webkit-transform: rotate(0deg);  
  -moz-transform: rotate(0deg);  
  -o-transform: rotate(0deg);  
  transform: rotate(0deg);  
  -webkit-transition: .25s ease-in-out;  
  -moz-transition: .25s ease-in-out;  
  -o-transition: .25s ease-in-out;  
  transition: .25s ease-in-out;  
 }  
 /* Icon 3 */  
 #nav-icon span:nth-child(1) {  
  top: 0px;  
 }  
 #nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {  
  top: 12px;  
 }  
 #nav-icon span:nth-child(4) {  
  top: 24px;  
 }  
 #nav-icon.open span:nth-child(1) {  
  top: 8px;  
  width: 0%;  
  left: 50%;  
 }  
 #nav-icon.open span:nth-child(2) {  
  -webkit-transform: rotate(45deg);  
  -moz-transform: rotate(45deg);  
  -o-transform: rotate(45deg);  
  transform: rotate(45deg);  
 }  
 #nav-icon.open span:nth-child(3) {  
  -webkit-transform: rotate(-45deg);  
  -moz-transform: rotate(-45deg);  
  -o-transform: rotate(-45deg);  
  transform: rotate(-45deg);  
 }  
 #nav-icon.open span:nth-child(4) {  
  top: 8px;  
  width: 0%;  
  left: 50%;  
 }  
 </style>  
 <body>  
 <header>  
   <div id="topbar"> <!-- top bar -->  
       <div id="nav-icon">  
        <span></span>  
        <span></span>  
        <span></span>  
        <span></span>  
       </div>  
     <div id="menu">  
       <ul>  
         <li><a href="#">Home</a></li>  
         <li><a href="#">About Us</a></li>  
         <li><a href="#">Portfolio</a></li>  
         <li><a href="#">Case Studies</a></li>  
         <li><a href="#">Careers</a></li>  
       </ul>  
     </div>  
   </div>  
 </header>  
 </html>  
 </body>

Some minor tweaking of the flexible code referenced above can give you a modern .js transition toggle

Reference: https://jsfiddle.net/f19kz640/

Animated X-to-Horizontal Lines (Hamburger) Toggle for UI Menu

No comments: