La barra de navegación reducida funciona cuando el usuario se desplaza hacia abajo en la página. En este artículo, usaremos HTML, CSS y JavaScript para diseñar una barra de navegación reducida. HTML se usa para crear la estructura, CSS se usa para establecer el estilo en la estructura HTML para que se vea bien. Este tipo de barra de navegación que se reduce se ve atractiva en un sitio. Al usar JavaScript, puede hacer que la barra de navegación se reduzca fácilmente cuando el usuario se desplaza hacia abajo.
Creación de estructura: en esta sección, crearemos una estructura de sitio web básica para la barra de navegación retráctil y cuando el usuario se desplace hacia abajo en la página, mostrará el efecto.
- Código HTML para crear estructura:
html
<!DOCTYPE html> <html> <head> <meta name="viewport" content ="width=device-width, initial-scale=1"> <title> How to Create Shrink Header on Scroll using HTML, CSS and JavaScript ? </title> </head> <body> <!-- Navlist of header --> <div id="navlist"> <a href="#default" id="logo"> GeeksforGeeks </a> <div id="navlist-right"> <a href="#home">Home</a> <a href="#about">Our Products</a> <a href="#about">Careers</a> <a href="#contact">Contact US</a> <a href="#about">About US</a> </div> </div> <!-- Page Content --> <div class="content"> <b> A Computer Science Portal for Geeks </b> <p> How many times were you frustrated while looking out for a good collection of programming/algorithm/interview questions? What did you expect and what did you get? This portal has been created to provide well written, well thought and well explained solutions for selected questions. </p> </div> </body> </html>
Estructura de diseño: En la sección anterior, hemos creado la estructura del sitio web básico. En esta sección, diseñaremos la estructura de la barra de navegación y luego el efecto de desplazamiento hacia abajo en la barra de navegación usando JavaScript.
- Código CSS para agregar estilo en la estructura HTML:
CSS
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
/* Navlist designing */
#navlist {
overflow: hidden;
background-color: #0074D9;
padding: 90px 10px;
transition: 0.4s;
position: fixed;
width: 100%;
top: 0;
z-index: 1;
}
#navlist a {
float: left;
color: white;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
#navlist #logo {
font-size: 35px;
font-weight: bold;
transition: 0.4s;
}
#navlist a:hover {
color: #01FE06;
}
#navlist-right {
float: right;
}
/* Content design */
.content {
margin-top:220px;
padding:15px 15px 1800px;
font-size:22px;
}
</style>
- Código JavaScript para la animación en el menú:
jscript
<script>
// Scrolls down 90px from the top of
// the document, to resize the navlist
// padding and the title font-size
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 90 ||
document.documentElement.scrollTop > 90)
{
document.getElementById("navlist")
.style.padding = "25px 10px";
document.getElementById("logo")
.style.fontSize = "24px";
}
else {
document.getElementById("navlist")
.style.padding = "90px 10px";
document.getElementById("logo")
.style.fontSize = "35px";
}
}
</script>
Ejemplo: en este ejemplo, combinaremos código HTML, CSS y JavaScript para reducir la barra de navegación del encabezado.
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content
="width=device-width, initial-scale=1">
<title>
How to Create Shrink Header on Scroll
using HTML, CSS and JavaScript ?
</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
/* Navlist designing */
#navlist {
overflow: hidden;
background-color: #0074D9;
padding: 90px 10px;
transition: 0.4s;
position: fixed;
width: 100%;
top: 0;
z-index: 1;
}
#navlist a {
float: left;
color: white;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
#navlist #logo {
font-size: 35px;
font-weight: bold;
transition: 0.4s;
}
#navlist a:hover {
color: #01FE06;
}
#navlist-right {
float: right;
}
/* Content design */
.content {
margin-top:220px;
padding:15px 15px 1800px;
font-size:22px;
}
</style>
</head>
<body>
<!-- Navlist of header -->
<div id="navlist">
<a href="#default" id="logo">
GeeksforGeeks
</a>
<div id="navlist-right">
<a href="#home">Home</a>
<a href="#about">Our Products</a>
<a href="#about">Careers</a>
<a href="#contact">Contact US</a>
<a href="#about">About US</a>
</div>
</div>
<!-- Page Content -->
<div class="content">
<b>
A Computer Science Portal for Geeks
</b>
<p>
How many times were you frustrated while
looking out for a good collection of
programming/algorithm/interview questions?
What did you expect and what did you get?
This portal has been created to provide
well written, well thought and well
explained solutions for selected questions.
</p>
</div>
<script>
// Scrolls down 90px from the top of
// the document, to resize the navlist
// padding and the title font-size
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 90 ||
document.documentElement.scrollTop > 90)
{
document.getElementById("navlist")
.style.padding = "25px 10px";
document.getElementById("logo")
.style.fontSize = "24px";
}
else {
document.getElementById("navlist")
.style.padding = "90px 10px";
document.getElementById("logo")
.style.fontSize = "35px";
}
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA