¿Cómo hacer que el submenú bootstrap de Twitter se abra en el lado izquierdo?

93

Estaba intentando crear el submenú de arranque de Twitter en el menú desplegable, pero tengo un problema: tengo un menú desplegable en la esquina superior derecha de la página y ese menú tiene un submenú más. Sin embargo, cuando se abre el submenú, no cabe en la ventana y se desplaza demasiado hacia la derecha, por lo que el usuario solo puede ver las primeras letras. ¿Cómo hacer que ese submenú no se abra a la derecha, sino a la izquierda?

javascript  jquery  css  twitter-bootstrap 
— kovpack
fuente
6
Publique el código del fragmento.
— Shankar Cabus
2
En Bootstrap 4, agregue .pull-rightel .dropdowncontenedor.
— jbyrd

Respuestas:

109

La forma más sencilla sería agregar la pull-leftclase a sudropdown-submenu

<li class="dropdown-submenu pull-left">

jsfiddle: DEMO

— Schmalzy
fuente
Esta respuesta junto con la de Matt para el nivel UL son la forma correcta de implementar esto cuando se usa bootstrap.
— KeyOfJ
1
La pregunta de OP y mi respuesta son de agosto de 2012. Mientras tanto, Bootstrap ha cambiado, por lo que ahora tiene la clase .pull-left. En ese entonces, mi respuesta fue correcta. Ahora no tiene que configurar manualmente css, tiene esa clase .pull-left.
— Miljan Puzović
1
Esto funciona bien en algunos casos, pero se rompe si los elementos del menú principal son demasiado largos, como en este violín: jsfiddle.net/szx4Y/446 ¿ Alguien tiene una idea rápida para solucionarlo?
— Aaron Lifshin
2
@AaronLifshin .dropdown-submenu.pull-left>.dropdown-menu { width: 100%; } No es una solución elegante, pero parece funcionar jsfiddle.net/r1v90tas
— Schmalzy
1
@Schmalzy mirándolo más a fondo, ancho: 100% causa un problema diferente con elementos largos en el submenú jsfiddle.net/r1v90tas/1 y eso se soluciona usando min-width: 100% en su lugar, según aquí: jsfiddle.net/ r1v90tas / 2
— Aaron Lifshin
118

Si lo he entendido bien, bootstrap proporciona una clase CSS solo para este caso. Agregue 'pull-right' al menú 'ul':

<ul class="dropdown-menu pull-right">

..y el resultado final es que las opciones del menú aparecen alineadas a la derecha, en línea con el botón desde el que se despliegan.

— Mate
fuente
2
Gran adición Matt a nivel UL.
— KeyOfJ
3
absolutamente, necesitaba el menú principal, no el submenú para moverme. así que necesitaba apuntar al elemento <ul>. es confuso porque desea moverlo hacia la izquierda, sin embargo, usa la pull-rightclase para lograrlo.
— FireDragon
1
Esta respuesta es válida para Bootstrap 3.x, por lo que parece que es la más correcta en este momento.
— alx
1
La respuesta aceptada no funciona para mí y Bootstrap 3, ¡pero esta sí!
— Josh Bilderback
1
Esto es correcto. agregue .pull-right y su menú desplegable no saldrá del lado derecho de la pantalla.
— slindsey3000
26

La clase actual .dropdown-submenu > .dropdown-menutiene left: 100%;. Por lo tanto, si desea abrir el submenú en el lado izquierdo, anule esos ajustes a la posición izquierda negativa. Por ejemplo left: -95%;. Ahora obtendrá el submenú en el lado izquierdo y podrá modificar otras configuraciones para obtener una vista previa perfecta.

Aquí está la DEMO

EDITAR: La pregunta de OP y mi respuesta son de agosto de 2012. Mientras tanto, Bootstrap cambió, por lo que ahora tiene la clase .pull-left. En ese entonces, mi respuesta fue correcta. Ahora no tiene que configurar manualmente css, tiene esa clase .pull-left.

