Doubt with function js

Asked

Viewed 84 times

3

Good morning, gentlemen. First of all, excuse my question, I’m not a web programmer and I need to do something I’m a layman.

I am trying to give a "simple" maintenance on a Dashboard here from the company where I work, in it we have a bar on the left side that you can see below:

inserir a descrição da imagem aqui

This left bar by default is expanded, but when clicked on the icon marked with red it reduces to the following way:

inserir a descrição da imagem aqui

The problem: I need to make the side menu by default come in reduced form, and not expanded as it currently comes

Can identify what calls the "function" (I don’t know what it’s called) that reduces the menu is 

<div class="nav toggle">
         <a id="menu_toggle"><i class="fa fa-bars"></i></a>
</div>

So I went to a. js file that was in the project and found the following code:

$(function () {
$('#sidebar-menu li ul').slideUp();
$('#sidebar-menu li').removeClass('active');

$('#sidebar-menu li').click(function () {
    if ($(this).is('.active')) {
        $(this).removeClass('active');
        $('ul', this).slideUp();
        $(this).removeClass('nv');
        $(this).addClass('vn');
    } else {
        $('#sidebar-menu li ul').slideUp();
        $(this).removeClass('vn');
        $(this).addClass('nv');
        $('ul', this).slideDown();
        $('#sidebar-menu li').removeClass('active');
        $(this).addClass('active');
    }
});

$('#menu_toggle').click(function () {
    if ($('body').hasClass('nav-md')) {
        $('body').removeClass('nav-md');
        $('body').addClass('nav-sm');
        $('.left_col').removeClass('scroll-view');
        $('.left_col').removeAttr('style');
        $('.sidebar-footer').hide();

        if ($('#sidebar-menu li').hasClass('active')) {
            $('#sidebar-menu li.active').addClass('active-sm');
            $('#sidebar-menu li.active').removeClass('active');
        }
    } else {
        $('body').removeClass('nav-sm');
        $('body').addClass('nav-md');
        $('.sidebar-footer').show();

        if ($('#sidebar-menu li').hasClass('active-sm')) {
            $('#sidebar-menu li.active-sm').addClass('active');
            $('#sidebar-menu li.active-sm').removeClass('active-sm');
        }
    }
});
});
/* Sidebar Menu active class */
$(function () {
var url = window.location;
$('#sidebar-menu a[href="' + url + '"]').parent('li').addClass('current-page');
$('#sidebar-menu a').filter(function () {
    return this.href == url;
}).parent('li').addClass('current-page').parent('ul').slideDown().parent().addClass('active')
});

As I can always do by default to open URL it open minimized right and not expanded as it is currently working?

javascript html

  • Pass the name of this template that I already see directly in the code and test. Meanwhile I will reply with the code that I think will work.

2 answers

2


I’ve handled a few screens like this. And I can tell you that the magic to change what you need is in the classes:

Nav-Md and Nav-Sm

initially search in your html one of these classes, in your body tag mainly. you will probably find Nav-Md, switch to Nav-Sm.

Then switch to your function js

$('#menu_toggle').click(function () {

the same classes.

And test again.

  • Excellent! Thank you very much, saved my day hehehehe

  • Ruggi, just a doubt in the js function what is Md I trade for Sm and whatever is Sm I trade for Md?

  • No doubt, because that’s what the function is doing there. It exchanges Nav-Md, for Nav-Sm. great that it helped.

1

Replaces:

$('#sidebar-menu li ul').slideUp();

For:

$('#sidebar-menu li ul').slideDown();

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.