slidetoggle - jQuery Toggle for Mobile Menu -
i'm using mobile menu toggles open on screen width of less 768px toggle on screen width higher 769. did change operator < 769 doesn't work.
jquery(function( $ ){ $(".nav-primary .main-nav-menu").addclass("responsive-menu").before('<div class="responsive-menu-icon"></div>'); $(".responsive-menu-icon").click(function(){ $(this).next(".nav-primary .main-nav-menu").slidetoggle(); }); $(window).resize(function(){ if(window.innerwidth > 768) { $(".nav-primary .main-nav-menu, .nav-primary .sub-menu").removeattr("style"); $(".responsive-menu > .menu-item").removeclass("menu-open"); } }); $(".responsive-menu > .menu-item").click(function(event){ if (event.target !== this) return; $(this).find(".sub-menu:first").slidetoggle(function() { $(this).parent().toggleclass("menu-open"); }); }); });
and css
@media screen , (min-width: 769px) { .title-area { float: none; padding-bottom: 0; } .header-image .title-area { padding-bottom: 10px; } .header-image .site-title > a, .header-image .title-area, .site-container, .site-header, .site-header .widget-area, .title-area { width: 100% } .main-nav-menu, .site-header, .site-header .widget-area, .title-area { text-align: center; } .main-nav-menu { padding-right: 0; } .nav-primary { float: none; } .site-title { margin-bottom: 10px; } .entry-comments-link, .main-nav-menu.responsive-menu, .main-nav-menu.responsive-menu > .menu-item > .sub-menu { display: none; } .main-nav-menu.responsive-menu .menu-item, .responsive-menu-icon { display: block; } .nav-primary .main-nav-menu.responsive-menu { padding-bottom: 10px; } .main-nav-menu.responsive-menu .menu-item:hover { position: static; } .main-nav-menu.responsive-menu a, .main-nav-menu.responsive-menu a:hover, .main-nav-menu.responsive-menu .current-menu-item > { background: none; display: block; line-height: 1; padding: 16px 20px; text-align: left; } .main-nav-menu.responsive-menu .menu-item-has-children { cursor: pointer; } .main-nav-menu.responsive-menu .menu-item-has-children > { margin-right: 60px; } .main-nav-menu.responsive-menu > .menu-item-has-children:before { content: "\f347"; float: right; font: normal 16px/1 'dashicons'; height: 16px; padding: 15px 20px; right: 0; text-align: right; z-index: 9999; } .main-nav-menu.responsive-menu .menu-open.menu-item-has-children:before { content: "\f343"; } .main-nav-menu.responsive-menu .sub-menu { background-color: rgba(255, 255, 255, 0.1); left: auto; margin: 0; opacity: 1; position: relative; -moz-transition: opacity .4s ease-in-out; -ms-transition: opacity .4s ease-in-out; -o-transition: opacity .4s ease-in-out; -webkit-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; width: 100%; z-index: 99; } .main-nav-menu.responsive-menu .sub-menu .sub-menu { background-color: transparent; margin: 0; padding-left: 25px; } .main-nav-menu.responsive-menu .sub-menu li a, .main-nav-menu.responsive-menu .sub-menu li a:hover { padding: 16px 20px; position: relative; text-transform: none; width: 100%; } }
Comments
Post a Comment