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.
Contenido de elemento de enlace de menú de interfaz de usuario semántica: 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.
Clase usada:
- enlace: esta clase se utiliza para mostrar los elementos del menú como un enlace.
Sintaxis:
<div class="ui menu">
<div class="link item"> Contents... </div>
...
</div>
Ejemplo 1: este ejemplo describe el uso del contenido del elemento del enlace del menú de la interfaz de usuario semántica. Aquí estamos creando un menú de navegación horizontal con elementos de enlace.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Menu Link Item Content </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 Link Item Content</h3> <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> <a href="#" class="item"> JavaScript </a> <div class="link item"> Bootstrap </div> <div class="link item"> React.js </div> <div class="link item"> Node.js </div> </div> </div> </body> </html>
Producción:
Ejemplo 2: este ejemplo describe el uso del contenido del elemento del enlace del menú de la interfaz de usuario semántica. Aquí estamos creando un menú de navegación vertical con elementos de enlace.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Menu Link Item Content </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"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Menu Link Item Content</h3> <div class="ui vertical menu"> <a href="#" class="item"> GeeksforGeeks </a> <a href="#" class="item"> HTML </a> <a href="#" class="item"> CSS </a> <a href="#" class="item"> JavaScript </a> <div class="link item"> Bootstrap </div> <div class="link item"> React.js </div> <div class="link item"> Node.js </div> </div> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/collections/menu.html#link-item