Bootstrap 4 es uno de los marcos CSS más utilizados junto con HTML y JavaScript para crear sitios web interactivos. Bootstrap 4 ofrece una gran variedad de componentes, clases y métodos de utilidad incorporados que se pueden usar para crear una aplicación web fácil de usar. El siguiente artículo cumple con el propósito de cambiar el color de un menú desplegable de la barra de navegación de arranque cuando se contrae.
Primer enfoque: el primer enfoque utiliza clases de Bootstrap para cambiar el color del menú desplegable de la barra de navegación cuando se colapsa. Bootstrap 4 tiene una clase incorporada ‘.show’ que se agrega al elemento de la barra de navegación cuando el menú desplegable se expande y la clase se oculta cuando el menú desplegable está contraído. El color del menú desplegable se puede cambiar usando la clase show .
Implementación de código:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity=
"sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity=
"sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous">
</script>
<style type="text/css">
.nav-item.dropdown.show a {
color: blue !important;
}
#navbarDropdown {
color: pink;
}
</style>
</head>
<body>
<nav 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"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation">
<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 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu"
aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">
Action
</a>
<a class="dropdown-item" href="#">
Another action
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
Something else here
</a>
</div>
</li>
</ul>
</div>
</nav>
</body>
</html>
Producción:
- Antes de hacer clic en el menú desplegable:
- Después de hacer clic en el menú desplegable:
Segundo enfoque: el segundo enfoque utiliza jQuery con la clase Bootstrap para cambiar el color del menú desplegable de la barra de navegación cuando está contraído. Cuando se hace clic en el menú desplegable, se agrega la clase navcolor y cambia el color del menú desplegable. Cuando el menú desplegable se contrae o se vuelve a hacer clic, la clase navcolor se oculta. La clase navcolor se alterna cada vez que se hace clic en el menú desplegable. En este enfoque, no hacemos uso de ninguna clase de Bootstrap incorporada.
Implementación de código:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity=
"sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity=
"sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous">
</script>
<style type="text/css">
.navcolor {
color: red !important;
}
</style>
</head>
<body>
<nav 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"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation">
<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 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
href="#" id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu"
aria-labelledby="navbarDropdown">
<a class="dropdown-item"
href="#">Action</a>
<a class="dropdown-item"
href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
Something else here
</a>
</div>
</li>
</ul>
</div>
</nav>
<script type="text/javascript">
$("#navbarDropdown").click(function () {
$("#navbarDropdown").toggleClass("navcolor");
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el menú desplegable:
- Después de hacer clic en el menú desplegable:
Publicación traducida automáticamente
Artículo escrito por Shreyasi_Chakraborty y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA