Bootstrap tiene la clase llamada “collapse navbar-collapse” que colapsa la barra de navegación cuando el usuario cambia la resolución de la pantalla. El java-script junto con él en la parte inferior del código activa el menú colapsado de tal manera que cuando el usuario hace clic en el ícono de hamburguesa del menú y navega al enlace requerido, colapsa nuevamente el menú después del clic. El evento de desplazamiento solo funciona para elementos desplazables y también para la ventana del navegador. Básicamente, adjunta una función para ejecutar que dice que la barra de navegación debe colapsar cuando ocurre un evento de desplazamiento, aquí, es la navegación del usuario a diferentes enlaces en la barra de navegación.
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Navigation Bar</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h1 style="color:green;text-align:center;">
GeeksforGeeks
</h1>
<h2 style="text-align:center;">Collapsing Navbar</h2>
<nav class="navbar navbar-expand-sm bg-success navbar-light">
<!-- Brand/logo -->
<a class="navbar-brand" href="#">
<img src=
"https://www.geeksforgeeks.org/wp-content/uploads/gfg_transparent_white_small.png"
alt="logo"
style="width:40px;">
</a>
<button class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#collapse_Navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
id="collapse_Navbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link"
data-toggle="tab"
href="#home">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="tab"
href="#algo">
Algo
</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="tab"
href="#ds">
DS
</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="tab"
href="#lang">
Languages
</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane"
id="home"
role="tabpanel">A</div>
<div class="tab-pane"
id="algo"
role="tabpanel">B</div>
<div class="tab-pane"
id="ds"
role="tabpanel">C</div>
<div class="tab-pane"
id="lang"
role="tabpanel">D</div>
</div>
<script>
$(document).on('click', '.nav-link.active', function() {
var href = $(this).attr('href').substring(1);
//alert(href);
$(this).removeClass('active');
$('.tab-pane[id="' + href + '"]').removeClass('active');
});
$(document).mouseup(function(e) {
var container = $("#tablist"); // target ID or class
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0) {
// get Event here
$('.active').removeClass('active');
}
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por YashGandhi5 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA