Back Menu JS

=========================================================== BACK MENU JS (WITH SMOOTHNESS) ===========================================================



======================================= JS DEPARTMENT =======================================

<script>

$(function() {
    //===== Add js-enabled class in body
    $('.custom-menu-primary').addClass('js-enabled');

    //========= add mobile-trigger
    $('.custom-menu-primary').after('<div class="mobile-trigger">Menu</div>');

    //========= add child-trigger
    $('.custom-menu-primary .flyouts .hs-item-has-children > a').after(' <div class="child-trigger"><i></i></div>');

    //========= wrap custom-menu-primary with a div
    $('.custom-menu-primary').wrapInner('<div class="inner-menu-section"></div>');

    //========= add back menu in each sub menu section
    $('.custom-menu-primary .hs-menu-wrapper > ul ul').prepend('<li class="dl-back"><a href="javascript:void(0);">Back</a></li>');

    //======== add seprate class in each li
    $('.custom-menu-primary .hs-menu-wrapper > ul li').each(function() {
        $(this).addClass($(this).children('a').text().split(" ").join('-').toLowerCase().replace("?", ""));
    });

    //========= add mobile-open class in body on click of mobile-trigger
$('.mobile-trigger').click(function() {
    $('body').toggleClass('mobile-open');
    setTimeout (function(){
     $('.custom-menu-primary .hs-menu-wrapper > ul li').removeClass('unActiveMenu').removeClass('activeMenu');
       $('.custom-menu-primary').removeClass('active-menu');
       $('.inner-menu-section').removeClass('level-1').removeClass('level-2').removeClass('level-3').removeClass('level-4').removeClass('level-5');
    }, 300);
    return false;
    });

    //========= remove mobile-open class on body click
    $('body').click(function() {
        $('body').removeClass('mobile-open');
    });
    $('.mobile-trigger,.custom-menu-primary').click(function(e) {
        e.stopPropagation();
    });

    //======== child trigger click function
    $('.child-trigger').click(function() {
        $(this).parent('li').removeClass('unActiveMenu').addClass('activeMenu');

        var currentThis = $(this);
        setTimeout(function() {
            currentThis.parent('li').siblings().removeClass('activeMenu').addClass('unActiveMenu');
        }, 300);

        if ($(this).parent().hasClass('hs-menu-depth-1')) {
            $('.inner-menu-section').addClass('level-1');
            $('.custom-menu-primary').addClass('active-menu');
        }
        if ($(this).parent().hasClass('hs-menu-depth-2')) {
            $('.inner-menu-section').addClass('level-2');
        }
        if ($(this).parent().hasClass('hs-menu-depth-3')) {
            $('.inner-menu-section').addClass('level-3');
        }
        if ($(this).parent().hasClass('hs-menu-depth-4')) {
            $('.inner-menu-section').addClass('level-4');
        }
        if ($(this).parent().hasClass('hs-menu-depth-5')) {
            $('.inner-menu-section').addClass('level-5');
        }
    });

    //======== back menu click function
    $('.dl-back').click(function() {
        $(this).parent().parent().siblings().removeClass('unActiveMenu');
        var currentThis = $(this);
        setTimeout(function() {
            currentThis.parent().parent().removeClass('activeMenu');
        }, 300);

        if ($(this).siblings().hasClass('hs-menu-depth-2')) {
            $('.inner-menu-section').removeClass('level-1');
            $('.custom-menu-primary').removeClass('active-menu');
        }
        if ($(this).siblings().hasClass('hs-menu-depth-3')) {
            $('.inner-menu-section').removeClass('level-2');
        }
        if ($(this).siblings().hasClass('hs-menu-depth-4')) {
            $('.inner-menu-section').removeClass('level-3');
        }
        if ($(this).siblings().hasClass('hs-menu-depth-5')) {
            $('.inner-menu-section').removeClass('level-4');
        }
        if ($(this).siblings().hasClass('hs-menu-depth-6')) {
            $('.inner-menu-section').removeClass('level-5');
        }
    });

    //========= Add parent link in child section (optional part)
    $('.dl-back').each(function() {
        var currentText = $(this).parent().siblings('a').text();
        var currentLink = $(this).parent().siblings('a').attr('href');
        $(this).after('<li class="parent-link"><a href="' + currentLink + '">' + currentText + '</a></li>');
    });

});

</script>

======================================= CSS DEPARTMENT =======================================

<style>

@media (min-width:768px){
.custom-menu-primary li.dl-back,
.custom-menu-primary li.parent-link{
display: none !important;
}

}