EDICIÓN 2: Las demostraciones no funcionan porque Bootstrap cambió sus URL. Simplemente cambie los recursos externos en jsfiddle y reemplácelos por otros nuevos.

— Miljan Puzović
fuente
Gracias. Casi exactamente lo que necesito, sin embargo, debería left: -90%;haberlo (de lo contrario, no puedo mover el mouse a ese submenú porque desaparece).
— kovpack
Como dije, eso es solo una idea de lo que debes hacer. Me alegro de que me
— hayan
Tu ejemplo solo funciona para ciertos casos. Mire aquí: jsfiddle.net/mQnv2/305
— Alexandru R
Esta no es la respuesta correcta ya que las clases de arranque deben usarse como se menciona en las publicaciones de Schmalzy y Matt.
— KeyOfJ
1
Esta publicación es un año más antigua. Mientras tanto, se cambia el bootstrap para que la respuesta de Schmalzy sea más elegante. En ese entonces, Bootstrap no tenía una clase para tirar a la izquierda.
— Miljan Puzović
20

Si está utilizando bootstrap v4, hay una nueva forma de hacerlo.

Deberías usar .dropdown-menu-righten el .dropdown-menuelemento.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Enlace al código: https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-items

— Felipe Miosso
fuente
Esto también funciona para las versiones de boostrap> = 3.1 ... consulte esto stackoverflow.com/a/19253730/3354228
— The.Bear
1
definitivamente la respuesta más fácil
— crodev
Esto es algo correcto para la versión 4. La sintaxis ha cambiado a droplefty droprightpero el contexto de la respuesta es correcta. ¡Gracias!
— cfnerd
12

La forma correcta de realizar la tarea es:

