bagaimana cara membuat submenu bootstrap twitter terbuka di sisi kiri?

Saya mencoba membuat submenu bootstrap twitter di menu dropdown, tetapi saya mendapat masalah: Saya memiliki menu dropdown di sudut kanan atas halaman dan menu itu memiliki satu submenu lagi. Namun, saat submenu terbuka - submenu tidak muat di jendela dan terlalu banyak ke kanan, sehingga pengguna hanya dapat melihat huruf pertama. Bagaimana cara membuat submenu itu terbuka bukan ke kanan, tapi ke kiri?

Cara termudah adalah dengan menambahkan pull-leftkelas kedropdown-submenu

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

jsfiddle: DEMO

Jika saya memahami hak ini, bootstrap menyediakan kelas CSS hanya untuk kasus ini. Tambahkan 'pull-right' ke menu 'ul':

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

..dan hasil akhirnya adalah bahwa opsi menu muncul rata kanan, sejalan dengan tombol drop-down.

Kelas saat ini .dropdown-submenu > .dropdown-menumemiliki left: 100%;. Jadi, jika Anda ingin membuka submenu di sisi kiri, ganti pengaturan tersebut ke posisi kiri negatif. Sebagai contohleft: -95%; . Sekarang Anda akan mendapatkan submenu di sisi kiri, dan Anda dapat mengubah pengaturan lain untuk mendapatkan pratinjau yang sempurna.

Disini adalah DEMO

EDIT: Pertanyaan OP dan jawaban saya adalah dari Agustus 2012. Sementara itu, Bootstrap berubah, jadi sekarang Anda memiliki kelas .pull-left. Saat itu, jawaban saya benar. Sekarang Anda tidak perlu menyetel css secara manual, Anda memiliki kelas .pull-left itu.

EDIT 2: Demo tidak berfungsi, karena Bootstrap mengubah URL-nya. Ubah saja sumber daya eksternal di jsfiddle dan ganti dengan yang baru.

Jika Anda menggunakan bootstrap v4, ada cara baru untuk melakukannya.

Anda harus menggunakan .dropdown-menu-rightpada .dropdown-menuelemen.

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

Tautan ke kode: https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-items

Cara yang benar untuk melakukan tugas tersebut adalah:

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

Saya telah membuat fungsi javascript yang terlihat jika dia memiliki cukup ruang di sisi kanan. Jika sudah, dia akan menampilkannya di sisi kanan, kalau tidak dia akan menampilkannya di sisi kiri

Diuji di:

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

karena saya tidak ingin menambahkan perbaikan ini pada setiap item menu yang saya buat kelas baru di atasnya. tempatkan menu tetap di ul:

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

Saya harap ini berhasil untuk Anda.

ps. bug kecil di safari dan chrome, hover pertama akan menempatkannya ke mutch ke kiri akan memperbarui posting ini jika saya memperbaikinya.

Jika Anda hanya memiliki satu tingkat dan Anda menggunakan bootstrap 3 add pull-rightke ulelemen

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

Sebenarnya - jika Anda baik-baik saja dengan mengapung dropdownpembungkusnya - saya merasa itu semudah menambahkan navbar-rightkedropdown .

Ini sepertinya curang, karena tidak ada di bilah navigasi, tetapi berfungsi dengan baik untuk saya.

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

Anda kemudian dapat menyesuaikan floating lebih lanjut dengan pull-leftlangsung di dropdown...

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

... atau sebagai pembungkus di sekitarnya ...

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

Jika Anda menggunakan LESS CSS, saya menulis sedikit mixin untuk memindahkan dropdown dengan panah penghubung:

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

Kemudian untuk memindahkan a .dropdown-menudengan id dropdown-menu-xmisalnya, Anda dapat melakukan:

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

Saya telah membuat fungsi javascript yang terlihat jika dia memiliki cukup ruang di sisi kanan. Jika sudah, dia akan menampilkannya di sisi kanan, kalau tidak dia akan menampilkannya di sisi kiri. Sekali lagi jika memiliki cukup ruang di sisi kanan, itu akan menunjukkan sisi kanan. itu adalah lingkaran ...

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

}

});

Apakah Anda menggunakan bootstrap versi terbaru? Saya telah mengadaptasi html dari contoh Fluid Layout seperti yang ditunjukkan di bawah ini. Saya menambahkan drop down dan meletakkannya terjauh ke sisi kanan dengan menambahkan pull-rightkelas. Saat mengarahkan kursor ke menu drop-down, maka secara otomatis ditarik ke kiri dan tidak ada yang disembunyikan - semua teks menu terlihat. Saya belum pernah menggunakan css khusus.

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

Satu-satunya hal yang harus Anda lakukan adalah

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

dari menu yang ingin Anda tampilkan di sisi KANAN.