Rectangle 27 25

Curent class .dropdown-submenu > .dropdown-menu have left: 100%;. So, if you want to open submenu on the left side, override those settings to negative left position. For example left: -95%;. Now you will get submenu on the left side, and you can tweak other settings to get perfect preview.

EDIT 2: Demos aren't working, because Bootstrap changed their URL's. Just change external resources in jsfiddle and replace them with new ones.

Thanks. Almost exactly what I need, however, there should be left: -90%; (otherwize I can't move my mouse to that submenu, cause it disappears).

Like i said, that is just idea what you need to do. Glad i'm helped :)

none of the demos are working

javascript - how to make twitter bootstrap submenu to open on the left...

javascript jquery css twitter-bootstrap
Rectangle 27 105

If I've understood this right, bootstrap provides a CSS class for just this case. Add 'pull-right' to the menu 'ul':

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

..and the end result is that the menu options appear right-aligned, in line with the button they drop down from.

absolutely, i needed the main menu, not the submenu to move over. so i needed to target the <ul> element. it's confusing because you want to move it to the left, however you use pull-right class to achieve this.

This is correct. add .pull-right and your dropdown will not go off the right hand side of the screen!

javascript - how to make twitter bootstrap submenu to open on the left...

javascript jquery css twitter-bootstrap
Rectangle 27 102

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

This works nicely for some cases, but breaks if the items in the main menu are too long, as in this fiddle: jsfiddle.net/szx4Y/446 Anyone have a quick idea for a fix?

.dropdown-submenu.pull-left>.dropdown-menu { width: 100%; }

@Schmalzy looking at it further, width:100% causes a different issue with long items in the submenu jsfiddle.net/r1v90tas/1 and that is fixed by using min-width:100% instead, as per here: jsfiddle.net/r1v90tas/2

javascript - how to make twitter bootstrap submenu to open on the left...

javascript jquery css twitter-bootstrap
Rectangle 27 11

The correct way to do the task is:

/* 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; }
.dropdown-submenu { position: relative; text-align:right; }

javascript - how to make twitter bootstrap submenu to open on the left...

javascript jquery css twitter-bootstrap
Rectangle 27 10

If you are using bootstrap v4 there is a new way to do that.

.dropdown-menu-right
.dropdown-menu

javascript - how to make twitter bootstrap submenu to open on the left...

javascript jquery css twitter-bootstrap
Rectangle 27 4

I have created a javascript function that looks if he has enough space on the right side. If it has he will show it on the right side, else he will display it on the left side

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

because I don't want to add this fix on every menu items I created a new class on it. place the fixed-menu on the ul:

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

ps. little bug in safari and chrome, first hover will place it to mutch to the left will update this post if I fixed it.

+1: I made a few changes, but this lead me to a working solution.

javascript - how to make twitter bootstrap submenu to open on the left...

javascript jquery css twitter-bootstrap
Rectangle 27 2

If you have only one level and you use bootstrap 3 add pull-right to the ul element

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

javascript - how to make twitter bootstrap submenu to open on the left...

javascript jquery css twitter-bootstrap
Rectangle 27 0

Are you using the latest version of bootstrap? I have adapted the html from the Fluid Layout example as shown below. I added a drop down and placed it furthest to the right hand side by adding the pull-right class. When hovering over the drop down menu it is automatically pulled to the left and nothing is hidden - all the menu text is visible. I have not used any custom css.

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

This is not exactly what I need. This is just dropdown (I also use pull-right or pull-left). But I need to open submenu IN SUBMENU and to make it open to the left (in dropdown should be arrow indicating the existence of the submenu which should open to the left, but not right, as the standard one does).

javascript - how to make twitter bootstrap submenu to open on the left...

javascript jquery css twitter-bootstrap
Rectangle 27 0

Actually - if you are ok with floating the dropdown wrapper - I've found it to be as easy as to add navbar-right to the dropdown.

This seems like cheating, since it's not in a navbar, but it works fine for me.

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

You can then further customize the floating with a pull-left directly in the dropdown...

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

... or as a wrapper around it ...

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

javascript - how to make twitter bootstrap submenu to open on the left...

javascript jquery css twitter-bootstrap
Rectangle 27 0

I have created a javascript function that looks if he has enough space on the right side. If it has he will show it on the right side, else he will display it on the left side

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

because I don't want to add this fix on every menu items I created a new class on it. place the fixed-menu on the ul:

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

ps. little bug in safari and chrome, first hover will place it to mutch to the left will update this post if I fixed it.

+1: I made a few changes, but this lead me to a working solution.

javascript - how to make twitter bootstrap submenu to open on the left...

javascript jquery css twitter-bootstrap
Rectangle 27 0

If you're using LESS CSS, I wrote a little mixin to move the dropdown with the connecting arrow:

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

Then to move a .dropdown-menu with an id of dropdown-menu-x for example, you can do:

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

javascript - how to make twitter bootstrap submenu to open on the left...

javascript jquery css twitter-bootstrap
Rectangle 27 0

Are you using the latest version of bootstrap? I have adapted the html from the Fluid Layout example as shown below. I added a drop down and placed it furthest to the right hand side by adding the pull-right class. When hovering over the drop down menu it is automatically pulled to the left and nothing is hidden - all the menu text is visible. I have not used any custom css.

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

This is not exactly what I need. This is just dropdown (I also use pull-right or pull-left). But I need to open submenu IN SUBMENU and to make it open to the left (in dropdown should be arrow indicating the existence of the submenu which should open to the left, but not right, as the standard one does).

javascript - how to make twitter bootstrap submenu to open on the left...

javascript jquery css twitter-bootstrap
Rectangle 27 0

If I've understood this right, bootstrap provides a CSS class for just this case. Add 'pull-right' to the menu 'ul':

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

..and the end result is that the menu options appear right-aligned, in line with the button they drop down from.

absolutely, i needed the main menu, not the submenu to move over. so i needed to target the <ul> element. it's confusing because you want to move it to the left, however you use pull-right class to achieve this.

javascript - how to make twitter bootstrap submenu to open on the left...

javascript jquery css twitter-bootstrap
Rectangle 27 0

Curent class .dropdown-submenu > .dropdown-menu have left: 100%;. So, if you want to open submenu on the left side, override those settings to negative left position. For example left: -95%;. Now you will get submenu on the left side, and you can tweak other settings to get perfect preview.

EDIT 2: Demos aren't working, because Bootstrap changed their URL's. Just change external resources in jsfiddle and replace them with new ones.

Thanks. Almost exactly what I need, however, there should be left: -90%; (otherwize I can't move my mouse to that submenu, cause it disappears).

Like i said, that is just idea what you need to do. Glad i'm helped :)

none of the demos are working

none of the demos are working for me either

javascript - how to make twitter bootstrap submenu to open on the left...

javascript jquery css twitter-bootstrap
Rectangle 27 0

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

This should be the accepted answer.

.dropdown-submenu.pull-left>.dropdown-menu { width: 100%; }

@Schmalzy looking at it further, width:100% causes a different issue with long items in the submenu jsfiddle.net/r1v90tas/1 and that is fixed by using min-width:100% instead, as per here: jsfiddle.net/r1v90tas/2

javascript - how to make twitter bootstrap submenu to open on the left...

javascript jquery css twitter-bootstrap
Rectangle 27 0

The correct way to do the task is:

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

javascript - how to make twitter bootstrap submenu to open on the left...

javascript jquery css twitter-bootstrap
Rectangle 27 0

If you're using LESS CSS, I wrote a little mixin to move the dropdown with the connecting arrow:

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

Then to move a .dropdown-menu with an id of dropdown-menu-x for example, you can do:

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

javascript - how to make twitter bootstrap submenu to open on the left...

javascript jquery css twitter-bootstrap
Rectangle 27 0

Actually - if you are ok with floating the dropdown wrapper - I've found it to be as easy as to add navbar-right to the dropdown.

This seems like cheating, since it's not in a navbar, but it works fine for me.

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

You can then further customize the floating with a pull-left directly in the dropdown...

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

... or as a wrapper around it ...

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

javascript - how to make twitter bootstrap submenu to open on the left...

javascript jquery css twitter-bootstrap