En este artículo, vamos a crear una barra de navegación giratoria usando HTML CSS simple y JavaScript. El contenido de la página rotará y la barra de navegación se revelará cuando se haga clic en el botón de menú.
Acercarse:
- Crea un archivo HTML en el que vayamos encabezados y una barra de navegación.
- Cree un estilo CSS para dar algunos efectos de animación a los elementos de la página web.
- Cree un archivo JS para agregar detectores de eventos que puedan detectar el evento de clic del mouse.
Sección HTML: En esta sección, definiremos la estructura de la página siguiendo los pasos a continuación:
- Primero crearemos un archivo HTML.
- Luego vinculamos el archivo CSS que proporciona estilo a nuestro HTML.
- En la sección del cuerpo, agregamos dos iconos para cerrar y abrir la barra de navegación.
- Al final, agregamos dos etiquetas <script>, una para nuestro archivo index.js y la otra para el ícono que hemos usado en nuestra página web.
index.html
<html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main_box show-nav"> <div class="circle-container"> <div class="circle"> <button class="open"> <i class="fas fa-bars"></i> </button> <button class="close"> <i class="fas fa-times"></i> </button> </div> </div> <div class="content"> <h1 style="color: green;"> GeeksforGeeks </h1> <small>Hello Geeks</small> <p> GeeksforGeeks is a good platform to learn programming. It is an educational website. Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's and Coding question likely to be asked in the interviews and make your upcoming placement season efficient and successful. </p> <p> Also, any geeks can help other geeks by writing articles on the GeeksforGeeks, publishing articles follow few steps that are Articles that need little modification or improvement from reviewers are published first. To quickly get your articles reviewed, please refer existing articles, their formatting style, coding style, and try to make you are close to them. In case you are a beginner, you may refer Guidelines to write an Article. </p> </div> </div> <nav> <ul class="nav-links"> <li>home</li> <li>about</li> <li>contact</li> </ul> </nav> <script src="https://kit.fontawesome.com/704ff50790.js" crossorigin="anonymous"></script> <script src="index.js"></script> </body> </html>
Sección CSS: En esta sección, diseñaremos el HTML con animaciones y efectos en nuestra página HTML para que parezca interactiva para los usuarios. Seguiremos los siguientes pasos:
- Primero restauraremos todos los efectos del navegador.
- Luego usamos clases e identificadores para dar efectos a los elementos HTML.
- Usamos el :hoverseselector para usar efectos de desplazamiento.
style.css
* {
box-sizing: border-box;
}
body {
overflow-x: hidden;
margin: 0;
background: #000;
color: #fff;
}
.main_box {
background-color: #fafafa;
color: #000;
transform-origin: top left;
transition: transform 0.5 linear;
width: 100vw;
min-height: 100vh;
padding: 3em;
}
.main_box.show-nav {
transform: rotate(-20deg);
}
.circle-container {
position: fixed;
top: -6em;
left: -6em;
}
.circle {
background-color: #ff7979;
height: 12em;
width: 12em;
border-radius: 50%;
position: relative;
transition: transform 0.5s linear;
cursor: pointer;
}
.circle button {
position: absolute;
top: 50%;
left: 50%;
height: 6em;
background: transparent;
border: 0;
color: #fff;
cursor: pointer;
}
.circle button:focus {
outline: none;
}
.circle button.open {
left: 60%;
}
.circle button.close {
top: 60%;
transform: rotate(90deg);
transform-origin: top left;
}
.main_box.show-nav .circle {
transform: rotate(-70deg);
}
nav {
position: fixed;
left: 0;
bottom: 2.5em;
z-index: 5;
}
nav ul {
list-style: none;
padding-left: 2em;
}
nav ul li {
text-transform: uppercase;
color: rgb(243, 243, 243);
margin: 2.5em 0;
transform: translateX(-100%);
transition: transform 0.4 ease-in;
}
nav ul li + li {
margin-left: 1em;
transform: translateX(-150%);
}
nav ul li + li + li {
margin-left: 2em;
transform: translateX(-200%);
}
.main_box.show-nav + nav li {
transform: translateX(0);
transition-delay: 0.3s;
}
.nav-links {
cursor: pointer;
}
Sección de JavaScript: en esta sección, configuraremos el botón de navegación para escuchar los eventos de clic y agregar o eliminar la clase que controla la barra de navegación. Seguiremos los siguientes pasos:
- Primero seleccionaremos todos los elementos requeridos de la página.
- A continuación, agregaremos un detector de eventos a los botones abrir y cerrar.
- Luego agregaremos o eliminaremos la clase de barra de navegación cuando se haga clic en los botones.
main.js
// Selecting the required elements
const open = document.querySelector(".open");
const close = document.querySelector(".close");
const main_box = document.querySelector(".main_box");
// Adding an event listener for the mouse
// click for opening the navigation bar
open.addEventListener("click", () => {
main_box.classList.add("show-nav");
});
// Adding an event listener for the mouse
// click for closing the navigation bar
close.addEventListener("click", () => {
main_box.classList.remove("show-nav");
});
Producción:
Publicación traducida automáticamente
Artículo escrito por rahulmahajann y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA