web-dev-qa-db-ja.com

Bootstrap 4-Nav-余分なメニュー項目を非表示にする

Bootstrap 4レイアウトは次のようになります： https://www.codeply.com/go/yLO99L66MD

ナビゲーションアイテムが多すぎる場合、非表示にしたいので、これを追加しました：nav {overflow:hidden}。これで問題は解決しますが、問題はドロップダウンメニューが非表示になることです。余分なメニュー項目を非表示にしながら、表示される項目のドロップダウンを表示することはできますか？

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                <div class="dropdown-menu" aria-labelledby="dropdown01">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="#">aaaaaaaa aaaaa </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="#">bbbbbb bbbbb</a>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="#">cccccccc cccccccc </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="#">dddd ddddddddd </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">eeeeeeeeeeeeeeeeee cv kbc vxckjvhkxcv </a>
            </li>


        </ul>

    </div>
</nav>

<div class="container">

    <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.
            <br> All you get is this text and a mostly barebones HTML document.</p>
    </div>

</div>
<!-- /.container -->
jqueryhtmlcsstwitter-bootstrapbootstrap-4
17
janeh

この例としてnavbarを使用できます。

ブラウザのサイズを変更すると、十分なスペースがない場合、ナビゲーションアイテムはドロップダウンの内側に移動します。

デモ

[1]: http://jsfiddle.net/swasatz/3fn4d5oq/

スニペットデモ

スニペットを全ページモードで開き、ブラウザのサイズを変更して変更を確認します。

