Complemento JavaScript ScrollLoopMenu

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *