Menú horizontal CSS puro – Barcelona Geeks

Nos encontramos con menús horizontales en casi todos los sitios web. Pure CSS nos ayuda a implementar dichos menús con facilidad mediante el uso de la clase pure-menu . La clase Pure-menu por defecto crea un menú vertical que podemos convertir simplemente en uno horizontal agregando la clase pure-menu-horizontal. Uno de los usos más comunes de un menú horizontal es en las barras de navegación ( navbars ).

Usaremos las siguientes clases para ayudarnos a lograr el objetivo en cuestión:

pure-menu: Esto nos ayuda a crear un menú. (crea un menú vertical por defecto)
pure-menu-horizontal: Esto nos ayuda a crear un menú horizontal.
pure-menu-list: Esto nos ayuda a especificar la lista que contiene los elementos del menú.
pure-menu-item: Esto nos ayuda a especificar que un elemento en particular pertenece a la lista
pure-menu-link: Esto nos ayuda a especificar los enlaces en los elementos del menú
pure-menu-heading: Esto nos ayuda a especificar un encabezado para nuestro menú

Sintaxis:

<div class="pure-menu pure-menu-horizontal">
    <ul class="pure-menu-list">
        <li class="pure-menu-heading">...</li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">
                ...
            </a>
        </li>
    </ul>
</div>

Nota: No olvide agregar el CDN de CSS puro para poder usar el marco de CSS puro

Ejemplo: Supongamos que queremos crear un menú horizontal para la barra de navegación de nuestro portafolio.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <!--pure-CSS-CDN-->
    <link rel="stylesheet"
          href=
"https://unpkg.com/purecss@2.0.6/build/pure-min.css"
          integrity=
"sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" 
          crossorigin=
"anonymous">
  
    <!--Custom style for the logo-->
    <style>
        .logo {
            color: #2f8d46;
            font-weight: bold;
            font-size: 1.5rem;
        }
    </style>
  
    <title>Menu</title>
</head>
  
<body>
    <nav class="menu pure-menu pure-menu-horizontal">
        <a href="#" 
           class="logo pure-menu-heading pure-menu-link">
            MYSITE
        </a>
        <ul class="menu pure-menu-list">
            <li class="pure-menu-item">
                <a class="pure-menu-link">
                  About
                </a>
            </li>
            <li class="pure-menu-item">
                <a class="pure-menu-link">
                  Projects
                </a>
            </li>
            <li class="pure-menu-item">
                <a class="pure-menu-link">
                  Contact
                </a>
            </li>
        </ul>
    </nav>
</body>
  
</html>

Producción:

Menú horizontal CSS puro

Publicación traducida automáticamente

Artículo escrito por suavethapa y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta