expanded sub menu collapsed when page reload

Question

expanded sub menu collapsed when page reload

Navigation

#1 by (0 votes)

-1

I have the following problem, I have a vertical side menu and when I click on any option in the menu or sub menu option, the page is reloaded and the menu is collapsed again. I would like to know how I can keep selected the menu option that I chose after having reloaded the page.

I'm using metisMenu (for the vertical side menu), Boostrapt 3.x, for the layout, and VS 2017 with Razor.

bootstrap menu

asked by Eduardo Mateo Maneff 05.10.2018 в 13:45

source

1 answer

SAVE DATA FROM A FRAME SON TO A FRAME FATHER TABLE Odoo 11 variants of a product by CSV: it does not assign all the internal reference by column default_code

score 0 · Accepted Answer

I have never used metisMenu so surely there is a more elegant solution.

But with what I got to look at the documentation, I think that an option, something handmade, would be to give your submenus an ID that could be related to the URL where they lead, so that when loading them you could use the property location.hash or location.pathname to identify which submenu is active.

In these snippets I can not do real navigation, but I simulated it using setTimeout . Clicking a submenu collapses everything. At the end of the timeOut the metisMenu is restarted, marking as active the subitem whose ID matches the last one that I clicked.

function restoreSelected(current_url) {
  var activo = jQuery(current_url);
  $('#status').text('Estamos en:');
  activo.addClass('selected');
  activo.closest('ul').closest('li').find('a').first().click();
}

// Esto sería reemplazado por la navegación real
function simularNavegacion(next_url) {
  $('metismenu').metisMenu('dispose');
  $('#status').text('Cargando...')
  $('#contenido').text('Espere mientras cargamos ' + next_url);

  window.setTimeout(function() {
    $('#contenido').text('Pantalla  ' + next_url);
    $("#metismenu").metisMenu({
      toggle: false
    });
    restoreSelected(next_url);
  }, 3000);
}

function navigateToNextUrl(next_url) {
  var activeitems = $('#metismenu').find('.mm-active');
  activeitems.removeClass('mm-active');
  activeitems.find('a').attr('aria-expanded', false);
  activeitems.find('ul.mm-show').removeClass('mm-show');
  activeitems.find('.selected').removeClass('selected');
  simularNavegacion(next_url);
}
$(document).ready(function() {

  $("#metismenu").metisMenu({
    toggle: false
  });

  $('#metismenu li li a').on('click', function() {
    var next_url = $(this).attr('href');
    navigateToNextUrl(next_url);
  });

});

#metismenu li {
  padding: 3px;
  background: #333;
  color: white;
  border: 1px solid white;
}

#metismenu li a {
  color: white;
  width: 100%;
  display: block;
}

#metismenu li ul {
  padding-left: 0;
  list-style: none;
}

#metismenu li li {
  background: #555;
}

#metismenu li li:hover,
#metismenu li li.selected {
  background: #999;
}

#metismenu li li.selected a {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css">
<script src="https://cdn.jsdelivr.net/npm/metismenu"></script>
<div class="container">
  <div class="row">
    <aside class="col-xs-4">
      <nav class="sidebar-nav">
        <ul id="metismenu">
          <li id="menu1" class="">
            <a href="#" class="has-arrow" aria-expanded="false">Menu 1</a>
            <ul>
              <li id="Menu1Option1">
                <a href="#Menu1Option1">Menu 1 Option 1</a>
              </li>
              <li id="Menu1Option2">
                <a href="#Menu1Option2">Menu 1 Option 2</a>
              </li>
              <li id="Menu1Option3">
                <a href="#Menu1Option3">Menu 1 Option 3</a>
              </li>
            </ul>
          </li>
          <li id="menu2">
            <a href="#" class="has-arrow" aria-expanded="false">Menu 2</a>
            <ul>
              <li id="Menu2Option1">
                <a href="#Menu2Option1">Menu 2 Option 1</a>
              </li>
              <li id="Menu2Option2">
                <a href="#Menu2Option2">Menu 2 Option 2</a>
              </li>
              <li id="Menu2Option3">
                <a href="#Menu2Option3">Menu 2 Option 3</a>
              </li>
            </ul>
          </li>
          <li id="menu3">
            <a href="#" class="has-arrow" aria-expanded="false">Menu 3</a>
            <ul>
              <li id="Menu3Option1">
                <a href="#Menu3Option1">Menu 3 Option 1</a>
              </li>
              <li id="Menu3Option2">
                <a href="#Menu3Option2">Menu 3 Option 2</a>
              </li>
              <li id="Menu3Option3">
                <a href="#Menu3Option3">Menu 3 Option 3</a>
              </li>
            </ul>
          </li>

        </ul>
      </nav>
    </aside>
    <div class="col-xs-8">
      <div id="status">Estamos en:</div>
      <div><b id="contenido">Pantalla inicial</b></div>
    </div>

  </div>