$(document).ready(function () {
    var menu = $("#nav-bar-filter"),
        subMenu = $(".subfilter"),
        more = $("#more-nav"),
        parent = $(".filter-wrapper"),
        ww = $(window).width(),
        smw = more.outerWidth();

    menu.children("li").each(function () {
        var w = $(this).outerWidth();
        if (w > smw) smw = w + 20;
        return smw
    });
    more.css('width', smw);

    function contract() {
        var w = 0,
            outerWidth = parent.width() - smw - 50;
        for (i = 0; i < menu.children("li").size(); i++) {
            w += menu.children("li").eq(i).outerWidth();
            if (w > outerWidth) {
                menu.children("li").eq(i - 1).nextAll()
                    .detach()
                    .css('opacity', 0)
                    .prependTo(".subfilter")
                    .stop().animate({
                    'opacity': 1
                }, 300);
                break;
            }
        }
    }

    function expand() {
        var w = 0,
            outerWidth = parent.width() - smw - 20;
        menu.children("li").each(function () {
            w += $(this).outerWidth();
            return w;
        });
        for (i = 0; i < subMenu.children("li").size(); i++) {
            w += subMenu.children("li").eq(i).outerWidth();
            if (w > outerWidth) {
                var a = 0;
                while (a < i) {
                    subMenu.children("li").eq(a)
                        .css('opacity', 0)
                        .detach()
                        .appendTo("#nav-bar-filter")
                        .stop().animate({
                        'opacity': 1
                    }, 300);
                    a++;
                }
                break;
            }
        }
    }
    contract();

    $(window).on("resize", function (e) {
        ($(window).width() > ww) ? expand() : contract();
        ww = $(window).width();
    });

});
body {
    font-family: verdana;
    min-width: 250px;
}
ul#more-nav, ul#nav-bar-filter {
    display: inline-block;
    vertical-align: top;
}
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
li {
    padding: 4px 8px 4px 8px;
    margin: 0;
}
#nav-bar-filter li {
    display: inline-block;
    font-weight: bold;
}
a {
    text-decoration: none;
    color: #666;
    font-size: 13px;
}
.filter-wrapper {
    width: 100%;
    background: #eee;
    padding: 5px 10px 5px 10px;
}
#more-nav {
    float: right;
}
.subfilter{
    padding-top: 10px;
}
.subfilter li {
    margin: 0 0 0 20px;
    padding: 5px 0 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="twelve columns filter-wrapper">
    <ul class="nav-bar-filter" id="nav-bar-filter">
        <li><a href="#">All</a> 
        </li>
        <li><a href="#">Small</a>

        </li>
        <li><a href="#">Medium</a>

        </li>
        <li><a href="#">Extra large</a>

        </li>
        <li><a href="#">Text</a>

        </li>
        <li><a href="#">Small-1</a>

        </li>
        <li><a href="#">Medium-1</a>

        </li>
        <li><a href="#">Extra large text</a>

        </li>
        <li><a href="#">Large text</a>

        </li>
        <li><a href="#">Another text</a>

        </li>
        <li><a href="#">text</a>

        </li>
    </ul>
    <ul id="more-nav">
        <li><b><a href="#">More &gt;</a></b>

            <ul class="subfilter"></ul>
        </li>
    </ul>
</div>
12
Satheesh Kumar

モバイルデバイスでhiddenとして表示するメニュー項目の場合、非表示にするリスト項目の周りにスパンをラップしますそして、bootstrap 4 betahidden values）をこのように追加します。

<span class="d-none d-xs-block">
  <li class="nav-item">
    <a class="nav-link" href="#">aaaaaaaa 1234 </a>
  </li>
</span>

クラスを<a>タグに適用して、ドロップダウンメニュー内の特定のリンクを非表示にすることもできます。さらに、仕様に合わせてd-xs-blockクラスをいじくりまわします。

特定のブレークポイントでの要素の非表示に関するガイドとして役立ついくつかのソースを提供したいと思います。

1
Mister Moody

Bootstrap 4の別のオプションがあります。これは、右側のドロップダウンメニューに余分なNavbarアイテムを折りたたみます。メニュー内のアイテムの配置を制御するロジック（これはjQueryを使用） ...

function (menu,maxHeight) {

    var nav = $(menu);

    // check height of menu
    var navHeight = nav.innerHeight();

    // when the height is taller the navbar has wrapped onto 2 lines
    if (navHeight >= maxHeight) {
        $(menu + ' .dropdown').removeClass('d-none');
        $(".navbar-nav").removeClass('w-auto').addClass("w-100");
        while (navHeight > maxHeight) {
            //  add child to dropdown
            var children = nav.children(menu + ' li:not(:last-child)');
            var count = children.length;
            $(children[count - 1]).prependTo(menu + ' .dropdown-menu');
            navHeight = nav.innerHeight();
        }
        $(".navbar-nav").addClass("w-auto").removeClass('w-100');
    }
    else {
        var collapsed = $(menu + ' .dropdown-menu').children(menu + ' li');

        if (collapsed.length===0) {
          $(menu + ' .dropdown').addClass('d-none');
        }

        while (navHeight < maxHeight && (nav.children(menu + ' li').length > 0) && collapsed.length > 0) {
            //  remove child from dropdown
            collapsed = $(menu + ' .dropdown-menu').children('li');
            $(collapsed[0]).insertBefore(nav.children(menu + ' li:last-child'));
            navHeight = nav.innerHeight();
        }

        if (navHeight > maxHeight) { 
            autocollapse(menu,maxHeight);
        }
    }
}

https://www.codeply.com/go/IETSah3bFG

0
Zim

（UPDATED ANSWER）jQueryを使用して、ウィンドウ内に収まるナビゲーションメニューを表示し、残りを非表示にできます。

jQuery：

$(window).resize(function() {
    var winwidth=$(window).width(),totwidth=$('.navbar .navbar-brand').outerWidth(),shownnum=0;
    var navs=$('.navbar .nav-item');
    navs.each(function(i) {
        totwidth+=$(this).outerWidth();
        if(totwidth<winwidth) shownnum=i+1; else return false;
    });
    navs.show().slice(shownnum).hide();
});

CSS：

.navbar {overflow:hidden}
.nav-item {white-space:nowrap}

フィドル：https://www.bootply.com/59hJN5jFZo

0
Taufik Nur Rahmanda