Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble. La mejor parte de este marco es que crea diseños hermosos y receptivos, ya que contiene componentes semánticos preconstruidos.
Un 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. De forma predeterminada, el menú es horizontal y muestra los elementos que contiene de manera horizontal, es decir, uno al lado del otro. Hay varios tipos de menú en la interfaz de usuario semántica. En este artículo, conoceremos todo sobre ellos brevemente.
Tipos de menú de interfaz de usuario semántica:
- Menú secundario : se utiliza para crear el menú secundario que puede ajustar su apariencia para restar énfasis a su contenido. Para crear el tipo de menú secundario, usaremos la clase secundaria. Usaremos el elemento ancla para crear los elementos de la lista del menú secundario.
- Menú señalador : Se utiliza para crear una relación con el contenido cercano.
- Menú tabular : el tipo de menú tabular se utiliza para mostrar los elementos en forma tabular para mostrar la información en las pestañas.
- Menú de texto : se utiliza para dar formato a cualquier contenido de texto en el menú.
- Menú vertical : este tipo tiene la capacidad de hacer un menú vertical y mostrar sus elementos apilados unos sobre otros.
- Menú de paginación : este tipo tiene la capacidad de formatear un menú de paginación para presentar enlaces a páginas de contenido.
Sintaxis:
<div class="MenuType">
Content
</div>
Ejemplo 1: este ejemplo describe los tipos de menú de interfaz de usuario semántica mediante la creación del tipo señalador con la visualización del elemento.
HTML
<html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body style="margin-inline: 10rem;"> <center> <h1 class="ui header green"> GeeksforGeeks </h1> <h3> Semantic UI Menu Type </h3> <div class="ui pointing menu"> <a class="item"> <i class="book icon"></i> Tutorials </a> <a class="active item"> <i class="tasks icon"></i> Jobs </a> <a class="item"> <i class="certificate icon"></i> Certificate </a> <a class="item"> <i class="file alternate outline icon"></i> Courses </a> <div class="right menu"> <div class="item"> <div class="ui transparent icon input"> <input type="text" placeholder="type here...."> <i class="search link icon"></i> </div> </div> </div> </div> </center> </body> </html>
Producción:
Tipos de menú de interfaz de usuario semántica
Ejemplo 2: este ejemplo describe los usos del tipo tabular de menú de interfaz de usuario semántica con más pestañas.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Menu Tabular Type</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Menu Tabular Type</h3> <div class="ui tabular menu"> <a class="item active"> GFG1 </a> <a class="item"> GFG2 </a> <a class="item"> GFG3 </a> <a class="item"> GFG4 </a> <div class="right menu"> <div class="item"> <div class="ui transparent icon input"> <input type="text" placeholder="Search here"> <i class="search icon"></i> </div> </div> </div> </div> </div> </body> </html>
Producción:
Tipo tabular de menú de interfaz de usuario semántica
Ejemplo 3: El siguiente ejemplo demuestra el uso del tipo de paginación de menú de IU semántica.
HTML
<html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <center> <h1 class="ui header green"> GeeksforGeeks </h1> <h3> Semantic UI Menu Type </h3> <div class="ui pagination menu"> <a class="item" href="#">Prev</a> <a class="active item"> a</a> <a class="item">b</a> <a class="item">c</a> <div class="disabled item"> ...... </div> <a class="item">y</a> <a class="item">z</a> <a class="item" href="#">Next</a> </div> </center> </body> </html>
Producción:
Tipo de paginación de menú de interfaz de usuario semántica.
Referencia: https://semantic-ui.com/collections/menu.html#menu