comment faire ouvrir le sous-menu Twitter bootstrap sur le côté gauche?

J'essayais de créer un sous-menu de démarrage Twitter dans le menu déroulant, mais j'ai un problème: j'ai un menu déroulant dans le coin supérieur droit de la page et ce menu a un sous-menu supplémentaire. Cependant, lorsque le sous-menu s'ouvre, il ne rentre pas dans la fenêtre et va trop vers la droite, de sorte que l'utilisateur ne peut voir que les premières lettres. Comment faire en sorte que ce sous-menu ne s'ouvre pas à droite, mais à gauche?

Le moyen le plus simple serait d'ajouter la pull-leftclasse à votredropdown-submenu

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

jsfiddle: DEMO

Si j'ai bien compris, bootstrap fournit une classe CSS pour ce cas précis. Ajoutez 'pull-right' au menu 'ul':

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

..et le résultat final est que les options de menu apparaissent alignées à droite, en ligne avec le bouton à partir duquel elles se déroulent.

La classe actuelle .dropdown-submenu > .dropdown-menua left: 100%;. Donc, si vous souhaitez ouvrir le sous-menu sur le côté gauche, remplacez ces paramètres en position négative à gauche. Par exemple left: -95%;. Vous obtiendrez maintenant un sous-menu sur le côté gauche et vous pourrez modifier d'autres paramètres pour obtenir un aperçu parfait.

Voici DEMO

EDIT: La question et ma réponse d'OP datent d'août 2012. Pendant ce temps, Bootstrap a changé, donc maintenant vous avez la classe .pull-left. À l'époque, ma réponse était correcte. Vous n'avez plus besoin de définir manuellement css, vous avez cette classe .pull-left.

EDIT 2: Les démos ne fonctionnent pas, car Bootstrap a changé leur URL. Changez simplement les ressources externes dans jsfiddle et remplacez-les par de nouvelles.

Si vous utilisez bootstrap v4, il existe une nouvelle façon de le faire.

Vous devez utiliser .dropdown-menu-rightsur l' .dropdown-menuélément.

<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>

Lien vers le code: https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-items

La bonne façon de faire la tâche est:

/* 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; }

J'ai créé une fonction javascript qui regarde s'il a suffisamment d'espace sur le côté droit. Si c'est le cas, il l'affichera sur le côté droit, sinon il l'affichera sur le côté gauche

Testé 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 });
        }
    });
});

parce que je ne veux pas ajouter ce correctif sur tous les éléments de menu, j'ai créé une nouvelle classe dessus. placez le menu fixe sur ul:

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

J'espère que cela fonctionne pour vous.

ps. petit bug dans safari et chrome, le premier survol le placera à mutch à gauche mettra à jour ce post si je l'ai corrigé.

Si vous n'avez qu'un seul niveau et que vous utilisez bootstrap 3, ajoutez pull-rightà l' ulélément

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

En fait - si vous êtes d'accord pour faire flotter le dropdownwrapper - j'ai trouvé que c'était aussi simple que de l'ajouter navbar-rightau fichier dropdown.

Cela ressemble à de la triche, car ce n'est pas dans une barre de navigation, mais cela fonctionne bien pour moi.

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

Vous pouvez ensuite personnaliser davantage le flottant avec un pull-leftdirectement dans le dropdown...

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

... ou comme emballage autour d'elle ...

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

Si vous utilisez LESS CSS, j'ai écrit un petit mixin pour déplacer la liste déroulante avec la flèche de connexion:

.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
}

Ensuite, pour déplacer un .dropdown-menuavec un identifiant de dropdown-menu-xpar exemple, vous pouvez faire:

#dropdown-menu-x {
    .dropdown-menu-shift( -100px );
}

J'ai créé une fonction javascript qui regarde s'il a suffisamment d'espace sur le côté droit. Si c'est le cas, il l'affichera sur le côté droit, sinon il l'affichera sur le côté gauche. Encore une fois, s'il a suffisamment d'espace sur le côté droit, il affichera le côté droit. c'est une boucle ...

$(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 });
        }
    });

}

});

Utilisez-vous la dernière version de bootstrap? J'ai adapté le code HTML de l'exemple de mise en page fluide comme indiqué ci-dessous. J'ai ajouté une liste déroulante et l'ai placée le plus à droite en ajoutant la pull-rightclasse. Lorsque vous survolez le menu déroulant, il est automatiquement tiré vers la gauche et rien n'est caché - tout le texte du menu est visible. Je n'ai utilisé aucun css personnalisé.

<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>

La seule chose que tu as à faire est

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

du menu que vous souhaitez afficher sur le côté DROIT.