2
  1. Cuando doy click por primera vez en un enlace del menu la flecha no es rotada, sino la de los otros enlaces, por mas que uso ROTATE, que estoy haciendo mal?
  2. Ademas si despliego un submenu de un item y luego comprimo el menu, el submenu queda flotante.
  3. Cuando el menu esta comprimido, tiene la propiedad hover para que el submenu de los items se muestren a la derecha de estos, pero si doy click el submenu se muestra hacia abajo, como puedo arreglar eso.
  4. Cuando el menu esta comprimido y hago hover sobre un item para mostrar el submenu hacia la derecha, conforme bajo a los sibitems el nombre del item padre pierde su color

const btn = document.querySelector('#menu-btn');
const menu = document.querySelector('#sidemenu');
$('#menu-btn').click(function() {
  var width = $('#sidemenu').width();
  if (width == 230) {
    $('#sidemenu').animate({
      width: "50"
    });
    menu.classList.toggle("menu-collapsed");
    menu.classList.toggle("menu-expanded");
  } else {
    $('#sidemenu').animate({
      width: "230"
    });
    menu.classList.toggle("menu-expanded");
    menu.classList.toggle("menu-collapsed");
  }
});
.contenedor-principal {
  display: flex;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#sidemenu {
  background-color: #222d32;
}

.menu-expanded {
  width: 230px;
}

.menu-collapsed {
  width: 50px;
}

.menu-collapsed .menuResponsive {
  width: 100%;
}

.menu-collapsed span {
  display: none;
}

.menu-collapsed .glyphicon-chevron-left {
  display: none;
}

.menu-collapsed li:hover span {
  display: block !important;
  position: absolute;
  width: 180px;
  left: 50px;
}

.menu-collapsed span {
  top: 0;
  margin-left: -3px;
  padding: 12px 5px 12px 20px;
  background-color: inherit;
}

.menu-collapsed li:hover .treeview-menu {
  display: block !important;
  position: absolute;
  width: 180px;
  left: 50px;
}

.menu-collapsed .treeview-menu {
  background-color: #222d32;
  padding-top: 5px;
  padding-bottom: 5px;
}

#sidemenuheader {
  background-color: #222d32;
  height: 50px;
  padding: 10px 5px;
  overflow: hidden;
}

.menuResponsive {
  text-align: center;
  height: 30px;
  float: left;
  width: 15%;
  padding-top: 3px;
}

.glyphicon-list {
  font-size: 20px;
  color: #b8c7ce;
}

#menu-items {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

div ul li+li {
  margin-left: 0px;
}

.main-list {
  margin: auto;
  padding: auto;
  list-style: none;
  padding-left: 0px !important;
}

.main-list>li>a:hover {
  color: #ffffff;
  background-color: #1e282c;
  border-left-color: #3c8dbc;
}

.main-list>li>a:focus {
  color: #ffffff;
  background-color: #1e282c;
  border-left-color: #3c8dbc;
}

.main-list>li>a.collapse {
  color: #ffffff;
  background-color: #1e282c;
  border-left-color: #3c8dbc;
}

li>a.collapsed>.glyphicon-chevron-left {
  transform: rotate(-90deg);
}

.panel {
  background-color: transparent !important;
  border: none;
}

.main-item {
  position: relative;
  margin: 0;
  padding: 0;
}

.main-item a {
  color: #b8c7ce;
  font-size: 14px;
  text-decoration: none;
  font-weight: 400;
  position: relative;
  padding: 12px 5px 12px 15px;
  display: block;
  border-left: 3px solid transparent;
}

.main-item i {
  margin-right: 10px;
}

.main-item .glyphicon-chevron-left {
  float: right;
  font-size: 10px;
  padding-top: 5px;
}

.treeview-menu {
  background-color: #2c3b41;
  padding: 0;
  list-style: none
}

.treeview-menu a:hover {
  color: #ffffff;
}

.treeview-menu li {
  margin: 0;
}

.treeview-menu li a {
  padding: 5px 5px 5px 15px;
  display: block;
  font-size: 14px;
}

.treeview-menu span {
  margin-right: 10px;
}

#mantenedores {
  flex: 1;
  width: calc(100% - 230px);
  background-color: #ecf0f5;
  color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="section">
  <!-- container -->
  <div class="container-fluid">
    <!-- row -->
    <div class="row">
      <div class="contenedor-principal col-md-12 col-sm-12 col-xs-12">

        <!-- section title -->
        <aside id="sidemenu" class="menu-expanded">
          <div id="sidemenuheader">
            <div class="menuResponsive">
              <a>
                <i class="glyphicon glyphicon-list" id="menu-btn"></i>
              </a>
            </div>
          </div>

          <div id="menu-items">
            <ul class="list-group main-list" id="accordion">
              <li class="panel main-item">
                <a href="#">
                  <i class="glyphicon glyphicon-home"></i>
                  <span>Inicio</span>
                </a>
              </li>
              <li class="panel main-item">
                <a data-toggle="collapse" data-parent="#accordion" href="#list1">
                  <i class="glyphicon glyphicon-phone"></i>
                  <span>Celulares</span>
                  <i class="glyphicon glyphicon-chevron-left"></i>
                </a>
                <ul class="collapse treeview-menu" id="list1">
                  <li>
                    <a href="#">
                      <i class="fa fa-circle-o"></i>Agregar
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="fa fa-circle-o"></i>Delete
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="fa fa-circle-o"></i>Actualizar
                    </a>
                  </li>
                </ul>
              </li>
              <li class="panel main-item">
                <a data-toggle="collapse" data-parent="#accordion" href="#list2">
                  <i class="glyphicon glyphicon-phone"></i>
                  <span>Celulares</span>
                  <i class="glyphicon glyphicon-chevron-left"></i>
                </a>
                <ul class="collapse treeview-menu" id="list2">
                  <li>
                    <a href="#">
                      <i class="fa fa-circle-o"></i>Agregar
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="fa fa-circle-o"></i>Delete
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="fa fa-circle-o"></i>Actualizar
                    </a>
                  </li>
                </ul>
              </li>
              <li class="panel main-item">
                <a data-toggle="collapse" data-parent="#accordion" href="#list3">
                  <i class="glyphicon glyphicon-phone"></i>
                  <span>Celulares</span>
                  <i class="glyphicon glyphicon-chevron-left"></i>
                </a>
                <ul class="collapse treeview-menu" id="list3">
                  <li>
                    <a href="#">
                      <i class="fa fa-circle-o"></i>Agregar
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="fa fa-circle-o"></i>Delete
                    </a>
                  </li>
                  <li>
                    <a href="products.html">
                      <i class="fa fa-circle-o"></i>Actualizar
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </aside>
        <!-- /section title -->

        <div id="mantenedores">

        </div>
      </div>
    </div>
    <!-- /row -->
  </div>
  <!-- /container -->
</div>

1 respuesta 1

1

Agrega manualmente desde el inicio los atributos que controlan los accordiones:

class="collapsed" aria-expanded="false"

const btn = document.querySelector('#menu-btn');
const menu = document.querySelector('#sidemenu');
$('#menu-btn').click(function() {
  var width = $('#sidemenu').width();
  if (width == 230) {
    $('#sidemenu').animate({
      width: "50"
    });
    $('.collapse').collapse("hide");
    menu.classList.toggle("menu-collapsed");
    menu.classList.toggle("menu-expanded");
  } else {
    $('#sidemenu').animate({
      width: "230"
    });
    menu.classList.toggle("menu-expanded");
    menu.classList.toggle("menu-collapsed");
  }
});
.contenedor-principal {
  display: flex;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#sidemenu {
  background-color: #222d32;
}

.menu-expanded {
  width: 230px;
}

.menu-collapsed {
  width: 50px;
}

.menu-collapsed .menuResponsive {
  width: 100%;
}

.menu-collapsed span {
  display: none;
}

.menu-collapsed .glyphicon-chevron-left {
  display: none;
}

.menu-collapsed li:hover span {
  display: block !important;
  position: absolute;
  width: 180px;
  left: 50px;
}

.menu-collapsed span {
  top: 0;
  margin-left: -3px;
  padding: 12px 5px 12px 20px;
  background-color: inherit;
}

.menu-collapsed li:hover .treeview-menu {
  display: block !important;
  position: absolute;
  width: 180px;
  left: 50px;
}

.menu-collapsed .treeview-menu {
  background-color: #222d32;
  padding-top: 5px;
  padding-bottom: 5px;
}

#sidemenuheader {
  background-color: #222d32;
  height: 50px;
  padding: 10px 5px;
  overflow: hidden;
}

.menuResponsive {
  text-align: center;
  height: 30px;
  float: left;
  width: 15%;
  padding-top: 3px;
}

.glyphicon-list {
  font-size: 20px;
  color: #b8c7ce;
}

#menu-items {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

div ul li+li {
  margin-left: 0px;
}

.main-list {
  margin: auto;
  padding: auto;
  list-style: none;
  padding-left: 0px !important;
}

.main-list>li>a:hover {
  color: #ffffff;
  background-color: #1e282c;
  border-left-color: #3c8dbc;
}

.main-list>li>a:focus {
  color: #ffffff;
  background-color: #1e282c;
  border-left-color: #3c8dbc;
}

.main-list>li>a.collapse {
  color: #ffffff;
  background-color: #1e282c;
  border-left-color: #3c8dbc;
}

li>a.collapsed>.glyphicon-chevron-left {
  transform: rotate(-90deg);
}

.panel {
  background-color: transparent !important;
  border: none;
}

.main-item {
  position: relative;
  margin: 0;
  padding: 0;
}

.main-item a {
  color: #b8c7ce;
  font-size: 14px;
  text-decoration: none;
  font-weight: 400;
  position: relative;
  padding: 12px 5px 12px 15px;
  display: block;
  border-left: 3px solid transparent;
}

.main-item i {
  margin-right: 10px;
}

.main-item .glyphicon-chevron-left {
  float: right;
  font-size: 10px;
  padding-top: 5px;
}

.treeview-menu {
  background-color: #2c3b41;
  padding: 0;
  list-style: none
}

.treeview-menu a:hover {
  color: #ffffff;
}

.treeview-menu li {
  margin: 0;
}

.treeview-menu li a {
  padding: 5px 5px 5px 15px;
  display: block;
  font-size: 14px;
}

.treeview-menu span {
  margin-right: 10px;
}

#mantenedores {
  flex: 1;
  width: calc(100% - 230px);
  background-color: #ecf0f5;
  color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="section">
  <!-- container -->
  <div class="container-fluid">
    <!-- row -->
    <div class="row">
      <div class="contenedor-principal col-md-12 col-sm-12 col-xs-12">

        <!-- section title -->
        <aside id="sidemenu" class="menu-expanded">
          <div id="sidemenuheader">
            <div class="menuResponsive">
              <a>
                <i class="glyphicon glyphicon-list" id="menu-btn"></i>
              </a>
            </div>
          </div>

          <div id="menu-items">
            <ul class="list-group main-list" id="accordion">
              <li class="panel main-item">
                <a href="#">
                  <i class="glyphicon glyphicon-home"></i>
                  <span>Inicio</span>
                </a>
              </li>
              <li class="panel main-item">
                <a data-toggle="collapse" data-parent="#accordion" href="#list1" class="collapsed" aria-expanded="false">
                  <i class="glyphicon glyphicon-phone"></i>
                  <span>Celulares</span>
                  <i class="glyphicon glyphicon-chevron-left"></i>
                </a>
                <ul class="collapse treeview-menu" id="list1">
                  <li>
                    <a href="#">
                      <i class="fa fa-circle-o"></i>Agregar
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="fa fa-circle-o"></i>Delete
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="fa fa-circle-o"></i>Actualizar
                    </a>
                  </li>
                </ul>
              </li>
              <li class="panel main-item">
                <a data-toggle="collapse" data-parent="#accordion" href="#list2" class="collapsed" aria-expanded="false">
                  <i class="glyphicon glyphicon-phone"></i>
                  <span>Celulares</span>
                  <i class="glyphicon glyphicon-chevron-left"></i>
                </a>
                <ul class="collapse treeview-menu" id="list2">
                  <li>
                    <a href="#">
                      <i class="fa fa-circle-o"></i>Agregar
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="fa fa-circle-o"></i>Delete
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="fa fa-circle-o"></i>Actualizar
                    </a>
                  </li>
                </ul>
              </li>
              <li class="panel main-item">
                <a data-toggle="collapse" data-parent="#accordion" href="#list3" class="collapsed" aria-expanded="false">
                  <i class="glyphicon glyphicon-phone"></i>
                  <span>Celulares</span>
                  <i class="glyphicon glyphicon-chevron-left"></i>
                </a>
                <ul class="collapse treeview-menu" id="list3">
                  <li>
                    <a href="#">
                      <i class="fa fa-circle-o"></i>Agregar
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="fa fa-circle-o"></i>Delete
                    </a>
                  </li>
                  <li>
                    <a href="products.html">
                      <i class="fa fa-circle-o"></i>Actualizar
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </aside>
        <!-- /section title -->

        <div id="mantenedores">

        </div>
      </div>
    </div>
    <!-- /row -->
  </div>
  <!-- /container -->
</div>

6
  • Hola FranAcuna, gracias por tu respuesta, podrias decirme porfavor como podria solucionar el problema que tengo al momento que despliego un submenu y luego comprimo el todo menu, todo el Sidecar menú se reduce menos los subitems el 16 ene. 2021 a las 12:45
  • 1
    Te actualicé la respuesta, para este caso creo que lo mejor sería cerrar el submenu antes de comprimir todo el menú con: $('.collapse').collapse("hide");
    – FranAcuna
    el 18 ene. 2021 a las 0:25
  • 1
    Gracias FranAcuna por tu tiempo, disculpa por la molestia, lo que pasa es que soy nueva con javascript y el diseño web. el 18 ene. 2021 a las 1:17
  • Con mucho gusto, para eso está la comunidad.
    – FranAcuna
    el 18 ene. 2021 a las 1:30
  • 1
    Ahora que reviso noté que no edite la respuesta. Ahora sí lo hice, no entiendo porque no se habían guardado los cambios. Si abres un subemnu y luego comprimes todo el menú, se cierra todo correctamente.
    – FranAcuna
    el 19 ene. 2021 a las 1:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.