Выпадающее меню с левой стороны

Question

Я хочу показать элементы, когда я нажимаю кнопку горизонтального эллипса. Я хотел бы показать вспомогательные элементы inline с родительским, слева от кнопки.

Изображение, как оно должно выглядеть следующим образом:

Вот мой выпадающий код, но его только вниз, и я не знаю, как отобразить его всегда на левой стороне. Значки - значки шрифтов, если кто-то может опубликовать jsfiddle, это было бы здорово.

<div class="dropdown"> 
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i> 
     <span class="caret"></span></button> 
     <ul class="dropdown-menu"> 
     <li class="dropleft-items"><a href="#"><i class="fa fa-times" aria-hidden="true"></i></a></li> 
     <li><a href="#"><i class="fa fa-times" aria-hidden="true"></i></a></li> 
     <li><a href="#"><i class="fa fa-times" aria-hidden="true"></i></a></li> 
     </ul> 
    </div> 

Я использую CSS Bootstrap.

Answer 1

, если я правильно понял, и хотят что-то вроде этого ...

$(document).ready(function(){ 
 
    var menuWrapper = $('.menu'), 
 
     button = menuWrapper.find('button'), 
 
     menu = menuWrapper.find('ul.toggle-left'); 
 
    $(button).on('click', function(){ 
 
    $(this).prev(menu).toggle(); 
 
    }); 
 
});

.menu{ 
 
    border-top: 1px solid #eee; 
 
    border-bottom: 1px solid #eee; 
 
    padding: 5px 5px; 
 
} 
 

 
ul.toggle-left{ 
 
    float: left; 
 
    list-style-type: none; 
 
    margin-bottom: 0; 
 
    padding-left: 0; 
 
    display: none; 
 
} 
 

 
ul.toggle-left>li{ 
 
    float: left; 
 
    padding: 5px 10px; 
 
} 
 
.btn-toggle{ 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="dropdown"> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="menu" class="clearfix"> 
 
    <ul class="toggle-left clearfix"> 
 
     <li class="btn"><a href="#"><i class="fa fa-times"></i></a></li> 
 
     <li class="btn"><a href="#"><i class="fa fa-times"></i></a></li> 
 
     <li class="btn"><a href="#"><i class="fa fa-times"></i></a></li> 
 
     </ul> 
 
    <button class="btn" type="button" class="btn-toggle"><i class="fa fa-ellipsis-h" aria-hidden="false"></i></button> 
 
</div> 
 
    <div class="menu" class="clearfix"> 
 
    <ul class="toggle-left clearfix"> 
 
     <li class="btn"><a href="#"><i class="fa fa-times"></i></a></li> 
 
     <li class="btn"><a href="#"><i class="fa fa-times"></i></a></li> 
 
     <li class="btn"><a href="#"><i class="fa fa-times"></i></a></li> 
 
     </ul> 
 
    <button class="btn" type="button" class="btn-toggle"><i class="fa fa-ellipsis-h" aria-hidden="false"></i></button> 
 
</div>