/* Submenu placement itself */
.dropdown-submenu > .dropdown-menu { left: auto; right: 100%; }
/* Arrow position */
.dropdown-submenu { position: relative; }
.dropdown-submenu > a:after { position: absolute; left: 7px; top: 3px; float: none; border-right-color: #cccccc; border-width: 5px 5px 5px 0; }
.dropdown-submenu:hover > a:after { border-right-color: #ffffff; }
— Ruslan Sukhar
fuente
Más de una preferencia .dropdown-submenu { position: relative; text-align:right; }Para colocar el texto a la derecha cuando la flecha está a la izquierda.
— Arvind
4

He creado una función de javascript que busca si tiene suficiente espacio en el lado derecho. Si lo tiene, lo mostrará en el lado derecho, de lo contrario lo mostrará en el lado izquierdo

Probado en:

  • Firefox (mac)
  • Chorme (mac)
  • Safari (mac)

Javascript:

$(document).ready(function(){
    //little fix for the poisition.
    var newPos     = $(".fixed-menuprofile .dropdown-submenu").offset().left - $(this).width();
    $(".fixed-menuprofile .dropdown-submenu").find('ul').offset({ "left": newPos });

    $(".fixed-menu .dropdown-submenu").mouseover(function() {
        var submenuPos = $(this).offset().left + 325;
        var windowPos  = $(window).width();
        var oldPos     = $(this).offset().left + $(this).width();
        var newPos     = $(this).offset().left - $(this).width();

        if( submenuPos > windowPos ){
            $(this).find('ul').offset({ "left": newPos });
        } else {
            $(this).find('ul').offset({ "left": oldPos });
        }
    });
});

porque no quiero agregar esta corrección en todos los elementos del menú, creé una nueva clase en él. coloque el menú fijo en el ul:

<ul class="dropdown-menu fixed-menu">

Espero que esto funcione para usted.

PD. pequeño error en safari y chrome, primero al pasar el mouse lo colocará para mutch a la izquierda actualizará esta publicación si lo soluciono.

— Mitchel Verschoof
fuente
+1: Hice algunos cambios, pero esto me llevó a una solución funcional.
— zimdanen
¡Excelente solución!
— arefin2k
4

Si solo tiene un nivel y usa bootstrap 3, agregue pull-rightal ulelemento

<ul class="dropdown-menu pull-right" role="menu">
— Mauro
fuente
2

En realidad, si está de acuerdo con hacer flotar el dropdowncontenedor, me pareció tan fácil como agregarlo navbar-rightal archivo dropdown.

Esto parece una trampa, ya que no está en una barra de navegación, pero funciona bien para mí.

<div class="dropdown navbar-right">
...
</div>

A continuación, puede personalizar aún más el flotante con un pull-leftdirectamente en el dropdown...

<div class="dropdown pull-left navbar-right">
...
</div>

... o como envoltorio a su alrededor ...

<div class="pull-left">
  <div class="dropdown navbar-right">
  ...
  </div>
</div>
— zeroasterisk
fuente
1

Si está usando MENOS CSS, escribí un pequeño mixin para mover el menú desplegable con la flecha de conexión:

.dropdown-menu-shift( @num-pixels, @arrow-position: 10px ) {  // mixin to shift the dropdown menu
    left: @num-pixels;
    &:before { left: -@num-pixels + @arrow-position; }        // triangle outline
    &:after  { left: -@num-pixels + @arrow-position + 1px; }  // triangle internal
}

Luego, para mover a .dropdown-menucon una identificación de, dropdown-menu-xpor ejemplo, puede hacer:

#dropdown-menu-x {
    .dropdown-menu-shift( -100px );
}
— isapir
fuente
1

He creado una función de javascript que busca si tiene suficiente espacio en el lado derecho. Si es así, lo mostrará en el lado derecho, de lo contrario, lo mostrará en el lado izquierdo. Nuevamente, si tiene suficiente espacio en el lado derecho, se mostrará el lado derecho. es un bucle ...

$(document).ready(function () {

$('body, html').css('overflow', 'hidden');
var screenWidth = $(window).width();
$('body, html').css('overflow', 'visible');

if (screenWidth > 767) {

    $(".dropdown-submenu").hover(function () {

        var dropdownPosition = $(this).offset().left + $(this).width() + $(this).find('ul').width();
        var newPosition = $(this).offset().left - $(this).find('ul').width();
        var windowPosition = $(window).width();

        var oldPosition = $(this).offset().left + $(this).width();
        //document.title = dropdownPosition;
        if (dropdownPosition > windowPosition) {
            $(this).find('ul').offset({ "left": newPosition });
        } else {
            $(this).find('ul').offset({ "left": oldPosition });
        }
    });

}

});

— SUAT SUPHI
fuente
¡funciona! Pero limitémoslo: var newPosition = Math.max (10, ...);
— djdance
0

¿Está utilizando la última versión de bootstrap? He adaptado el html del ejemplo de diseño fluido como se muestra a continuación. Agregué un menú desplegable y lo coloqué más a la derecha agregando la pull-rightclase. Al pasar el cursor sobre el menú desplegable, se desplaza automáticamente hacia la izquierda y no se oculta nada: todo el texto del menú es visible. No he utilizado ningún CSS personalizado.

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Project name</a>
      <div class="nav-collapse collapse">
        <ul class="nav pull-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
          <li class="dropdown open">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <p class="navbar-text pull-right">
          Logged in as <a href="#" class="navbar-link">Username</a>
        </p>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>
— Mella
fuente
Esto no es exactamente lo que necesito. Esto es solo un menú desplegable (también uso pull-right o pull-left). Pero necesito abrir el submenú EN SUBMENÚ y hacerlo abierto hacia la izquierda (en el menú desplegable debe haber una flecha que indique la existencia del submenú que debe abrirse hacia la izquierda, pero no hacia la derecha, como lo hace el estándar).
— kovpack
0

Lo único que tienes que hacer es

 <ul style='left:-100%'>

del menú que desea mostrar en el lado DERECHO.

— Manoj Jain
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.