Menú vertical CSS puro con submenús

Los menús son las principales herramientas para que los visitantes naveguen por un sitio web. Pure.CSS presenta menús verticales y horizontales muy simples que el desarrollador puede personalizar fácilmente. El menú vertical con submenús es similar al menú vertical anidado.

Clases de menú vertical CSS puro:

  • pure-menu-heading: Es la clase que se agrega para los encabezados dentro o fuera de la lista del menú. De forma predeterminada, escribe en mayúscula el texto interior.
  • pure-menu-list: Es la clase para la lista desordenada que contiene los elementos del menú. Los elementos de la lista dentro de esta lista deben tener la clase «pure-menu-item» .
  • pure-menu-link: Es la clase que se agrega a los enlaces dentro de los elementos del menú.
  • pure-menu-allow-hover: es la clase para mostrar el submenú al pasar el mouse.
  • pure-menu-has-child: Es la clase para mencionar que el menú tiene algunos submenús.
  • pure-menu-children: Es la clase para mencionar submenús.

Sintaxis:

<li class="pure-menu-item 
           pure-menu-has-children
           pure-menu-allow-hover">  
    <a href="#" class="pure-menu-link">...</a>
    <ul class="pure-menu-children">
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">...</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">..</a>
        </li>  
    </ul>
</li>

Ejemplo 1: en este ejemplo, crearemos un menú vertical con un solo submenú.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Pure CSS Vertical 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">
    <style>
        .pure-menu-heading {
            color: #308d46;
        }
 
        .custom-display {
            /* To limit the menu width to
            the content of the menu: */
            display: inline-block;
        }
    </style>
</head>
 
<body>
    <div class=" pure-menu custom-display">
        <ul class="pure-menu-list">
            <li class="pure-menu-heading">
                GeeksforGeeks
            </li>
 
 
            <li class="pure-menu-item
                       pure-menu-has-children
                       pure-menu-allow-hover">
                <a href="#"
                   class="pure-menu-link">
                    Tutorials
                </a>
 
                <ul class="pure-menu-children">
                    <li class="pure-menu-item">
                        <a href="#"
                           class="pure-menu-link">
                            Data Structures and Algorithms
                        </a>
                    </li>
                    <li class="pure-menu-item">
                        <a href="#"
                           class="pure-menu-link">
                            GATE 2022
                        </a>
                    </li>
                    <li class="pure-menu-item">
                        <a href="#"
                           class="pure-menu-link">
                            Practice
                        </a>
                    </li>
                </ul>
            </li>
            <li class="pure-menu-item">
                <a href="#"
                   class="pure-menu-link">
                    Students
                </a>
            </li>
            <li class="pure-menu-item">
                <a href="#"
                   class="pure-menu-link">
                    Jobs
                </a>
            </li>
            <li class="pure-menu-item">
                <a href="#"
                   class="pure-menu-link">
                    Courses
                </a>
            </li>
 
        </ul>
    </div>
</body>
 
</html>

Producción:

Pure CSS Vertical Menu with Submenus

Ejemplo 2: en este ejemplo, crearemos un menú vertical de demostración con un submenú anidado.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
  <title>Pure CSS Vertical 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">
  <style>
    .pure-menu-heading {
      color: #308d46;
    }
 
    .custom-display {
      /* To limit the menu width to
            the content of the menu: */
      display: inline-block;
    }
  </style>
</head>
 
<body>
  <div class=" pure-menu custom-display">
    <ul class="pure-menu-list">
      <li class="pure-menu-heading">
        GeeksforGeeks
      </li>
 
      <li class="pure-menu-item
                 pure-menu-has-children
                 pure-menu-allow-hover">
        <a href="#"
           class="pure-menu-link">
          Tutorials
        </a>
 
        <ul class="pure-menu-children">
          <li class="pure-menu-item">
            <a href="#"
               class="pure-menu-link">
              Data Structures and Algorithms
            </a>
          </li>
          <li class="pure-menu-item">
            <a href="#"
               class="pure-menu-link">
              GATE 2022
            </a>
          </li>
 
          <li class="pure-menu-item
                     pure-menu-has-children
                     pure-menu-allow-hover">
            <a href="#"
               class="pure-menu-link">
              Practice
            </a>
            <ul class="pure-menu-children">
              <li class="pure-menu-item">
                <a href="#"
                   class="pure-menu-link">
                  HTML
                </a>
              </li>
              <li class="pure-menu-item">
                <a href="#"
                   class="pure-menu-link">
                  CSS
                </a>
              </li>
              <li class="pure-menu-item">
                <a href="#"
                   class="pure-menu-link">
                  JavaScript
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
 
      <li class="pure-menu-item">
        <a href="#"
           class="pure-menu-link">
          Students
        </a>
      </li>
      <li class="pure-menu-item">
        <a href="#"
           class="pure-menu-link">
          Jobs
        </a>
      </li>
      <li class="pure-menu-item">
        <a href="#"
           class="pure-menu-link">
          Courses
        </a>
      </li>
 
    </ul>
  </div>
</body>
 
</html>

 Producción:   

Pure CSS Vertical Menu with Submenus

  

Ejemplo 3: en este ejemplo, crearemos un menú vertical de demostración con varios submenús. 

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
  <title>Pure CSS Vertical 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">
  <style>
    .pure-menu-heading {
      color: #308d46;
    }
 
    .custom-display {
      /* To limit the menu width to
            the content of the menu: */
      display: inline-block;
    }
  </style>
</head>
 
<body>
  <div class=" pure-menu custom-display">
    <ul class="pure-menu-list">
      <li class="pure-menu-heading">
        GeeksforGeeks
      </li>
 
      <li class="pure-menu-item
                 pure-menu-has-children
                 pure-menu-allow-hover">
        <a href="#"
           class="pure-menu-link">
          Tutorials
        </a>
 
        <ul class="pure-menu-children">
          <li class="pure-menu-item">
            <a href="#"
               class="pure-menu-link">
              Data Structures and Algorithms
            </a>
          </li>
          <li class="pure-menu-item">
            <a href="#"
               class="pure-menu-link">
              GATE 2022
            </a>
          </li>
          <li class="pure-menu-item">
            <a href="#"
               class="pure-menu-link">
              Practice
            </a>
          </li>
        </ul>
 
      </li>
 
      <li class="pure-menu-item
                 pure-menu-has-children
                 pure-menu-allow-hover">
        <a href="#"
           class="pure-menu-link">
          Students
        </a>
 
        <ul class="pure-menu-children">
          <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">
              Geeks of the Month
            </a>
          </li>
          <li class="pure-menu-item">
            <a href="#"
               class="pure-menu-link">
              Placement Courses
            </a>
          </li>
          <li class="pure-menu-item">
            <a href="#"
               class="pure-menu-link">
              Internship
            </a>
          </li>
        </ul>
      </li>
 
      <li class="pure-menu-item
                 pure-menu-has-children
                 pure-menu-allow-hover">
        <a href="#"
           class="pure-menu-link">
          Jobs
        </a>
        <ul class="pure-menu-children">
          <li class="pure-menu-item">
            <a href="#"
               class="pure-menu-link">
              Apply for Jobs
            </a>
          </li>
          <li class="pure-menu-item">
            <a href="#"
               class="pure-menu-link">
              Post a Jobs
            </a>
          </li>
        </ul>
      </li>
 
      <li class="pure-menu-item">
        <a href="#"
           class="pure-menu-link">
          Courses
        </a>
      </li>
 
    </ul>
  </div>
</body>
 
</html>

 Producción:    

Pure CSS Vertical Menu with Submenus

Ejemplo 4: en este ejemplo, crearemos un menú vertical de demostración con varios submenús y un submenú anidado.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
  <title>Pure CSS Vertical 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">
  <style>
    .pure-menu-heading {
      color: #308d46;
    }
 
    .custom-display {
      /* To limit the menu width to
            the content of the menu: */
      display: inline-block;
    }
  </style>
</head>
 
<body>
  <div class=" pure-menu custom-display">
    <ul class="pure-menu-list">
      <li class="pure-menu-heading">
        GeeksforGeeks
      </li>
      <li class="pure-menu-item
                 pure-menu-has-children
                 pure-menu-allow-hover">
        <a href="#"
           class="pure-menu-link">
          Tutorials
        </a>
        <ul class="pure-menu-children">
          <li class="pure-menu-item">
            <a href="#"
               class="pure-menu-link">
              Data Structures and Algorithms
            </a>
          </li>
          <li class="pure-menu-item">
            <a href="#"
               class="pure-menu-link">
              GATE 2022
            </a>
          </li>
 
          <li class="pure-menu-item
                     pure-menu-has-children
                     pure-menu-allow-hover">
            <a href="#" class="pure-menu-link">
              Practice
            </a>
            <ul class="pure-menu-children">
              <li class="pure-menu-item">
                <a href="#"
                   class="pure-menu-link">
                  HTML
                </a>
              </li>
              <li class="pure-menu-item">
                <a href="#"
                   class="pure-menu-link">
                  CSS
                </a>
              </li>
              <li class="pure-menu-item">
                <a href="#"
                   class="pure-menu-link">
                  JavaScript
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
 
      <li class="pure-menu-item
                 pure-menu-has-children
                 pure-menu-allow-hover">
        <a href="#"
           class="pure-menu-link">
          Students
        </a>
 
        <ul class="pure-menu-children">
          <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">
              Geeks of the Month
            </a>
          </li>
          <li class="pure-menu-item">
            <a href="#"
               class="pure-menu-link">
              Placement Courses
            </a>
          </li>
          <li class="pure-menu-item">
            <a href="#"
               class="pure-menu-link">
              Internship
            </a>
          </li>
        </ul>
      </li>
 
      <li class="pure-menu-item
                 pure-menu-has-children
                 pure-menu-allow-hover">
        <a href="#"
           class="pure-menu-link">
          Jobs
        </a>
        <ul class="pure-menu-children">
          <li class="pure-menu-item">
            <a href="#"
               class="pure-menu-link">
              Apply for Jobs
            </a>
          </li>
          <li class="pure-menu-item">
            <a href="#"
               class="pure-menu-link">
              Post a Jobs
            </a>
          </li>
        </ul>
      </li>
 
      <li class="pure-menu-item">
        <a href="#"
           class="pure-menu-link">
          Courses
        </a>
      </li>
 
    </ul>
  </div>
</body>
 
</html>

Producción:      

Menú vertical CSS puro con submenús

Menú vertical CSS puro con submenús

Referencia: https://purecss.io/menus/

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 *