Menú CSS básico Estilo anidado

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 para que se vean increíbles y puedan 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.

Los menús son las principales herramientas para que los visitantes naveguen por un sitio web. Foundation CSS Nested Style Menu crea el menú de navegación anidado. Los elementos del menú se crean utilizando elementos <ul> y <li>.

Clase de estilo anidado del menú Foundation CSS:

anidado: esta clase se utiliza para crear un menú de navegación anidado. El menú de navegación anidado tiene relleno adicional en el elemento.

Sintaxis:

<ul class="menu">
  <li><a href="#">Item 1</a></li>
  <li>
    <a href="#">Item 2</a>
    <ul class="nested menu">
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      . . .
    </ul>
  </li>
  <li><a href="#">Item 3</a></li>
  . . .
</ul>

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Menu Nested Style</title>
  
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
        crossorigin="anonymous">
  
    <!-- Compressed JavaScript -->
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
        crossorigin="anonymous"></script>
</head>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <h3>Foundation CSS Menu Nested Style</h3>
  
    <ul class="menu vertical">
        <li><a href="#">GeeksforGeeks</a></li>
        <li><a href="#">Web Technology</a>
            <ul class="nested vertical menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">jQuery</a></li>
            </ul>
        </li>
        <li><a href="#">Data Structure</a></li>
        <li><a href="#">Programming</a></li>
        <li><a href="#">Algorithm</a></li>
    </ul>
</body>
  
</html>

Producción:

Menú CSS básico Estilo anidado

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

Publicación traducida automáticamente

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

HTML

Deja una respuesta Cancelar la respuesta