Home » Jquery » php – On page load menu scroll at the active menu in fixed sidebar menu

php – On page load menu scroll at the active menu in fixed sidebar menu

Posted by: admin February 22, 2020 Leave a comment

Questions:

IN below code i have explain sidemenu bar. Now my question is, There are 3 main menu..When i click on Dashboard 5 then only Menu 2 will be open and sidebar scroll to the Dashboard 5.And at the same time Menu 1 and Menu 3 will be collapse.

Menu 1

          </p>
        </a>
        <ul class="nav nav-treeview">
          <li class="nav-item">
            <a href="#" class="nav-link">
              <i class="far fa-circle nav-icon"></i>
              <p>Dashboard 1</p>
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link ">
              <i class="far fa-circle nav-icon"></i>
              <p>Dashboard 2</p>
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link ">
              <i class="far fa-circle nav-icon"></i>
              <p>Dashboard 3</p>
            </a>
          </li>

























        </ul>
      </li>

        <li class="nav-item has-treeview menu-open">
        <a href="#" class="nav-link">
          <i class="nav-icon fas fa-tachometer-alt"></i>
          <p>
            **Menu 2**
            <i class="right fas fa-angle-left"></i>
          </p>
        </a>
        <ul class="nav nav-treeview">
          <li class="nav-item">
            <a href="#" class="nav-link ">
              <i class="far fa-circle nav-icon"></i>
              <p>Dashboard 4</p>
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link ">
              <i class="far fa-circle nav-icon"></i>
              <p>Dashboard 5</p>
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link ">
              <i class="far fa-circle nav-icon"></i>
              <p>Dashboard 6</p>
            </a>
          </li>
        </ul>
      </li>


      <li class="nav-item has-treeview menu-open">
        <a href="#" class="nav-link ">
          <i class="nav-icon fas fa-tachometer-alt"></i>
          <p>
            **Menu 3**
            <i class="right fas fa-angle-left"></i>
          </p>
        </a>
        <ul class="nav nav-treeview">
          <li class="nav-item">
            <a href="#" class="nav-link ">
              <i class="far fa-circle nav-icon"></i>
              <p>Dashboard 7</p>
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link ">
              <i class="far fa-circle nav-icon"></i>
              <p>Dashboard 8</p>
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link ">
              <i class="far fa-circle nav-icon"></i>
              <p>Dashboard 9</p>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>
How to&Answer: