sol tarafta twitter bootstrap alt menüsü nasıl açılır?

Açılır menüde twitter önyükleme alt menüsü oluşturmaya çalışıyordum ama bir sorunla karşılaştım: Sayfanın sağ üst köşesinde açılır menüm var ve bu menünün bir alt menüsü daha var. Ancak, alt menü açıldığında - pencereye sığmaz ve çok fazla sağa gider, böylece kullanıcı yalnızca ilk harfleri görebilir. Bu alt menüyü sağa değil sola açacak şekilde nasıl yapabilirim?

En basit yol, pull-leftsınıfı sizin sayfanıza eklemektir .dropdown-submenu

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

jsfiddle: DEMO

Bunu doğru anladıysam, bootstrap sadece bu durum için bir CSS sınıfı sağlar. 'Ul' menüsüne 'sağa çekin' ekleyin:

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

..ve sonuç, menü seçeneklerinin aşağıya açılan düğme ile aynı hizada sağa hizalı görünmesidir.

Mevcut sınıf .dropdown-submenu > .dropdown-menuvar left: 100%;. Bu nedenle, sol tarafta alt menüyü açmak istiyorsanız, bu ayarları negatif sol konuma getirin. Örneğin left: -95%;. Şimdi sol tarafta alt menüyü göreceksiniz ve mükemmel önizleme elde etmek için diğer ayarları değiştirebilirsiniz.

İşte DEMO

DÜZENLEME: OP'nin sorusu ve cevabım Ağustos 2012'den. Bu arada, Bootstrap değişti, yani artık .pull-left sınıfınız var. O zamanlar cevabım doğruydu. Artık css'i manuel olarak ayarlamanıza gerek yok, o .pull-left sınıfına sahipsiniz.

DÜZENLEME 2: Demolar çalışmıyor çünkü Bootstrap URL'lerini değiştirdi. Sadece jsfiddle'daki harici kaynakları değiştirin ve yenileriyle değiştirin.

Bootstrap v4 kullanıyorsanız, bunu yapmanın yeni bir yolu var.

Eleman .dropdown-menu-rightüzerinde kullanmalısınız .dropdown-menu.

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

Koda bağlantı: https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-items

Görevi yapmanın doğru yolu şudur:

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

Sağ tarafta yeterli alan olup olmadığını gösteren bir javascript işlevi oluşturdum. Varsa sağ tarafta gösterecek, yoksa sol tarafta gösterecektir.

Test edilen yer:

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

çünkü bu düzeltmeyi, üzerinde yeni bir sınıf oluşturduğum her menü öğesine eklemek istemiyorum. sabit menüyü ul üzerine yerleştirin:

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

Umarım bu senin için sonuçlanır.

ps. Safari ve chrome'da küçük bir hata, ilk hover onu sola mutch yerleştirecek, eğer düzeltirsem bu yazıyı güncelleyecektir.

Yalnızca bir seviyeniz varsa ve bootstrap 3 kullanıyorsanız pull-right, ulöğeye ekleyin

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

Aslında - eğer dropdownsarmalayıcıyı yüzdürmek sizin için sorun değilse - bunu navbar-right,dropdown .

Gezinme çubuğunda olmadığı için hile gibi görünüyor, ama benim için iyi çalışıyor.

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

Daha sonra başka bir ile yüzer özelleştirebilirsiniz pull-leftdoğrudan dropdown...

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

... ya da etrafına sarıcı olarak ...

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

LESS CSS kullanıyorsanız, açılır menüyü bağlantı okuyla hareket ettirmek için biraz mixin yazdım:

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

Daha sonra örneğin .dropdown-menubir id ile bir a taşımak dropdown-menu-xiçin şunları yapabilirsiniz:

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

Sağ tarafta yeterli alan olup olmadığını gösteren bir javascript işlevi oluşturdum. Varsa sağ tarafta gösterecek, yoksa sol tarafta gösterecektir. Yine sağ tarafta yeterli boşluk varsa, sağ tarafta görünecektir. bu bir döngü ...

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

}

});

Bootstrap'in en son sürümünü mü kullanıyorsunuz? Html'yi Fluid Layout örneğinden aşağıda gösterildiği gibi uyarladım . Bir açılır menü ekledim ve pull-rightsınıfı ekleyerek en sağ tarafa yerleştirdim . Açılır menünün üzerine gelindiğinde, otomatik olarak sola çekilir ve hiçbir şey gizlenmez - tüm menü metni görünür. Herhangi bir özel css kullanmadım.

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

Yapman gereken tek şey

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

SAĞ tarafta görüntülemek istediğiniz menünün.