Menú horizontal desplazable CSS puro

Cuando no hay suficiente espacio, se pueden usar los elementos del menú horizontal desplazable. Da capacidad de respuesta a las páginas web. 

Para crear un menú horizontal desplazable, agregue la clase pure-menu-scrollable . Pure.CSS proporciona menús verticales por defecto. Puede cambiar el menú vertical a un menú horizontal agregando los menús desplegables pure-menu-horizontal de nombre de clase que no son compatibles con el menú horizontal desplazable. 

Clase de menú horizontal desplazable CSS puro:

  • pure-menu-scrollable : esta clase se utiliza para crear un menú horizontal desplazable.

Sintaxis:

<div class="pure-menu pure-menu-scrollable">
    ...
</div>

Ejemplo 1: el siguiente código demuestra el menú desplegable desplazable usando las clases anteriores.

HTML

<!DOCTYPE html>
<html lang="en">
 
    <head>
    <title>Pure CSS Scrollable horizontal Menu</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet"
          href=
"https://unpkg.com/purecss@2.0.6/build/pure-min.css">
    </head>
 
<body>
<div class="pure-menu pure-menu-horizontal pure-menu-scrollable">
    <ul class="pure-menu-list">
        <li class="pure-menu-heading">
        <a href="#" class="pure-menu-link">
          GeeksforGeeks
            </a>
       </li>
 
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link"
               >Data Structures
            </a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">
              Algorithms
            </a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">
              Interview Preparation
            </a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">
              Topic-wise Practice
            </a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">
              C++
            </a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">
              Java
            </a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">
              Python
            </a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">
              Competitive Programming
            </a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">
              Machine Learning
            </a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">
              Web Development
            </a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">
              Puzzles
            </a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">
              Project Ideas
            </a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">
              GFG School
            </a>
        </li>
    </ul>
</div>
</body>
</html>

Producción:

Pure CSS Scrollable Horizontal Menu

Menú horizontal desplazable CSS puro

Ejemplo 2:

HTML

<!DOCTYPE html>
<html lang="en">
 
    <head>
    <title>Pure CSS Scrollable horizontal Menu</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet"
          href=
"https://unpkg.com/purecss@2.0.6/build/pure-min.css">
    </head>
 
<body>
<div class="pure-menu pure-menu-horizontal pure-menu-scrollable">
    <ul class="pure-menu-list">
        <li class="pure-menu-heading">
        <a href="#" class="pure-menu-link">
          GeeksforGeeks
            </a>
       </li>
 
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link"
               >Data Structures
            </a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">
              Algorithms
            </a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">
              Interview Preparation
            </a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">
              Topic-wise Practice
            </a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">
              C++
            </a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">
              Java
            </a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">
              Python
            </a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">
              Competitive Programming
            </a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">
              Machine Learning
            </a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">
              Web Development
            </a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">
              Puzzles
            </a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">
              Project Ideas
            </a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">
              GFG School
            </a>
        </li>
    </ul>
</div>
</body>
</html>

Producción:

Pure CSS Scrollable Horizontal Menu

Menú horizontal desplazable CSS puro

Referencia: https://purecss.io/layouts/tucked-menu/

Publicación traducida automáticamente

Artículo escrito por sahilsulakhe3 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 *