jquery - img - contorno bootstrap

Bootstrap 4-Nav-Ocultar elementos de menú adicionales

Question

Tengo un diseño de Bootstrap 4 similar a este: https://www.codeply.com/go/yLO99L66MD

Cuando hay demasiados elementos de navegación, quiero que estén ocultos, así que agregué esto: nav {overflow:hidden} . Esto hace el trabajo, pero el problema es que también oculta el menú desplegable. ¿Cómo puedo ocultar elementos de menú adicionales pero aún así permitir que aparezcan desplegables para elementos 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 -->

Answer 1

Aquí hay otra opción para Bootstrap 4 que colapsará los elementos adicionales de la barra de navegación en un menú desplegable en el lado derecho. Use algo de lógica (esto es usar jQuery) para controlar la ubicación de los elementos en el menú ...

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

Answer 2

Aquí hay una solución natural de Bootstrap 4, sin necesidad de JS o CSS extra. En lugar de usar ul , puede usar div de acuerdo con la documentación y usar la propiedad de visualización para mostrar u ocultar ciertos elementos en la barra de navegación, incluido el menú desplegable según el tamaño de la pantalla.

Aquí está lo que dice la documentación:

Debido a que usamos clases para nuestros navegadores, puede evitar el enfoque basado en listas por completo si lo desea. documentación de navegación

Aquí hay un ejemplo, agregué desplegable como div también:

<div class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="#">How does it work</a>
<a class="nav-item nav-link" href="#">Demo</a>
<div class="nav-item dropdown" href="#">
<a class="nav-link dropdown-toggle" href="#" 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>
</div>
<a class="nav-item nav-link d-block d-lg-none d-xl-none" href="#">Show only on md and down</a>
<a class="nav-item nav-link d-none d-lg-block d-md-block" href="#">Show on md and lg</a>
</div>

Es una solución nativa que funciona. Puede mostrar / ocultar cualquier elemento de la navegación de esta manera en cualquier tamaño de pantalla y también se mostrará en el menú móvil cuando se contraiga.

PS no hay necesidad de desbordamiento: oculto también

¡Buena suerte!

Answer 3

El siguiente fragmento implementa un "mega menú" (similar a Yamm3 Megamenu para Bootstrap 3, cf. http://geedmo.github.io/yamm3/ ) basado en las clases de 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>

En comparación con el ejemplo básico de la barra de navegación de Bootstrap, hay otra div aquí para el dropdown-menu contiene el dropdown-menu que conforma el menú desde la display: flex no va con la display: none configurada dinámicamente por el script de soporte desplegable de Bootstrap (popper.js).

Esta variante aplica el diseño de fila flexible en las resoluciones md y superiores, al tiempo que aplica el formato de lista simple sin orden en las resoluciones a continuación md .

Answer 4

Para los elementos de menú que le gustaría ver como ocultos en dispositivos móviles, envuelva un espacio alrededor de los elementos de la lista que desea ocultar y agregue los valores ocultos beta de bootstrap 4, como este.

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

También puede aplicar la clase a una etiqueta <a> para ocultar ese enlace específico dentro del menú desplegable. Además, juegue con la clase d-xs-block para cumplir con sus especificaciones.

Me gustaría proporcionarle un par de fuentes para que lo guíen con respecto a la ocultación de elementos en puntos de interrupción específicos.

• Así que falta-visible-y-oculto-en-bootstrap-v4
• Ejemplo en codeply

Answer 5

Puede utilizar la barra de navegación como este ejemplo dado.

Cuando cambie el tamaño del navegador, los elementos de navegación se moverán hacia el interior del menú desplegable si no tiene suficiente espacio.

Demo

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

Demostración de fragmentos

Abra el fragmento en modo de página completa y cambie el tamaño del navegador para ver los cambios.

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

Answer 6

aumentar el ancho de div o romper el menú después de ocultar el menú.

Answer 7

(RESPUESTA ACTUALIZADA) Puede usar jQuery para mostrar los menús de navegación que se ajustan dentro de la ventana y ocultar el resto:

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}

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