Difficulty Function Menu Sidebar Javascript

Question

Difficulty Function Menu Sidebar Javascript

Asked 6 years ago

Viewed 140 times

1

I’m having a hard time where the code I’ve made so far isn’t acting the way I need to. The fact is that after the class the sub-menu is activated, the menu does not minimize. That is, after being activated, it is maximized until I select another menu li.

If anyone has any suggestions, it might be a stupid mistake. Below follows the code:

     var handleNav = function() {
             var page  = $('#page-container');
             var sidebar = $('#sidebar');
             var allLinks = $('.sidebar-nav a', sidebar);
             var menuLinks = $('.sidebar-nav-menu', sidebar);
             var submenuLinks = $('.sidebar-nav-submenu', sidebar);
            
             allLinks.on('click', function(e) {
              var link = $(this),
               ripple, d, x, y;
            
              sidebar.find('.sidebar-nav-ripple').removeClass('animate');
            
              if (link.children('.sidebar-nav-ripple').length === 0) {
               link.prepend('<span class="sidebar-nav-ripple"></span>');
              }
            
              var ripple = link.children('.sidebar-nav-ripple');
            
              if (!ripple.height() && !ripple.width()) {
               d = Math.max(link.outerWidth(), link.outerHeight());
               ripple.css({
                height: d,
                width: d
               });
              }
            
              x = e.pageX - link.offset().left - ripple.width() / 2;
              y = e.pageY - link.offset().top - ripple.height() / 2;
            
              ripple.css({
               top: y + 'px',
               left: x + 'px'
              }).addClass('animate');
             });
             menuLinks.on('click', function(e) {
              var link = $(this);
              var windowW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            
              if (page.hasClass('sidebar-visible-lg-mini') && (windowW > 991)) {
               if (link.hasClass('open')) {
                link.removeClass('open');
               } else {
                $('#sidebar .sidebar-nav-menu.open').removeClass('open');
                link.addClass('open');
               }
              } else if (!link.parent().hasClass('active')) {
               if (link.hasClass('open')) {
                link.removeClass('open');
               } else {
                $('#sidebar .sidebar-nav-menu.open').removeClass('open');
                link.addClass('open');
               }
            
               setTimeout(resizePageContent, 50);
              }
            
              return false;
             });
            
             submenuLinks.on('click', function(e) {
              var link = $(this);
            
              if (link.parent().hasClass('active') !== true) {
               if (link.hasClass('open')) {
                link.removeClass('open');
               } else {
                link.closest('ul').find('.sidebar-nav-submenu.open').removeClass('open');
                link.addClass('open');
               }
            
               setTimeout(resizePageContent, 50);
              }
            
              return false;
             });
            };
            var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
            
            $(".sidebar-nav li a").each(function() {
             if ($(this).attr("href") == pgurl || $(this).attr("href") == '') {
              $(this).addClass(" active");
              $(this).parent().parent().parent().addClass(" active");
              $(this).parent().parent().parent().parent().parent().addClass(" active");
             }
            });

    .sidebar-nav {
        list-style: none;
        margin: 0;
        padding: 10px 0 0
    }
    
    
    .sidebar-separator i {
        opacity: .1
    }
    
    #sidebar-toggle-mini {
        display: none
    }
    
    .sidebar-nav-ripple {
        display: block;
        position: absolute;
        background: rgba(92, 205, 222, .3);
        border-radius: 100%;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    
    .sidebar-nav-ripple.animate {
        -webkit-animation: ripple 1s ease-out;
        animation: ripple 1s ease-out
    }
    
    @-webkit-keyframes ripple {
        100% {
            opacity: 0;
            -webkit-transform: scale(3)
        }
    }
    
    @keyframes ripple {
        100% {
            opacity: 0;
            -webkit-transform: scale(3);
            transform: scale(3)
        }
    }
    
    .sidebar-nav a {
        display: block;
        color: #8da4bb;
        padding: 0 10px;
        min-height: 40px;
        line-height: 40px;
        overflow: hidden;
        position: relative
    }
    
    .sidebar-nav a.active,
    .sidebar-nav a.open,
    .sidebar-nav a:focus,
    .sidebar-nav a:hover,
    .sidebar-nav li.active>a {
        color: #fff;
        text-decoration: none
    }
    
    .sidebar-nav a.open,
    .sidebar-nav li.active>a {
        background: #25313e;
        border-right: 4px solid #3180FF
    }
    
    .sidebar-nav li>ul li a {
        font-size: 13px
    }
    
    .sidebar-nav li>ul li a.active {
        background: 0 0;
        color: #fff;
        border-right: none
    }
    
    .sidebar-nav a.active {
        background: #25313e;
        color: #fff;
        border-right: 4px solid #3180FF
    }
    
    .sidebar-nav a>.sidebar-nav-icon {
        margin-right: 10px
    }
    
    .sidebar-nav a>.sidebar-nav-icon,
    .sidebar-nav a>.sidebar-nav-indicator {
        display: inline-block;
        opacity: .5;
        width: 18px;
        font-size: 14px;
        text-align: center
    }
    
    .sidebar-nav a>.sidebar-nav-indicator {
        float: right;
        line-height: inherit;
        margin-left: 4px;
        font-size: 10px;
        -webkit-transition: -webkit-transform .15s ease-out;
        transition: transform .15s ease-out;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden
    }
    
    
    .sidebar-nav a.active>.sidebar-nav-indicator,
    .sidebar-nav a.open>.sidebar-nav-indicator,
    .sidebar-nav li.active>a>.sidebar-nav-indicator {
        -webkit-transform: rotate(-90deg) rotateZ(0);
        transform: rotate(-90deg) rotateZ(0)
    }
    
    .sidebar-nav ul {
        display: none;
        list-style: none;
        padding: 0;
        margin: 0;
        background-color: transparent;
        -webkit-transition: background .25s ease-out;
        transition: background .25s ease-out
    }
    
    .sidebar-nav .active>ul,
    .sidebar-nav .open+ul {
        display: block;
        background: #25313e
    }
    
    .sidebar-nav ul a {
        margin: 0 0 0 19px;
        padding-left: 19px;
        border-left: 1px solid #454e59;
        min-height: 34px;
        line-height: 34px;
        font-weight: 400
    }
    
    .sidebar-nav ul a.open,
    .sidebar-nav ul li.active>a {
        background: 0 0
    }
    
    .sidebar-nav ul li:before {
        background: #454e59;
        bottom: auto;
        content: "";
        height: 7px;
        left: 16px;
        margin-top: 14px;
        position: absolute;
        right: auto;
        width: 7px;
        z-index: 1;
        border-radius: 50%
    }
    
    @media screen and (min-width:992px) {
        #page-container.sidebar-visible-lg-mini #sidebar .sidebar-content .sidebar-nav ul li:before {
            display: none
        }
    }
    
    .sidebar-nav ul ul {
        margin: 0 0 0 19px
    }
    
    .sidebar-nav ul ul a {
        margin: 0;
        padding-left: 19px;
        font-size: 13px;
        min-height: 32px;
        line-height: 32px
    }
    
    .sidebar-nav ul .active>ul,
    .sidebar-nav ul .open+ul {
        background-color: #454e59
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="page-container" class="header-fixed-top">
            <div id="sidebar">
            <ul class="sidebar-nav">
                <li>
                    <a href="javascript:void(0)">
                        <i class="gi gi-compass sidebar-nav-icon"></i>
                        <span class="sidebar-nav-mini-hide">Dashboard</span>
                    </a>
                </li>
                <li>
                    <a href="inddex.html">
                        <i class="gi gi-compass sidebar-nav-icon"></i>
                        <span class="sidebar-nav-mini-hide">Dashboard</span>
                    </a>
                </li>
                <li class="sidebar-separator">
                    <i class="fa fa-ellipsis-h"></i>
                </li>
                <li>
                    <a href="#" class="sidebar-nav-menu">
                        <i class="fa fa-chevron-left sidebar-nav-indicator sidebar-nav-mini-hide"></i>
                        <i class="fa fa-cog sidebar-nav-icon"></i>
                        <span class="sidebar-nav-mini-hide">Dropdown</span>
                    </a>
                    <ul>
                        <li>
                            <a href="index.html">Link #1</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">Link #2</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

2

Missing add the CSS.

– Sam

2018/12/25 at 23:17
1

Sorry, I fixed the Css missing!

– Leandro Pires

2018/12/25 at 23:22
2

Failed to place where variables are declared menuLinks and submenuLinks, besides having a }; lost in the middle of the code, before var pgurl...

– Sam

2018/12/25 at 23:28
1

yes, again I am sorry, because I had not added the Header, I believe that now everything is correct

– Leandro Pires

2018/12/25 at 23:35
2

I think I’m still wrong. Where does the variable come from sidebar?

– Sam

2018/12/25 at 23:36
Rsrs, could you let me know if there’s something else missing now?

– Leandro Pires

2018/12/25 at 23:45
Let’s go continue this discussion in chat.

– Sam

2018/12/25 at 23:45

Show 2 more comments

1 answer

Browser other questions tagged javascript html

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

by Sam • **79,597** points · Answer 1 · 2018-12-26T00:52:16+00:00

What you need is to remove the class .active of the elements by clicking on the dropdown. This class prevents the dropdown from being closed.

That’s why we’re missing one else in the if within the event menuLinks.on('click'...:

...
else{
   link.removeClass("active");
   link.parent().removeClass("active");
}

Thus remaining:

menuLinks.on('click', function(e){
   var link = $(this);
   var windowW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

   if (page.hasClass('sidebar-visible-lg-mini') && (windowW > 991)) {
   console.log("dvd1");
      if (link.hasClass('open')) {
         link.removeClass('open');
      }
      else {
         $('#sidebar .sidebar-nav-menu.open').removeClass('open');
         link.addClass('open');
      }
   }
   else if (!link.parent().hasClass('active')) {
      if (link.hasClass('open')) {
         link.removeClass('open');
      }
      else {
         $('#sidebar .sidebar-nav-menu.open').removeClass('open');
         link.addClass('open');
      }

      setTimeout(resizePageContent, 50);
   }
   // AQUI!
   else{
      link.removeClass("active");
      link.parent().removeClass("active");
   }

   return false;
});

Clicking on "Dropdown" will remove the class .active of the link and the <li>.