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 interfaz de usuario semántica tiene un montón de componentes para el diseño de la interfaz de usuario. Uno de ellos es “Menú”. Menú se utiliza para mostrar el menú de navegación agrupado. Se utiliza un menú en cada sitio web para que sea más fácil de usar, de modo que la navegación a través del sitio web sea fácil y el usuario pueda buscar directamente el tema de su interés.
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.
Señalar: Se utiliza para crear una relación con el contenido cercano.
Tabular: Se utiliza para formatear el menú para mostrar información tabular.
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.
Paginación: este tipo tiene la capacidad de formatear un menú de paginación para presentar enlaces a páginas de contenido.
Contenido del menú de la interfaz de usuario semántica:
- Encabezado : se utiliza para mostrar el nombre de la marca del sitio web.
- Texto : se utiliza para dar formato al contenido del menú como texto simple.
- Entrada : se utiliza para colocar elementos de entrada dentro del menú.
- Botón : se utiliza para crear un menú que contiene uno o varios botones.
- Elemento de enlace : se utiliza para mostrar los elementos del menú como un enlace.
- Elemento desplegable : se utiliza para colocar el elemento desplegable dentro del menú.
- Menú emergente : se utiliza para mostrar contenido grande o un menú adicional mediante un menú emergente.
- Buscar : Se utiliza para colocar una barra de búsqueda dentro del menú.
- Menú: Permite que cada elemento del menú ocupe el mismo tamaño que el más grande.
- Submenú : se utiliza para crear un menú desplegable dentro de un menú determinado.
Estados del menú de la interfaz de usuario semántica:
- Desplazamiento : los elementos con enlaces o enlaces de nombre de clase se pueden desplazar.
- Activo : este estado se utiliza para activar un elemento de menú.
Variaciones del menú de la interfaz de usuario semántica :
- Fijo : esta variación se utiliza para fijar la posición de los elementos del menú con respecto a su contenido.
- Apilable : esta variación se utiliza para mostrar el menú apilable en la pantalla del móvil.
- Invertido : esta variación se utiliza para invertir los elementos del menú (en cuanto al color).
- Coloreado : esta variación se usa para agregar color a los elementos del menú.
- Iconos : esta variación se utiliza para mostrar los iconos en los elementos del menú.
- Iconos etiquetados : esta variación se utiliza para mostrar los iconos del menú con etiquetas.
- Fluido : esta variación se utiliza para que el menú tome el tamaño completo de su contenedor.
- Compacto : esta variación se utiliza para que el menú ocupe el tamaño completo de su contenedor.
- Dividido uniformemente : esta variación se utiliza para mostrar los elementos del menú en un espacio dividido uniformemente.
- Adjunto : esta variación se usa para adjuntar otros segmentos de contenido con los elementos del menú.
- Tamaño : Esta variación se utiliza para que el menú varíe de tamaño.
- Empotrado : Esta variación hace que el menú quepa en el menor espacio posible.
- Sin bordes : esta variación elimina el borde de los elementos del menú.
Ejemplo 1 : El siguiente código demuestra parte del contenido del menú anterior .
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src= "https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <h1 class="ui green header">GeeksforGeeks</h1> <strong><u>Semantic UI Menu Content</u></strong> <br/> <strong>Header, Text, Button, Input Menu Content</strong> <div class="ui vertical menu"> <div class="item"> <div class="header">Menu Header</div> <div class="menu"> <a class="item">Learn</a> <a class="item">Code</a> </div> </div> <a class="item"> <h4 class="ui header">GFG</h4> <p>An example of Menu Text</p> </a> <div class="item"> <div class="ui button">Menu Button</div> </div> <div class="item"> <div class="header">Menu Input</div> <div class="ui icon input"> <input type="text" placeholder="Query Search..."> <i class="search icon"></i> </div> </div> </div> </body> </html>
Producción:
Contenido del menú
Ejemplo 2 : El siguiente código demuestra algunas de las variaciones del menú anterior . También demuestra los estados del menú. La primera pestaña está activa . Todos los demás elementos del menú son etiquetas y se pueden desplazar .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Table Variation</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body style="margin:200px">
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong><u>Semantic UI Menu Variations</u></strong>
<br /><br />
<strong>Colored , Evenly Divided , Labeled Icon, Huge Menu</strong>
<div class="ui huge inverted labeled icon green four item menu">
<a class="active item">
<i class="tag icon"></i>
GeeksforGeeks
</a>
<a class="item">
<i class="thumbs up icon"></i>
Learn
</a>
<a class="item">
<i class="code icon"></i>
Code
</a>
<a class="item">
<i class="pencil alternate icon"></i>
Practice
</a>
</div>
</center>
<script>
$('.ui.menu .ui.dropdown').dropdown({
on: 'hover'
});
$('.ui.menu a.item').on('click', function () {
$(this)
.addClass('active')
.siblings()
.removeClass('active');
})
</script>
</body>
</html>
Salida :
Variaciones del menú
Referencia : https://semantic-ui.com/collections/menu.html
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA