it-swarm.com.ru

Bootstrap отсутствует раскрывающееся подменю

Bootstrap 3 все еще в RC, но я просто пытался это реализовать. Я не мог понять, как поставить класс подменю. Даже нет класса в CSS, и даже новые документы ничего не говорят об этом

Это было там в 2.x с именем класса в выпадающем меню

308
DevC

Обновлено 2018

Код dropdown-submenu был удален в Bootstrap 3 RC. По словам Bootstrap автора Марка Отто ..

"Подменю просто не так много места в Интернете сейчас, особенно в мобильном Интернете. Они будут удалены с 3.0" - https://github.com/twbs/bootstrap/pull/6342

Но с небольшим дополнительным CSS вы можете получить ту же функциональность.

Bootstrap 4 (подменю navbar при наведении курсора)

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
}

всплывающее меню подменю Navbar
Навигация подменю Navbar (выравнивание по правому краю)
щелчок выпадающего меню подменю Navbar (выравнивание по правому краю)
Навигация по выпадающему меню Navbar (без подменю)


Bootstrap

Вот пример, который использует 3.0 RC 1: http://bootply.com/7152

Вот пример, который использует Bootstrap 3.0.0 (окончательный вариант): http://bootply.com/86684

CSS

.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display:block;
}
.dropdown-submenu>a:after {
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
    float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}

Пример разметки

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">  
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li class="menu-item dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li class="menu-item dropdown dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
                            <ul class="dropdown-menu">
                                <li class="menu-item ">
                                    <a href="#">Link 1</a>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#">Link 3</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

Постскриптум - Пример в navbar, который регулирует левое положение: http://bootply.com/92442

526
Zim

Решение @skelly хорошо, но не будет работать на мобильных устройствах, так как состояние наведения не будет работать.

Я добавил немного JS, чтобы вернуть поведение BS 2.3.2.

PS: он будет работать с CSS, который вы там получите: http://bootply.com/7152 хотя вы можете прокомментировать следующую часть:

CSS:

/*.dropdown-submenu:hover>.dropdown-menu{display:block;}*/

JS:

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
  // Avoid following the href location when clicking
  event.preventDefault();
  // Avoid having the menu to close when clicking
  event.stopPropagation();
  // If a menu is already open we close it
  $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
  // opening the one you clicked on
  $(this).parent().addClass('open');
});

Результат можно найти в моей теме WordPress (вверху страницы): http://shprinkone.julienrenaux.fr/

61
Shprink

До сегодняшнего дня (9 января 2014 г.) Bootstrap 3 по-прежнему не поддерживает раскрывающееся меню.

Я искал Google о адаптивном меню навигации и обнаружил, что это лучшее, что я.

Это Умные меню http://www.smartmenus.org/

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

обновление 2015-02-17 Умные меню теперь полностью поддерживают стиль элемента Bootstrap для подменю. Для получения дополнительной информации, пожалуйста, посетите веб-сайт Smart Menus.

42
vee

Код Шпринка мне больше всего помог, но чтобы избежать выпадения выпадающего экрана, я обновил его до:

JS:

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
    // Avoid following the href location when clicking
    event.preventDefault(); 
    // Avoid having the menu to close when clicking
    event.stopPropagation(); 
    // If a menu is already open we close it
    $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
    // opening the one you clicked on
    $(this).parent().addClass('open');

    var menu = $(this).parent().find("ul");
    var menupos = $(menu).offset();

    if (menupos.left + menu.width() > $(window).width()) {
        var newpos = -$(menu).width();
        menu.css({ left: newpos });    
    } else {
        var newpos = $(this).parent().width();
        menu.css({ left: newpos });
    }

});

CSS: FROM background-color: #eeeeee TO background-color: # c5c5c5 - белый шрифт и светлый фон выглядели не очень хорошо.

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: #c5c5c5;
  border-color: #428bca;
}

Я надеюсь, что это помогает людям так же, как и для меня!

Но я надеюсь, что Bootstrap добавит функцию sub как можно скорее.

5
WHOMEZz

Комментарий к действительно полезный обходной путь Skelly : в Bootstrap-sass 3.3.6, utilities.scss, строка 19: .pull-left имеет float:left !important. После этого я рекомендую использовать! Важный в своем CSS:

.dropdown-submenu.pull-left {
    float:none !important;
}
4
bencergazda

Я столкнулся с этой проблемой несколько дней назад. Я перепробовал много решений, и ни одно из них не помогло мне в конце, когда я закончил тем, что создал расширение/переопределение выпадающего кода начальной загрузки. Это копия исходного кода с изменениями в функции closeMenus.

Я думаю, что это хорошее решение, поскольку оно не влияет на основные классы bootstrap js.

Вы можете проверить это на gihub: https://github.com/djokodonev/bootstrap-multilevel-dropdown

2
George Donev