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.
El menú de interfaz de usuario semántica se utiliza para mostrar el menú de navegación agrupado. Se utiliza un menú de navegación 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.
La variación dividida uniformemente del menú de interfaz de usuario semántica se utiliza para mostrar los elementos del menú en un espacio dividido uniformemente.
Menú de interfaz de usuario semántica Clase utilizada de variación uniformemente dividida:
- *número: Este es un contenedor de valor numérico que divide el contenedor en el mismo ancho del componente.
Sintaxis:
<div class="ui fluid number item menu">
<a class="item"> Content... </a>
...
</div>
Ejemplo 1: este ejemplo describe los usos de la variación dividida uniformemente del menú de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Menu Evenly Divided Variation </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 Evenly Divided Variation</h3> <div class="ui fluid five item menu"> <a class="item"> GeeksforGeeks </a> <a class="item"> HTML </a> <a class="item"> CSS </a> <a class="item"> JavaScript </a> <a class="item"> Bootstrap </a> </div> </div> </body> </html>
Producción:
Ejemplo 2: este ejemplo describe los usos de la variación uniformemente dividida del menú de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Menu Evenly Divided Variation </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 Evenly Divided Variation</h3> <div class="ui fluid six item menu"> <a class="item"> <i class="tag icon"></i> GeeksforGeeks </a> <a class="item"> <i class="tasks icon"></i> My Tasks </a> <a class="item"> <i class="phone icon"></i> +91 98765643210 </a> <a class="item"> <i class="envelope outline icon"></i> Mail </a> <a class="item"> <i class="coffee icon"></i> Coffee </a> <a class="item"> <i class="code icon"></i> My Code </a> </div> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/collections/menu.html#evenly-divided