Skip to content

Instantly share code, notes, and snippets.

@Pavracer
Created June 30, 2020 02:32
Show Gist options
  • Save Pavracer/85c644b0bd446720b7c77475d22147b9 to your computer and use it in GitHub Desktop.
Save Pavracer/85c644b0bd446720b7c77475d22147b9 to your computer and use it in GitHub Desktop.
/*Proper Collapsable Mobile Menu*/
/*Proper Collapsable Mobile Menu*/
ul.et_extra_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_extra_mobile_menu li.page_item_has_children .mobile-toggle,
.et-db #et-boc .et-l ul.et_extra_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_extra_mobile_menu li.page_item_has_children .mobile-toggle {
width: 44px;
height: 100%;
padding: 0px !important;
max-height: 44px;
position: absolute;
right: 0px;
top: 0px;
z-index: 999;
background-color: transparent;
}
ul.et_extra_mobile_menu > li.menu-item-has-children,
ul.et_extra_mobile_menu > li.page_item_has_children,
ul.et_extra_mobile_menu > li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_extra_mobile_menu > li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_extra_mobile_menu > li.page_item_has_children,
.et-db #et-boc .et-l ul.et_extra_mobile_menu > li.menu-item-has-children .sub-menu li.menu-item-has-children {
position: relative;
}
.et_extra_mobile_menu .menu-item-has-children > a,
.et-db #et-boc .et-l .et_extra_mobile_menu .menu-item-has-children > a {
background-color: transparent;
}
ul.et_extra_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_extra_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_extra_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_extra_mobile_menu .menu-item-has-children .sub-menu {
display: none !important;
visibility: hidden !important;
}
ul.et_extra_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_extra_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_extra_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_extra_mobile_menu .menu-item-has-children .sub-menu.visible {
display: block !important;
visibility: visible !important;
}
ul.et_extra_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_extra_mobile_menu li.menu-item-has-children .mobile-toggle {
text-align: center;
}
ul.et_extra_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_extra_mobile_menu li.menu-item-has-children .mobile-toggle::after {
top: 10px;
position: relative;
font-family: "ETModules";
}
ul.et_extra_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_extra_mobile_menu li.menu-item-has-children .mobile-toggle::after {
content: "\4c";
}
ul.et_extra_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_extra_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after {
content: '\4d';
}
<script id="dt-collapsable-menu-items">
jQuery(function ($) {
$(document).ready(function () {
$("body ul.et_extra_mobile_menu li.menu-item-has-children, body ul.et_extra_mobile_menu li.page_item_has_children").append('<a href="#" class="mobile-toggle"></a>');
$('ul.et_extra_mobile_menu li.menu-item-has-children .mobile-toggle, ul.et_extra_mobile_menu li.page_item_has_children .mobile-toggle').click(function (event) {
event.preventDefault();
$(this).parent('li').toggleClass('dt-open');
$(this).parent('li').find('ul.children').first().toggleClass('visible');
$(this).parent('li').find('ul.sub-menu').first().toggleClass('visible');
});
iconFINAL = 'P';
$('body ul.et_extra_mobile_menu li.menu-item-has-children, body ul.et_extra_mobile_menu li.page_item_has_children').attr('data-icon', iconFINAL);
$('.mobile-toggle').on('mouseover', function () {
$(this).parent().addClass('is-hover');
}).on('mouseout', function () {
$(this).parent().removeClass('is-hover');
})
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment