En este artículo, aprenderemos cómo implementar el menú de bucle de desplazamiento utilizando el complemento ScrollLoopMenu basado en JavaScript . Es otro tipo de menú de desplazamiento simple e interactivo utilizado en el desarrollo de páginas web para obtener algunos efectos visuales agradables.
Nota: descargue el complemento JavaScript ScrollLoopMenu en la carpeta de trabajo e incluya los archivos necesarios en la sección principal de su código HTML.
<link href=”https://use.typekit.net/rtr2vsr.css” rel=”stylesheet” type=”text/css”/>
<link href=”css/base.css” rel=”stylesheet” type =”texto/css”/>
<script src=”js/index.js”></script>
Ejemplo: El siguiente ejemplo muestra el menú de bucle de desplazamiento utilizando controles HTML y el complemento ScrollLoopMenu basado en JavaScript . Diferentes clases como «menu», «menu__item-inner», «frame__link» del archivo «base.css» del complemento se adjuntan a las etiquetas HTML como se muestra a continuación para obtener el resultado esperado.
<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Scroll Loop Menu Plugin</title> <meta name="description" content="scroll loop animation." /> <meta name="keywords" content="Enter keywords in your web page" /> <link rel="stylesheet" href="https://use.typekit.net/rtr2vsr.css" /> <link rel="stylesheet" type="text/css" href="css/base.css" /> </head> <body> <div class="frame"> <h1 class="frame__title">GFG Scroll Loop Menu</h1> <div class="frame__links"> <a href= "https://www.geeksforgeeks.org/javascript-tutorial/" class="frame__link"> JavaScript </a> <a href= "https://www.geeksforgeeks.org/css-tutorials/" c lass="frame__link"> CSS </a> </div> <span class="frame__button" aria-hidden="true"> Close</span> </div> <nav class="menu"> <div class="menu__item"> <a class="menu__item-inner"> Algorithms</a> </div> <div class="menu__item"> <a class="menu__item-inner"> Data Structures</a> </div> <div class="menu__item"> <a class="menu__item-inner"> Languages</a> </div> <div class="menu__item"> <a class="menu__item-inner"> Interview Corner</a> </div> <div class="menu__item"> <a class="menu__item-inner"> GATE</a> </div> <div class="menu__item"> <a class="menu__item-inner"> ISRO CS</a> </div> <div class="menu__item"> <a class="menu__item-inner"> UGC NET CS</a> </div> <div class="menu__item"> <a class="menu__item-inner"> CS Subjects</a> </div> <div class="menu__item"> <a class="menu__item-inner"> Web technologies</a> </div> <div class="menu__item"> <a class="menu__item-inner"> Programming</a> </div> <div class="menu__item"> <a class="menu__item-inner"> Careers</a> </div> <div class="menu__item"> <a class="menu__item-inner"> Internship</a> </div> <div class="menu__item"> <a class="menu__item-inner"> Placement course</a> </div> <div class="menu__item"> <a class="menu__item-inner"> Geek of the Month</a> </div> </nav> <script src="js/index.js"></script> </body> </html>
- Producción:
- Al principio:
-
Cuando se hace clic en «div» con enlace, se redirige la página a los respectivos enlaces «href».
-
A continuación se muestra la función de menú de desplazamiento del complemento ScrollLoopMenu .
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA