Menu desplegable en barra lateral con Bootstrap 3.3.7

  • Autor Autor webmaaron
  • Fecha de inicio Fecha de inicio

webmaaron

1
Zeta
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Verificado por Binance
¡Usuario popular!
Suscripción a IA
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
 
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!
 
El dropdown siempre se va a superponer. Es mejor que lo pongas dentro de un navbar
 
Hay que estar conectado o registrado para responder aquí.
Menú
Acceder
Registro