@media (max-width:767px){
     .header-container-wrapper, .body-container-wrapper, .footer-container-wrapper {
         position: relative;
         left: 0;
         transition: all .3s ease-in-out;
    }
     .mobile-open .header-container-wrapper, .mobile-open .body-container-wrapper, .mobile-open .footer-container-wrapper {
         left:-250px 
    }
     .custom-menu-primary{
         position: fixed;
         padding-top: 0;
        /* Makes room for button */
         margin: 0;
         top:0;
         right:-250px;
         background: #f5f5f5;
         width: 250px !important;
         height: 100%;
         transition: all .3s ease-in-out;
         z-index: 999;
         overflow: auto;
         overflow-x: hidden;
    }
     .mobile-open .custom-menu-primary{
         right:0;
    }
     .child-trigger{
         display: block !important;
        /* Hide button on Desktop */
         cursor: pointer;
        /* Mouse pointer type on hover */
         position: relative;
         z-index:1;
         width: 100% !important;
        /* Button width */
         height: 45px !important;
        /* Button height */
         padding: 0 !important;
         margin-top: -45px;
    }
     .custom-menu-primary .hs-menu-wrapper > ul li{
         position:static !important;
    }
     .custom-menu-primary .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper {
         position: absolute !important;
         top: 0;
         left: 100%;
         display: block;
         padding: 0;
    }
     .custom-menu-primary .hs-menu-wrapper > ul ul li.dl-back > a {
         text-indent: 30px !important;
         background: #f5f5f5 !important;
    }
     .custom-menu-primary .hs-menu-wrapper > ul ul li.dl-back > a:after {
         content: '';
         position: absolute;
         left: 25px;
         top: 50%;
         margin-top: -4px;
         width: 6px;
         height: 8px;
    }
     .custom-menu-primary .hs-menu-wrapper > ul li.parent-link > a {
         color: #000 !important;
    }
     .custom-menu-primary .hs-menu-wrapper > ul ul {
         display: none !important;
    }
     .custom-menu-primary .hs-menu-wrapper > ul .unActiveMenu{
         display: none !important;
    }
     .custom-menu-primary .hs-menu-wrapper > ul .unActiveMenu > ul.hs-menu-children-wrapper {
         display: none !important;
    }
     .custom-menu-primary .hs-menu-wrapper > ul .activeMenu > ul.hs-menu-children-wrapper {
         display: block !important;
    }
     .inner-menu-section{
         position:relative;
         transition:all 0.3s ease-in-out;
         left:0;
    }
     .inner-menu-section.level-1 {
         left: -250px;
    }
     .inner-menu-section.level-1.level-2 {
         left: -500px;
    }
     .inner-menu-section.level-1.level-2.level-3 {
         left: -750px;
    }
     .inner-menu-section.level-1.level-2.level-3.level-4 {
         left: -1000px;
    }
     .inner-menu-section.level-1.level-2.level-3.level-4.level-5 {
         left: -1250px;
    }
}


</style>

IF any query regarding contact -- Vishal Gaurav



Comments

Post a Comment

Popular posts from this blog

Pagination of multiple recent post blog

<div class="blog-section">   <div class="blog-listing-wrapper cell-wrapper">     <div class="post-listing clearfix">       {% set blog_one_posts = blog_recent_posts('6126215542', 200) %} <!-- sets a variable for a the 5 most recent posts of my default COS blog -->       {% set blog_two_posts = blog_recent_posts('6126300566', 200) %}  <!-- sets a variable for a the 5 most recent posts of my blog id 47082700. You can find the blog id in the URL of the blog dashboard for a particular blog-->       {% set blog_three_posts = blog_recent_posts('6130453958', 200) %}       {% set blog_four_posts = blog_recent_posts('6131348719', 200) %}       {% set all_posts = (blog_one_posts + blog_two_posts + blog_three_posts + blog_four_posts) | sort(true, false, 'publish_date')  %} <!-- combines the two variables into a single variable and sorts them by publish date. ...
Read more

Posts by category

Image
ADD " module.blog" as a field in custom module <h2>Posts by category</h2> {% set topics_list = blog_topics(module.blog, 250) %} {% if topics_list %} <ul> {% for topic in topics_list %}   <li><strong>Category: </strong> <a href="{{ blog_tag_url(module.blog, topic.slug) }}">{{ topic.name }}</a></li> {% set topic_posts = blog_recent_topic_posts( module.blog , topic.slug , 10) %}   {% for topic_post in topic_posts %}     {% if topic_post.absolute_url != request.full_url %}       <div class="post-title"><a href="{{topic_post.absolute_url}}">{{ topic_post.name }}</a></div>     {% endif %}   {% endfor %} {% endfor %} </ul> {% endif %}
Read more

Js Code

Javascript Codes Wrap Text Node function wrapSpan(node, index) { if (node.nodeName === '#text') { var text = node.textContent; var s = document.createElement('span'); s.textContent = text; node.parentElement.insertBefore(s, node.parentElement.childNodes[index]); node.remove(); } else { var length = node.childNodes.length; // childNodes is a collection, not an array. :-/ for (var i = 0; i Use this for Add Class on menu links using Javascript (function(){ var el = document.querySelectorAll('.custom-menu-primary a') el.forEach(function(e){ e.classList = e.textContent.toLowerCase().replace(/[^a-zA-Z0-9\.-]+/g,""); }) })(); Use this for Add Class active class on categories (function(){ var value1 = window.location.href.substring(window.location.href.lastIndexOf('/') + 1); docume...
Read more