Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!-- button -->
- <a class="mobile-menu js-touch-menu" href="#">
- <span></span>
- </a>
- <!-- css -->
- .mobile-menu {
- background: #ff6262 none repeat scroll 0 0;
- display: none;
- height: 40px;
- padding: 9px;
- position: fixed;
- right: 0;
- text-transform: uppercase;
- top: 0;
- width: 53px;
- z-index: 99999;
- }
- .mobile-menu span {
- background-color: #fff;
- display: block;
- height: 2px;
- margin: 8px auto;
- position: relative;
- width: 23px;
- transition: all 0.1s ease-in-out 0s;
- }
- .mobile-menu span:before,
- .mobile-menu span:after {
- background: #fff none repeat scroll 0 0;
- content: "";
- display: block;
- height: 2px;
- left: 0;
- position: absolute;
- right: 0;
- top: -8px;
- @include transition($default-transition);
- }
- .mobile-menu span:after {
- bottom: -8px;
- top: auto;
- }
- .mobile-menu.active span{
- background-color: transparent;
- border-color:transparent;
- }
- .mobile-menu.active span:before {
- left: 3px;
- right: 3px;
- top: 0;
- @include rotate(-45deg);
- }
- .mobile-menu.active span:after {
- left: 3px;
- right: 3px;
- top: 0;
- @include rotate(45deg);
- }
- .fixid{
- position: fixed;
- z-index: 999;
- }
- <!-- js -->
- var touch = $('.js-touch-menu');
- var menu = $('.header-nav');
- var header = $('header');
- $(touch).on('click', function(e) {
- e.preventDefault();
- $(this).toggleClass('active');
- menu.slideToggle();
- header.toggleClass('fixid');
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement