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.
Tipo de menú secundario de interfaz de usuario semántica: 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.
Clase usada:
- secundario: esta clase se utiliza para crear el menú secundario que puede ajustar su apariencia para restar énfasis a su contenido.
Sintaxis:
<div class="ui secondary menu">
...
</div>
Ejemplo 1: este ejemplo describe el uso del tipo de menú secundario de interfaz de usuario semántica. Aquí estamos creando un menú secundario horizontal con elementos de enlace.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Secondary Menu 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"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Secondary Menu Type</h3> <div class="ui secondary menu"> <a href="#" class="item active"> GeeksforGeeks </a> <a href="#" class="item"> HTML </a> <a href="#" class="item"> CSS </a> <a href="#" class="item"> JavaScript </a> <a class="item"> Bootstrap </a> <a class="item"> React.js </a> <a class="item"> Node.js </a> </div> </div> </body> </html>
Producción:
Ejemplo 2: este ejemplo describe el uso del tipo de menú secundario de interfaz de usuario semántica. Aquí estamos creando un menú secundario horizontal con elementos de enlace.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Secondary Menu 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"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Secondary Menu Type</h3> <div class="ui vertical secondary menu"> <a href="#" class="item active"> GeeksforGeeks </a> <a href="#" class="item"> HTML </a> <a href="#" class="item"> CSS </a> <a href="#" class="item"> JavaScript </a> <a class="item"> Bootstrap </a> <a class="item"> React.js </a> <a class="item"> Node.js </a> </div> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/collections/menu.html#secondary-menu