comment faire en sorte que le sous-menu de twitter bootstrap s'ouvre sur le côté gauche ?

Question

J'ai essayé de créer un sous-menu twitter bootstrap dans un 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 autre sous-menu. Cependant, lorsque le sous-menu s'ouvre, il ne tient pas dans la fenêtre et va trop à droite, de sorte que l'utilisateur ne peut voir que les premières lettres. Comment faire pour que ce sous-menu ne s'ouvre pas à droite, mais à gauche ?

Answer 1

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

Testé dans :

• 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 });
        }
    });
});

Comme je ne veux pas ajouter ce correctif à tous les éléments de menu, j'ai créé une nouvelle classe à ce sujet. placer le menu fixe sur le ul :

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

J'espère que ça va marcher pour vous.

ps. petit bug dans safari et chrome, le premier survol le placera un peu plus à gauche, je mettrai à jour ce post si je le corrige.

Answer 2

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

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

Answer 3

En fait, si vous êtes d'accord pour laisser flotter le dropdown J'ai trouvé que c'était aussi simple que d'ajouter navbar-right à la dropdown .

Cela semble être de la triche, puisque 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 flottement à l'aide de l'option pull-left directement dans le dropdown ...

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

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

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

Answer 4

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-menu avec un id de dropdown-menu-x par exemple, vous pouvez le faire :

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

Answer 5

J'ai créé une fonction javascript qui regarde s'il a assez 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. De nouveau s'il a assez d'espace sur le côté droit, il l'affichera sur 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 });
        }
    });

}

}) ;