web-dev-qa-db-fra.com

Bootstrap 4 - Nav - Masquer des éléments de menu supplémentaires

J'ai une mise en page Bootstrap 4 similaire à celle-ci: https://www.codeply.com/go/yLO99L66MD

Quand il y a trop d'éléments de navigation, je veux qu'ils soient cachés, alors j'ai ajouté ceci: nav {overflow:hidden}. Cela fait le travail, mais le problème est que cela cache aussi mon menu déroulant. Comment masquer des éléments de menu supplémentaires tout en permettant aux menus déroulants de s'afficher pour les éléments visibles?

<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
16
janeh

Vous pouvez utiliser la barre de navigation comme exemple donné.

Lorsque vous redimensionnez le navigateur, les éléments de navigation sont déplacés dans la liste déroulante s’ils ne disposent pas d’un espace suffisant. 

Démo

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

Démo Snippet

Ouvrez l'extrait de code en mode pleine page et redimensionnez le navigateur pour voir les modifications.

$(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>

11
Satheesh Kumar

Pour les éléments de menu que vous souhaitez afficher sous la forme hidden sur les appareils mobiles, entourez les éléments de la liste que vous souhaitez masquer et ajoutez le bootstrap 4 beta valeurs cachées, comme ce.

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

Vous pouvez également appliquer la classe à une balise <a> pour masquer ce lien spécifique dans le menu déroulant. De plus, modifiez la classe d-xs-block pour répondre à vos spécifications. 

J'aimerais vous fournir quelques sources pour vous aider à masquer des éléments à des points d'arrêt spécifiques.

1
Mister Moody

Le fragment suivant implémente un "méga menu" (similaire à Yamm3 Megamenu pour Bootstrap 3, cf. http://geedmo.github.io/yamm3/ ) basé sur les classes flexbox de Bootstrap 4:

<!-- adapted from bs-repo basic navbar example code -->
<nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button"
          data-toggle="collapse" data-target="#navbarSupportedContent">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <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="#">Other</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="..."
           id="navbarDropdownMenuLink" data-toggle="dropdown">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <ul class="d-md-inline-flex flex-md-row">
            <li class="dropdown-item">
              <ul class="d-md-inline-flex flex-md-column">
                <li class="dropdown-item"><a href="#">Action</a></li>
                <li class="dropdown-item"><a href="#">Another</a></li>
                <li class="dropdown-item"><a href="#">Another</a></li>
              </ul>
            </li>
            <li class="dropdown-item">
              <ul class="d-md-inline-flex flex-md-column">
                <li class="dropdown-item"><a href="#">Action</a></li>
                <li class="dropdown-item"><a href="#">Another</a></li>
                <li class="dropdown-item"><a href="#">Another</a></li>
              </ul>
            </li>
            <li class="dropdown-item">
              <ul class="d-md-inline-flex flex-md-column">
                <li class="dropdown-item"><a href="#">Action</a></li>
                <li class="dropdown-item"><a href="#">Another</a></li>
                <li class="dropdown-item"><a href="#">Another</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text"
             placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0"
              type="submit">Search</button>
    </form>
  </div>
</nav>

Comparé à l'exemple de barre de navigation de base de Bootstrap, il existe une autre variable div pour le dropdown-menu contenant la variable ul constituant le menu, car display: flex ne va pas avec display: none défini de manière dynamique par le script de prise en charge de Bootstrap (popper.js).

Cette variante applique une disposition de lignes flex sur les résolutions md et suivantes, tout en appliquant un formatage de liste non ordonnée en clair sur les résolutions inférieures à -md.

0
imhotap

(RÉPONSE MISE À JOUR) Vous pouvez utiliser jQuery pour afficher les menus de navigation qui tiennent dans la fenêtre et masquer le reste:

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}

Violon: https://www.bootply.com/59hJN5jFZo

0
Taufik Nur Rahmanda