La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para el sitio web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza CSS y jQuery predefinidos para incorporar diferentes marcos.
El menú es un componente que muestra un grupo de elementos que sirven como navegación entre una sección del sitio web y otra. Es un componente imprescindible y siempre presente en cualquier sitio web para facilitar la navegación del usuario.
El menú de la interfaz de usuario semántica nos ofrece tanto contenido como encabezado, texto, entrada, botón, elemento de enlace, elemento desplegable, menú, submenú. En este artículo, conoceremos todo sobre ellos brevemente.
Contenido del menú de la interfaz de usuario semántica:
- Encabezado: el contenido del encabezado del menú de la interfaz de usuario semántica se utiliza para mostrar el nombre de la marca del sitio web. El contenido del encabezado tiene un formato diferente al resto de los elementos.
- Texto: el contenido de texto del menú de la interfaz de usuario semántica se utiliza para formatear el contenido del menú como texto simple. Se eliminan los bordes alrededor del menú.
- Entrada: el contenido de entrada del menú de la interfaz de usuario semántica se utiliza para colocar elementos de entrada dentro del menú. El elemento de entrada se puede utilizar para buscar artículos, blogs o contenido en su sitio.
- Botón: el botón de menú es una clase de contenido de menú en la que el menú contiene un botón. Esta clase es útil cuando queremos crear un menú que contenga uno o varios botones en los que el usuario pueda hacer clic.
- Elemento de enlace: se utiliza para crear un elemento de menú que puede contener elementos de enlace o elementos formateados como un enlace. Podemos crear elementos de enlace usando una etiqueta de anclaje o usando una clase de enlace.
- Elemento desplegable: Esto se usa para que el elemento del menú pueda contener un menú anidado en un menú desplegable.
- Menú: Esto se usa para que el menú contenga otro grupo de menú al mismo nivel que los elementos del menú.
- Submenú : Esto se usa para que el elemento del menú pueda contener otro menú anidado dentro que actúa como un submenú agrupado.
Sintaxis:
<div class="ui Menu-Content">
<div class="Menu-Content item">
...
</div>
...
</div>
El siguiente ejemplo ilustra el contenido del menú de la interfaz de usuario semántica:
Ejemplo 1: En este ejemplo, usaremos 4 del contenido del menú.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Menu Content</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body> <center> <div class="ui green header"> GeeksforGeeks </div> <strong>Semantic-UI Menu Content</strong> </center> <strong>Menu Button:</strong> <div class="ui menu"> <div class="item"> <div class="ui secondary button"> SignUP </div> </div> </div> <strong>Menu Header:</strong> <div class="ui menu"> <div class="ui green header item"> GeeksforGeeks </div> </div> <strong>Menu Text:</strong> <div class="ui text menu"> <div class="header item"> GeeksforGeeks </div> <a class="item" href= "https://www.geeksforgeeks.org/data-structures" target="_blank"> Data Structures </a> </div> <strong>Menu Input:</strong> <div class="item"> <div class="ui icon input"> <input type="text" placeholder="Find Tutorials ..." /> <i class="search icon"></i> </div> </div> </body> </html>
Producción:
Contenido del menú de la interfaz de usuario semántica
Ejemplo 2: En este ejemplo, usaremos el resto del contenido del menú.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Menu Content</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body> <center> <div class="ui green header">GeeksforGeeks</div> <strong>Semantic-UI Menu Content</strong> </center> <strong>Menu Submenu:</strong> <div class="ui menu"> <div class="ui green header item"> GeeksforGeeks </div> <div class="ui submenu"> <div class="ui green header item"> Geeks </div> </div> </div> <strong>Menu:</strong> <div class="ui menu"> <div class="header item"> GeeksforGeeks </div> <a class="item" href= "https://www.geeksforgeeks.org/data-structures" target="_blank"> Data Structures </a> </div> <strong>Menu Link:</strong> <div class="ui fluid seven item menu"> <a href="#" class="item"> GeeksforGeeks </a> <a href="#" class="item"> HTML </a> <a href="#" class="item"> CSS </a> </div> </body> </html>
Producción:
Contenido del menú de la interfaz de usuario semántica
Referencia: https://react.semantic-ui.com/collections/menu/
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA