Menu desplegable en barra lateral con Bootstrap 3.3.7

webmaaron · 15 Abr 2023

Buenas tardes,

Tengo una web con bootstrap 3.3.7 y no puedo actualizar a las nuevas versiones por el contenido que tiene pero quiero hacer un menú desplegable que no se superponga, es decir, lo que ahora mismo tengo es lo siguiente:

Al pulsar en revendedores el desplegable se suponerpone sobre el resto del menú y queria que no fuera así, si no que al pulsar se abriera y expandiera el menu en la barra lateral que esta el menu.

Este es el codigo:

HTML:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    <center><i class="glyphicon glyphicon-menu-right"></i><i class="glyphicon glyphicon-menu-right"></i>Revendedores  <i class="glyphicon glyphicon-menu-left"></i><i class="glyphicon glyphicon-menu-left"></i></center></a>
    <ul class="dropdown-menu">
<li><center><a href=""><i class="glyphicon glyphicon-minus"></i><i class="glyphicon glyphicon-minus"></i>Proveedores  <i class="glyphicon glyphicon-minus"></i><i class="glyphicon glyphicon-minus"></i></a></center></li>
    <li><a href="platprov.php"> <i class="glyphicon glyphicon-inbox"></i>Plataformas <span class="pull-right"></span></a></li>
    <li><a href="proveedores.php"> <i class="glyphicon glyphicon-plane"></i>Proveedores <span class="pull-right"></span></a></li>
    <li><a href="pedidos.php"> <i class="glyphicon glyphicon-plus-sign"></i>Pedidos <span class="pull-right"></span></a></li>

   </ul>
  </li>

No se si alguno me puede echar una mano ya que en la parte visual estoy muy perdido.

Muchas gracias, un saludo!
Aaron

BotBeta · 15 Abr 2023

Hola Aaron,

Para lograr el efecto que buscas, puedes utilizar la clase "dropdown-submenu" en lugar de "dropdown-menu" en el menú de revendedores. Luego, dentro de ese menú, puedes agregar otro menú que se expanda hacia la derecha y se alinee con la barra lateral utilizando la clase "dropdown-menu-right". Aquí te muestro cómo podría quedar tu código:

HTML:

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    <center><i class="glyphicon glyphicon-menu-right"></i><i class="glyphicon glyphicon-menu-right"></i>Revendedores  <i class="glyphicon glyphicon-menu-left"></i><i class="glyphicon glyphicon-menu-left"></i></center>
  </a>
  <ul class="dropdown-menu dropdown-submenu">
    <li><center><a href=""><i class="glyphicon glyphicon-minus"></i><i class="glyphicon glyphicon-minus"></i>Proveedores  <i class="glyphicon glyphicon-minus"></i><i class="glyphicon glyphicon-minus"></i></a></center></li>
    <li class="dropdown-submenu">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="glyphicon glyphicon-inbox"></i>Plataformas <span class="caret pull-right"></span></a>
      <ul class="dropdown-menu dropdown-menu-right">
        <li><a href="#">Plataforma 1</a></li>
        <li><a href="#">Plataforma 2</a></li>
        <li><a href="#">Plataforma 3</a></li>
      </ul>
    </li>
    <li><a href="proveedores.php"> <i class="glyphicon glyphicon-plane"></i>Proveedores <span class="pull-right"></span></a></li>
    <li><a href="pedidos.php"> <i class="glyphicon glyphicon-plus-sign"></i>Pedidos <span class="pull-right"></span></a></li>
  </ul>
</li>

Espero que te sea de ayuda.

¡Saludos!

moiseseccam · 15 Abr 2023

El dropdown siempre se va a superponer. Es mejor que lo pongas dentro de un navbar

Menu desplegable en barra lateral con Bootstrap 3.3.7

webmaaron

BotBeta

moiseseccam

Temas similares