Я пытался создать подменю загрузки twitter в раскрывающемся меню, но у меня возникла проблема: у меня есть раскрывающееся меню в правом верхнем углу страницы, и в этом меню есть еще одно подменю. Однако когда открывается подменю - оно не умещается в окне и уходит слишком вправо, чтобы пользователь мог видеть только первые буквы. Как сделать так, чтобы подменю открывалось не вправо, а влево?
.pull-rightв .dropdownконтейнер.
Ответы:
Самый простой способ - добавить pull-leftкласс к вашемуdropdown-submenu
<li class="dropdown-submenu pull-left">
jsfiddle: ДЕМО
.dropdown-submenu.pull-left>.dropdown-menu { width: 100%; } Не изящное решение, но, похоже, работает jsfiddle.net/r1v90tas
Если я правильно понял, bootstrap предоставляет класс CSS для этого случая. Добавьте "вытягивание вправо" в меню "ul":
<ul class="dropdown-menu pull-right">
..и в конечном результате пункты меню отображаются с выравниванием по правому краю, в соответствии с кнопкой, с которой они выпадают.
pull-rightкласс.
Curent класс .dropdown-submenu > .dropdown-menuесть left: 100%;. Итак, если вы хотите открыть подменю с левой стороны, переопределите эти настройки на отрицательное левое положение. Например left: -95%;. Теперь у вас появится подменю с левой стороны, и вы можете настроить другие параметры, чтобы получить идеальный предварительный просмотр.
Вот ДЕМО
РЕДАКТИРОВАТЬ: вопрос OP и мой ответ относятся к августу 2012 года. Между тем, Bootstrap изменился, поэтому теперь у вас есть класс .pull-left. Тогда мой ответ был правильным. Теперь вам не нужно вручную устанавливать css, у вас есть класс .pull-left.
РЕДАКТИРОВАТЬ 2: демонстрации не работают, потому что Bootstrap изменил свои URL-адреса. Просто измените внешние ресурсы в jsfiddle и замените их новыми.
left: -90%;(иначе я не могу переместить курсор в это подменю, потому что оно исчезнет).
Если вы используете bootstrap v4, есть новый способ сделать это.
Вы должны использовать .dropdown-menu-rightна .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>
Ссылка на код: https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-items
dropleftи, droprightно контекст ответа правильный. Благодарность!
Правильный способ выполнения задачи:
/* 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, которая смотрит, достаточно ли у него места с правой стороны. Если он есть, он покажет его с правой стороны, иначе он отобразит его с левой стороны
Проверено в:
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 });
}
});
});
потому что я не хочу добавлять это исправление в каждый пункт меню, я создал для него новый класс. поместите фиксированное меню на ul:
<ul class="dropdown-menu fixed-menu">
Я надеюсь, что это сработает для вас.
пс. небольшая ошибка в Safari и Chrome, при первом наведении указатель мыши переместит его в положение «mutch влево», обновит этот пост, если я исправлю его.
На самом деле - если вас устраивает плавающая dropdownоболочка - я обнаружил, что это так же просто, как добавить navbar-rightв файл dropdown.
Это похоже на обман, так как его нет на панели навигации, но у меня он отлично работает.
<div class="dropdown navbar-right">
...
</div>
Вы можете дополнительно настроить плавучий с pull-leftнепосредственно в dropdown...
<div class="dropdown pull-left navbar-right">
...
</div>
... или как обертку вокруг него ...
<div class="pull-left">
<div class="dropdown navbar-right">
...
</div>
</div>
Если вы используете LESS CSS, я написал небольшой миксин для перемещения раскрывающегося списка со стрелкой соединения:
.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
}
Затем, чтобы переместить, например, .dropdown-menuидентификатор dropdown-menu-x, вы можете:
#dropdown-menu-x {
.dropdown-menu-shift( -100px );
}
Я создал функцию javascript, которая смотрит, достаточно ли у него места с правой стороны. Если он есть, он покажет его с правой стороны, иначе он отобразит его с левой стороны. Опять же, если у него достаточно места с правой стороны, он будет отображаться с правой стороны. это петля ...
$(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 });
}
});
}
});
Вы используете последнюю версию бутстрапа? Я адаптировал html из примера Fluid Layout, как показано ниже. Я добавил раскрывающийся список и поместил его дальше всего справа, добавив pull-rightкласс. При наведении курсора на раскрывающееся меню оно автоматически перемещается влево, и ничего не скрывается - весь текст меню виден. Я не использовал никаких кастомных 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>
Единственное, что тебе нужно сделать, это
<ul style='left:-100%'>
меню, которое вы хотите отобразить на ПРАВОЙ стороне.