Diseña un menú Vertical y Horizontal usando Pure CSS

El menú es un componente muy importante en cualquier sitio web. Es un elemento de la interfaz de usuario dentro de una página web que contiene enlaces a otras secciones del sitio web. Puede mostrarse en forma horizontal o vertical antes del contenido principal de la página web o encabezado.

  1. Para crear un menú vertical:

    1. Los menús son verticales por defecto en Pure CSS. Es fácil de personalizar debido al estilo predeterminado mínimo y los selectores de baja especificidad.
    2. Todos los componentes del menú deben estar encerrados dentro de una división con clase llamada «puro-menú» .
    3.  Agregue la clase «pure-menu-heading» en el elemento <span> para el encabezado o título principal.
    4.  Luego agregue todos los elementos después del encabezado dentro del elemento <ul> con la clase «pure-menu-list» . Cada elemento debe incluirse dentro del elemento <li> con la clase «pure-menu-item» .
    5.  Si desea vincular un elemento con una sección de su página web, puede incluirlo dentro del elemento <a> con la clase «pure-menu-link» .

    Ejemplo:

    HTML

    <!DOCTYPE html>
    <html>
      
    <head>
      
        <!--Import Pure Css files-->
        <link rel="stylesheet" href=
            integrity=
    "sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
            crossorigin="anonymous">
      
        <!-- Let browser know website is 
            optimized for mobile -->
            <meta name="viewport" content
            "width=device-width, initial-scale=1.0" />    
      
    </head>
      
    <body>
      
        <div class="pure-menu">
      
            <!--Main heading of menu-->
            <span class="pure-menu-heading">
                GEEKFORGEEKS
            </span>
      
            <ul class="pure-menu-list">
                  
                <!--List items of menu-->
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">
                        Home
                    </a>
                </li>
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">
                        About Us
                    </a>
                </li>
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">
                        Contact
                    </a>
                </li>
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">
                        Privacy Policy
                    </a>
                </li>
                  
      
            </ul>
        </div>
      
    </body>
      
    </html>

    Producción:

  2. Para crear un menú horizontal:

    Puede cambiar el menú vertical anterior a un menú horizontal simplemente agregando el nombre de clase «pure-menu-horizontal» en la división al principio.

    Ejemplo:

    HTML

    <!DOCTYPE html>
    <html>
      
    <head>
      
        <!--Import Pure Css files-->
        <link rel="stylesheet" href=
            integrity=
    "sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
            crossorigin="anonymous">
      
        <!-- Let browser know website is 
            optimized for mobile -->
            <meta name="viewport" content
            "width=device-width, initial-scale=1.0" />    
      
    </head>
      
    <body>
      
        <div class="pure-menu pure-menu-horizontal">
      
            <!--Main heading of menu-->
            <span class="pure-menu-heading">
                GEEKFORGEEKS
            </span>
      
            <ul class="pure-menu-list">
      
                <!--List items of menu-->
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">
                        Home
                    </a>
                </li>
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">
                        About Us
                    </a>
                </li>
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">
                        Contact
                    </a>
                </li>
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">
                        Privacy Policy
                    </a>
                </li>
                  
      
            </ul>
        </div>
      
    </body>
      
    </html>

    Producción:

Publicación traducida automáticamente

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