Menú CSS básico – Barcelona Geeks

Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.

Un menú en Foundation CSS es una lista de navegación que contiene los diferentes componentes que redirigen a las distintas páginas vinculadas en los sitios web o aplicaciones web.

Clase de menú CSS básico:

menu : esta clase se utiliza para crear un menú de navegación.

Sintaxis:

<ul class ="menu">
    <li>Content</li>
    <li>Content</li>
</ul>

Ejemplo : este es el ejemplo básico para el menú horizontal de Foundation CSS.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Foundation CSS Menu</title>
    <link rel="stylesheet" 
          href=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css" />
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js">
    </script>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <h4>Foundation CSS Menu</h4>
    <ul class="menu">
        <li>
          <a href="#">Placement Course</a>
          </li>
        <li>
          <a href="#">DSA</a>
          </li>
        <li>
          <a href="#">Algorithms</a>
          </li>
    </ul>
</body>
</html>

Producción:

Foundation CSS Menu

Ejemplo : este es el ejemplo básico para el menú vertical Foundation CSS.

HTML

<html>
  
<head>
    <title>Foundation CSS Vertical Menu</title>
    <link rel="stylesheet"
          href=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css" /> 
</head>
  
<body>
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Foundation CSS Menu</h4>
    <ul class="menu vertical">
        <li>
          <a href="#">Home</a>
          </li>
        <li>
          <a href="#">About</a>
         </li>
        <li>
          <a href="#">Service</a>
          </li>
        <li>
          <a href="#">Contact</a>
      </li>
    </ul>
</body>
  
</html>

Salida :

Referencia : https://get.foundation/sites/docs/menu.html#basic-menu

Publicación traducida automáticamente

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

HTML

HTML

Deja una respuesta Cancelar la respuesta