如何添加 X 微调型汉堡菜单

Question

Hey all have this menu which i wish to have toggle on click X and again back to hamburger style.

could someone help me out here? I just have no clue how that is achieved. sharing my menu codes here. hope some expert could help me out.

here are my menu codes

 $(document).ready(function() { $('#menulink').click(function(event) { event.preventDefault(); if($('.navigation-wrapper').hasClass('show-menu')) { $('.navigation-wrapper').removeClass('show-menu'); $('.navigation').hide(); $('.navigation li').removeClass('small-padding'); } else { $('.navigation-wrapper').addClass('show-menu'); $('.navigation').fadeIn(); $('.navigation li').addClass('small-padding'); } }); });

 .hamburger-wrapper { padding: 0; background: #000; position: fixed; top: 40px; left:90px; width: 50px; z-index: 999; }.inner-hamburger-wrapper { background: #ca1404; width: 100%; padding: 8px 0; }.hamburger { width: 50%; height: 3px; margin: 4px auto; background: #fff; border-radius: 2px; }.menu-title { position: absolute; top: 10px; right: 0; width: 50%; }.menu-title p { color: #fff; font-size: 18px; line-height: 22px; text-align: center; }.navigation-wrapper { background: linear-gradient(180deg, #C7100C 0%, #3F5EFB 100%); padding: 40px 0 0 0; position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 900; display: none; }.navigation { padding: 50px 5% 0 5%; display: none; }.show-menu { display: block; }.navigation li { list-style: none; margin: 50px 0; transition: all ease.6s; }.navigation li.small-padding { margin: 0; }.navigation li a { display: block; padding: 10px 0 10px 1%; color: #fff;important: text-decoration; none: font-size; 150%: letter-spacing. ;1em: border-left; 3px solid #000: -moz-transition. all ease;3s: -webkit-transition. all ease;3s: -ms-transition. all ease;3s: -o-transition. all ease;3s: transition. all ease;3s. }:navigation li a:hover { color; #fff: padding-left; 2%: border-left; 3px solid #eee: } @media (min-width: 320px) and (max-width. 768px) {:hamburger-wrapper { padding; 0: background; #000: position; fixed: top; 30px: left;5px: width; 50px: z-index; 999. }:navigation li a { display; block: padding; 10px 0 10px 1%: color; #bbb: text-decoration; none: font-size; 90%: letter-spacing. ;1em: border-left; 3px solid #000: -moz-transition. all ease;3s: -webkit-transition. all ease;3s: -ms-transition. all ease;3s: -o-transition. all ease;3s: transition. all ease;3s: border-bottom, 1px solid rgba(255, 255, } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a id="menulink" href="#"> <div class="hamburger-wrapper"> <div class="inner-hamburger-wrapper"> <div class="hamburger"></div> <div class="hamburger"></div> <div class="hamburger"></div> </div> </div> </a> <div class="navigation-wrapper"> <ul class="navigation"> <li><a href="#">Home</a></li> <li><a href="#">Website Design</a></li> <li><a href="#">Search Engine Optimization</a></li> <li><a href="#">User Experience</a></li> <li><a href="#">AB Testing</a></li> <li><a href="#">Contact</a></li> </ul> </div>

would appreciate your kind help.

Thanks in advance

Answer 1

You should do the following things:

1. add a class like 'active' to the hamburger button when active (Jquery > toggleClass)
2. the three lines in the button can be animated seperately by making classes for each of them: #menulink.active.hamburger-wrapper.inner-hamburger-wrapper div:nth-of-type(1){}
3. have transitions and rotation on each.hamburger element: 2 make a cross, 1 disappears.