Hello i have this codes to try to get this working. But when on ./index.html all the li are given a class of current_yes exept for the ./clients.html link. And the other way aroud if i go to Clinets/clients.html then all li exept ./index.html are given a class of current_yes. I also use this script with a menu with no sub level and for this menu it works. So if any boudy have any idea please share. Thank you.

jQuery(document).ready(function($){

    var url = location.href;

    $('.ribbon a').filter(function() {

    return this.href == url;})

    .closest('li').addClass('current_yes');

});

And this is how my menu html looks like:

<!-- Responsive menu -->
<div class="ribbon">
<div class="rmm style">
<ul>
<li>
<a href="./index.html">HOME</a>
</li>
<li>
<a href="">PROJECTS</a>
<ul>
<li>
<a href="">IKEA - NORWAY</a>
</li>
<li>
<a href="">FASTEC - SWEDEN</a>
</li>
</ul>
</li>
<li>
<a href="./clients.html">CLIENTS</a>
<ul>
<li>
<a href="">IKEA</a>
</li>
<li>
<a href="">FASTEC</a>
</li>
</ul>
</li>
<li>
<a href="">CONTACT US</a>
</li>
<li>
<a href="">WEBSHOP</a>
</li>
<li>
<a href="">ADMIN</a>
<ul>
<li>
<a href="">STAFF</a>
</li>
<li>
<a href="">DOCUMENTS</a>
</li>
</ul>
</li>
</ul>
</div>
</div>

I also have a js script that make the menu function it looks like this:

function adaptMenu() {
    /*  toggle menu on resize */
    $('.rmm').each(function() {
        // initialize vars
        var maxWidth = 0;
        var width = 0;

        // width of menu list (non-toggled)
        $('.rmm-menu').children("li").each(function() {
            if($(this).parent().hasClass('rmm-menu')){
                width = $(this).outerWidth();//outerWidth();
                if(width>0){
                    maxWidth += width;
                }
            }
        });

        // compare width
        var width = $('.rmm').css('max-width');
        width = width.replace('px', ''); 

        if ( $(this).parent().width() > width ) {
            $('.rmm-menu').removeClass("rmm-mobile");

            //remove all classes from mobile verion
            $(".rmm-menu ul").removeClass("rmm-subview");
            $(".rmm-menu li").removeClass("rmm-subover-hidden");
            $(".rmm-menu li").removeClass("rmm-subover-visible");
            $(".rmm-menu a").removeClass("rmm-subover-header");

            $(".rmm-toggled").removeClass("rmm-closed");
            $('.rmm-toggled').hide();

            //$('.rmm-toggled').removeClass("rmm-view");
            //$('.rmm-toggled').addClass("rmm-closed");
        }else {
            $('.rmm-menu').addClass("rmm-mobile");
            $('.rmm-toggled').show();
            $('.rmm-toggled').addClass("rmm-closed");

            //$('.rmm-toggled').removeClass("rmm-closed");
        }
    });
}

function responsiveMultiMenu() {
    $('.rmm').each(function() {
        // create mobile menu classes here to light up HTML
        $(this).find("ul").addClass("rmm-submenu");
        $(this).find("ul:first").addClass("rmm-menu");
        $(this).find("ul:first").removeClass("rmm-submenu");
        $(this).find('.rmm-submenu').prepend( '<li class="rmm-back"><a href="#">BACK</a></li>' );
        $(this).find("ul").prev().addClass("rmm-dropdown");

        // initialize vars
        var maxWidth = 0;
        var width = 0;

        // width of menu list (non-toggled)
        $('.rmm-menu').children("li").each(function() {
            if($(this).parent().hasClass('rmm-menu')){
                width = $(this).outerWidth();//outerWidth();
                if(width>0){
                    maxWidth += width;
                }
                console.log(width)
            }
        });

        if ($.support.leadingWhitespace) {
            $(this).css('max-width' , (maxWidth+5)+'px');
        }else{
            $(this).css('width' , (maxWidth+5)+'px');
        }

        // create dropdown button
        var str=''
        str+='<div class="rmm-toggled rmm-view rmm-closed">'
            str+='<div class="rmm-toggled-controls">'
                str+='<div class="rmm-toggled-title">Navigation</div>';
                str+='<div class="rmm-toggled-button"><span> </span><span> </span><span> </span></div>';
            str+='</div>';
        str+='</div>';

        $(this).prepend(str);
    });

    // click interacts in mobile wersion
    $('.rmm-dropdown').click(function (e) {
        if($(this).parents(".rmm-menu").hasClass('rmm-mobile')){
            e.preventDefault();
            e.stopPropagation();

            $(this).next().addClass("rmm-subview");

            var index=$(this).parent().index();

            var i=0;
            $(this).parent().parent().children("li").each(function() {
                if(index==$(this).index()){
                    $(this).removeClass("rmm-subover-hidden");
                    $(this).addClass("rmm-subover-visible");
                }else{
                    $(this).removeClass("rmm-subover-visible");
                    $(this).addClass("rmm-subover-hidden");
                }
            });
            $(this).addClass("rmm-subover-header");
        }
    });

    // click back interacts in mobile version
    $('.rmm-back a').click(function () {
        $(this).parent().parent().prev().removeClass("rmm-subover-header");
        $(this).parent().parent().removeClass("rmm-subview");
        $(this).parent().parent().parent().parent().find("li").removeClass("rmm-subover-hidden");
    });

    // click toggler interacts in mobile version
    $('.rmm-toggled, .rmm-toggled .rmm-button').click(function(){
        if ($(this).is(".rmm-closed")) {
            $(this).removeClass("rmm-closed");
        }else {
            $(this).addClass("rmm-closed");
        }
    }); 
}

jQuery(window).load(function() {
    responsiveMultiMenu();
    adaptMenu();
});


$(window).resize(function() {
    adaptMenu();
});

Never mind it works

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.