web-dev-qa-db-ja.com

ブートストラップドロップダウンサブメニューがありません

Bootstrap 3はまだRCですが、実装しようとしていました。私はサブメニュークラスを置く方法を理解することができませんでした。 CSSにはクラスがなく、新しいドキュメントでさえそれについて何も言っていません。

ドロップダウンサブメニューとしてクラス名で2.xにありました

csstwitter-bootstraptwitter-bootstrap-3submenu
305
DevC

2018年更新

dropdown-submenuはBootstrap 3 RCで削除されました。ブートストラップ作家Mark Ottoの言葉では..

「サブメニューは今のところウェブ、特にモバイルウェブにはあまり場所がない。それらは3.0で削除されるだろう」 - https://github.com/twbs/bootstrap/pull/6342

しかし、少し余分なCSSを使えば、同じ機能を得ることができます。

ブートストラップ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サブメニューのドロップダウンクリック（右揃え）
ナビゲーションバーのドロップダウンホバー（サブメニューなし）

ブートストラップ3

これは3.0 RC 1を使用する例です： http://bootply.com/71520

これは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>

P.S - ナビゲーションバーの左の位置を調整する例： http://bootply.com/92442

521
Zim

@skellyの解決策は良いですが、ホバー状態が機能しないため、モバイルデバイスでは機能しません。

BS 2.3.2の振る舞いを取り戻すためにJSを少し追加しました。

シモンズ：それはあなたがそこに着くCSSで動作します： http://bootply.com/71520 あなたは次の部分をコメントすることができますが：

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

今日まで（2014年1月9日）、Bootstrap 3はまだサブメニューのドロップダウンをサポートしていません。

私はレスポンシブナビゲーションメニューについてGoogleを検索しましたが、これは私が一番いいと思いました。

スマートメニュー http://www.smartmenus.org/ /

私はこれがマルチレベルのサブメニューを持つナビゲーションメニューを望む人のための方法であることを願っています。

update 2015-02-17スマートメニューはサブメニューのブートストラップ要素スタイルを完全にサポートするようになりました。詳しくはスマートメニューのウェブサイトをご覧ください。

42
vee

Shprinkのコードは私を最も助けてくれましたが、画面外に出るドロップダウンを避けるために私はそれを次のように更新しました：

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：背景色から：#eeeeeeから背景色：＃c5c5c5へ - 白いフォントと明るい背景は見栄えがよくありませんでした。

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

これが私にとってそうであったのと同じくらい多くの人々に役立つことを願っています！

しかし、Bootstrapがsubs機能をできるだけ早く追加してくれることを願っています。

5
WHOMEZz

へのコメントSkellyの本当に有用な回避策 ：Bootstrap-sass 3.3.6、utilities.scss、19行目：.pull-leftにはfloat:left !importantがあります。それ以来、私は彼のCSSでも！importantを使用することをお勧めします。

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

私は数日前にこの問題にぶつかった。私は多くの解決策を試してみましたが、結局私はブートストラップのドロップダウンコードの拡張/オーバーライドを作成することになりましたが、どれも私にとってうまくいきませんでした。これは、closeMenus関数が変更された元のコードのコピーです。

私はそれがブートストラップjsのコアクラスに影響を及ぼさないのでそれが良い解決策であると思います。

あなたはgihubでそれをチェックアウトすることができます： https://github.com/djokodonev/bootstrap-multilevel-dropdown

2
George Donev